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

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

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

第一步

    npm install -g typescript

登录后复制

第二步

    npm install -g dva-cli

登录后复制

第三步

. 进入你自己的项目目录

    cd d:/code/4-Dva+React\1-dva+react_firstday

登录后复制

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

. 使用 dva-cli 创建项目, 创建好的项目目录如下:
```
    dva new 01-dva-quickstart
```
登录后复制

. 安装 typescript 所需的 react, react-dom 包, 以及 ts-loader 和 tslint
```
    npm install --save-dev @types/react @types/react-dom ts-loader ts-lint
```
登录后复制

. 配置 tsconfig.json ( ts配置项 )

    {
        "compilerOptions": {
            "strictNullChecks": true,
            "moduleResolution": "node",
            "allowSyntheticDefaultImports": true,
            "experimentalDecorators": true,
            "jsx": "preserve",
            "noUnusedParameters": true,
            "noUnusedLocals": true,
            "target": "es6",
            "lib": [
                "dom", 
                "es7"
            ]
        },
        "exclude": [
            "node_modules",
            "lib",
            "es"
        ]
    }

登录后复制

. 配置 tslint.json ( tslint规范 )

    {
        "extends": [
            "tslint:latest",
            "tslint-react"
        ],
        "linterOptions": {
            "exclude": [
                "node_modules/**/*.ts",
                "src/**/*.{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
        }
    }

登录后复制

. 至此, ts 的相关配置已经全部完成, 接着该测试一下啦?

第四步

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

登录后复制

    import * as React from 'react';
    
    export interface INewsProps {
        newslist?: Array<{title: string, content: 'string'}>;
    };
    
    const News: React.SFC<INewsProps> = ( props: INewsProps ): JSX.Element => {
        const newslist = props.newslist ? props.newslist : [
            {
                title: 'title1',
                content: 'content1',
            }
        ];
        
        return (
            <p>
                <nav>
                    <ol>
                        <li>{newslist[0].title}</li>
                        <li>{newslist[0].content}</li>
                        <li>over</li>
                    </ol>
                </nav>
            </p>
        );
    };

登录后复制

    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 (
            <Router history={history}>
                 <Switch>
                     <Route path="/" exact component={Home} />
                     <Route path="/news" component={News} />
                 </Switch>
            </Router>
        );
    }

登录后复制

    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({}) 中使用了 H5 的 historyAPI, 比较好看;

第五步 (大功告成)

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注Work网！