vscode crée un environnement de développement pour Typescript+React+Dva

这篇文章主要介绍了关于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

第三步

• . 进入你自己的项目目录

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

  
  

---

• . 使用 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配置项 )

  在项目 根目录 下新建 tsconfig.json(./tsconfig.json), 并写入下列必须代码:

      {
          "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规范 )

  在项目 根目录 下新建 tslint.json( ./tslint.json), 写入下列必须代码:
  (ps:下面的 rules 配置项, 可以自行添加)

    {
        "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 的相关配置已经全部完成, 接着该测试一下啦?

---

第四步

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

---

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

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

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

---

3 . 在 ./src/routes 目录下新建 News.tsx ( ./src/routes/News.tsx)(这是二级页面);

    import * as React from 'react';
    
    export interface INewsProps {
        newslist?: Array;
    };
    
    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>
        );
    };</inewsprops>

---

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 (
            <router>
                 <switch>
                     <route></route>
                     <route></route>
                 </switch>
            </router>
        );
    }

---

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

---

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

---

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

---

第五步 (大功告成)

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

Il est temps d'aller dormir, j'ai tellement codé, j'adorerai toujours le front-end Bengbeng !!

Ce qui précède est tout le contenu de cet article, j'espère cela sera utile à l'apprentissage de chacun, plus de contenu connexe Veuillez faire attention au site Web PHP chinois !

Recommandations associées :

Optimisation du projet vue-cli 2.x - introduction de fichiers de bibliothèque statique locale

addRoutes pour réaliser menu de routage des autorisations dynamiques

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!