Typescript+dva搭建开发环境

都说Typescript非常的好用，今天尝试了下将typescript跟dva搭建的环境进行下整合。
第一步：
采用dva命令创建项目：

dva new react4_pro

第二步：配置webstorm支持typescript语法：
点击File–>Settings–>File Wachers

第三步：修改webpack的配置文件：找到node_modules/_roadhog/lib/config/webpack.config.dev.js;
node_modules/_roadhog/lib/config/webpack.config.prod.js
在loaders里面添加对ts的支持申明：

  module: {
      loaders: [
     ....
        {
          test:  /\.ts$/,
          loader: 'ts-loader'
        },{
        test: /\.(js|jsx)$/,
        include: paths.appSrc,
        loader: 'babel'
      }, 
      ....

因为这里用到了ts-loader，所以需要安装该插件的依赖：
主要添加依赖如下：

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

第四步：在项目根目录下添加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"
  ]
}

第五步：写个测试文件来测试是否成功：
我添加了该文件routes/Test.tsx，代码如下：

import * as React from 'react'
import { render } from 'react-dom'
import { connect,dispatch } from 'react-redux' // 引入connect

interface IAppProps {}
interface IAppState {}

class App extends React.Component<IAppProps, IAppState> {
  public render(): JSX.Element {
    return (
      <div>
        Hello world222
      </div>
    )
  }
}

export default App;

第六步：然后将默认启动指向该文件：

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

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

export default RouterConfig;

然后执行：npm start启动起来：
如果出现以下界面：

表示dva整合typescript ok了，接下来就可以采用typescript的语法方式来进行开发咯。