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

来源：动视网责编：小采时间：2020-11-27 19:34:02

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

vscode搭建Typescript+React+Dva的开发环境:这篇文章主要介绍了关于vscode搭建Typescript+React+Dva的开发环境，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下[ 作为2018年前端最应该学的技术 ], Typescript 确实惹火, 这两天崩崩也是自学了一下 ts. 并且配置了一个简单的基于

推荐度：

点击下载本文 文档为doc格式

导读vscode搭建Typescript+React+Dva的开发环境:这篇文章主要介绍了关于vscode搭建Typescript+React+Dva的开发环境，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下[ 作为2018年前端最应该学的技术 ], Typescript 确实惹火, 这两天崩崩也是自学了一下 ts. 并且配置了一个简单的基于

 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>
 <h1>
 Hello {props.name ? props.name : "崩崩呢"}
 </h1>
 </p>
 );
 };
 
 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<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>
 );
 };

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 history={history}>
 <Switch>
 <Route path="/" exact component={Home} />
 <Route path="/news" component={News} />
 </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 文档链接描述已经讲得很详细了, 崩崩觉得没必要再说了!