Dva-TypeScript环境搭建

一、安装 typescript (推荐使用全局安装)

npm install -g typescript

二、安装 dva-cli(使用全局安装)

npm install -g dva-cli

三、使用 dva-cli 创建项目

dva new tp-dva

四、进入项目，安装 typescript 所需的 react, react-dom 包, 以及 ts-loader 和 tslint

cd tp-dva

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
    }
}

注：在启动项目时报错tslint-react只需要主动安装tslint-react即可：

npm install tslint-react

七、 安装antd并按需加载

$ npm install antd babel-plugin-import --save

编辑 .Webpackrc，使 babel-plugin-import （按需加载）插件生效。

{
  "extraBabelPlugins": [
    ["import", {
      "libraryName": "antd",
      "libraryDirectory": "lib",
      "style": "css"
    }]
  ]
}