dvaJS项目使用typescript教程

现在typescript越来越火了，各种项目都会用到typescript，我们今天就来说一下dvajs项目如何使用typescript（此文为CSDN吴小迪所写，翻版请说明来处）：
（本文默认dvajs的东西都弄好并可以启动了，如果未配置dvajs的部分请看：dvaJS安装以及脚手架生成的目录讲解）

第一步：

全局安装typescript

$ npm i typescript -g

第二步：

项目内部安装typescript 以及 ts-loader(将tsx尾缀的文件转换为js的工具)等

$ cnpm i link typescript
$ cnpm i --save-dev ts-loader source-map-loader
$ cnpm i --save-dev @types/react @types/react-dom

第三步：

在项目根目录新增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"
  ]
}

第四步：

测试我们的配置是否已经OK
在你的src文件夹下的routes文件夹中新增Test.tsx文件
文件内容如下：

import * as React from 'react'
import { render } from 'react-dom'

interface IAppProps {}
interface IAppState {}

class App extends React.Component<IAppProps, IAppState> {
  public render(): JSX.Element {
    return (
      <div>
        这是typescript了哦~
      </div>
    )
  }
}

export default App;

而后在router.js文件中把IndexPage指向此文件：

import React from 'react';
import { Router, Route, Switch } from 'dva/router';
import IndexPage from './routes/Test';

export default function RouterConfig({ history }) {
  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact component={IndexPage} />
      </Switch>
    </Router>
  );
}

这时如果你的页面出现了

这是typescript了哦~

说明你已经与笔者一样配置ok，

如果没有，请在下方评论，笔者会及时回复帮助你解决。