Typescript+dva搭建开发环境

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

dva new react4_pro

第二步：配置webstorm支持typescript语法：
点击File–>Settings–>File Wachers
Typescript+dva搭建开发环境

第三步：修改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启动起来：
如果出现以下界面：
Typescript+dva搭建开发环境

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

秒客网

Typescript+dva搭建开发环境

相关文章