Erlo

vscode搭建Typescript+React+Dva的开发环境

时间:2018-07-09   阅读:2237次   来源:php中文网
页面报错
点赞
原文:http://www.php.cn/js-tutorial-406280.html

这篇文章主要介绍了关于vscode搭建Typescript+React+Dva的开发环境,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下

[ 作为2018年前端最应该学的技术 ], Typescript 确实惹火, 这两天崩崩也是自学了一下 ts. 并且配置了一个简单的基于 Dva+React+Typescript+Tslint 的环境, 由于其他的百度教程都是 17 年或者更早, 很多已经过时了, 所以想想还是分享经验给自学的friends!

第一步

安装 typescript (推荐使用全局安装)
    npm install -g typescript

第二步

安装 dva-cli(使用全局安装)
    npm install -g dva-cli

第三步



    {
        "extends": [
            "tslint:latest",
            "tslint-react"
        ],
        "linterOptions": {
            "exclude": [
                "node_modules#zs#*#zs#.ts",
                "src#zs#*#zs#.{ts,tsx}"
            ]
        },
        "rules": {
            "object-literal-sort-keys": false,
            "jsx-no-lambda": false,
            "eofline": false,
            "no-consecutive-blank-lines": false,
            "no-var-requires": false,
            "quotemark": false,
            "space-within-parents": false,
            "no-submodule-imports": false,
            "no-implicit-dependencies": false,
            "ordered-imports": [ false ],
            "jsx-boolean-value": false,
            "no-trailing-whitespace": false,
            "semicolon": false,
            "trailing-comma": false,
            "space-in-parents": false,
            "typedef-whitespace": [ false ],
            "whitespace": [ true ],
            "interface-over-type-literal": true,
            "no-duplicate-imports": false,
            "no-namespace": true,
            "no-internal-module": true
        }
    }

第四步

1 . 删除 ./src 目录下的所有文件, 不要删文件夹;

2 . 在 ./src/routes 目录下新建 Home.tsx( ./src/routes/Home.tsx)(默认首页);

Ps: dvaroutes 相当于 reduxcontainers(容器组件), 具体相关概念可以参考链接描述 , Home.tsx 的代码如下:

    import * as React from 'react';
    
    export interface IAppProps {
        name?: string;
    };
    
    const Home: React.SFC= (props: IAppProps): JSX.Element => {
        return (Hello {props.name ? props.name : "崩崩呢"});
    };
    
    export default Home;

3 . 在 ./src/routes 目录下新建 News.tsx ( ./src/routes/News.tsx)(这是二级页面);
    import * as React from 'react';
    
    export interface INewsProps {
        newslist?: Array;
    };
    
    const News: React.SFC= ( props: INewsProps ): JSX.Element => {
        const newslist = props.newslist ? props.newslist : [
            {
                title: 'title1',
                content: 'content1',
            }
        ];
        
        return ({newslist[0].title}{newslist[0].content}over);
    };

4 . 写好了我们的容器组件, 进入到 ./src, 在项目根目录下新建 router.tsx( ./src/router.tsx), 配置我们的路由!
    import * as React from 'react';
    
    import { Router, Route, Switch } from 'dva/router';
    
    import Home from './routes/Home';        // 引入 首页 组件
    import News from './routes/News';        // 引入 二级 页面
    
    export default function RouterConfig ({ history }){        // 路由配置
        return ();
    }

5 . 最后一步, 去到 ./src/ 根目录, 新建 index.tsx(./src/index.tsx ), 并写入如下代码!
    import dva from 'dva';
    import createhistory from 'history/createBrowserHistory';
    
    const app = dva({
        history: createhistory(),
    });
    
    app.router( require('./router').default );
    
    app.start('#root');

Ps: 由于 dva 的默认路由是 Hash 路由, 崩崩有点强迫, 所以在 const app = dva({}) 中使用了 H5historyAPI, 比较好看;


6 . 在命令行执行 npm start, 代码没写错的话,应该就能看到这样的主页图片描述

7 . 继续在浏览器地址栏中输入 /news, 即可看到跳转到了 news 页面图片描述

第五步 (大功告成)

总结: 崩崩只学了 2 天的 ts,所以就迫不及待的将其融入到了 redux+react
的实践中, 期间踩了不少的坑, 发现 redux 其实对 ts 的支持不是很友好, 所以果断地转向了更加轻
量的 dva, 而网上的对 dva+react+ts 的配置少之又少,而且是过时的东西, 所以分享给大家..., 另外代码没有过多的注释, dva 文档链接描述  已经讲得很详细了, 崩崩觉得没必要再说了!

要睡觉了, 就码这么多了, 永远热爱前端的崩崩!!

相关推荐

提交留言

评论留言

回复他/她 1楼 昵称:ERLO   2018-10-25 11:03

感谢错误反馈

吐槽小黑屋()

* 这里是“吐槽小黑屋”,所有人可看,只保留当天信息。

  • Erlo吐槽

    Erlo.vip2021-09-25 00:19:29Hello、欢迎使用吐槽小黑屋,这就是个吐槽的地方。
  • 返回顶部

    给这篇文章打个标签吧~

    棒极了 糟糕透顶 好文章 PHP JAVA JS 小程序 Python SEO MySql 确认