vscode搭建Typescript+React+Dva的开发环境-JS 튜토리얼-php.cn

这篇文章主要介绍了关于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 = (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<{title: string, content: 'string'}>; }; 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({})中使用了H5的historyAPI, 比较好看;

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

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

第五步 (大功告成)

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

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

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