typescript-dva脚手架

2019有太多的东西想尝试，ts,GraphQL,SSR,docker,python,electron,小程序云后台,vue3等等,一个个来吧,用两天了解了下typescript,大概作了个webpack-ts-react-dva的脚手架出来,由于接触TS的时间才几天，因此有些地方的代码本身都以为写的很丑，老司机请多指教

• 是在半年前 webpack4构建react脚手架 基础上修改的，这样本身熟悉一点
• 基于：ts3.2+react16.7全家桶+dva2.4+webpack4+antd3.13+immutable+fetch+scss
• 源码

过程

• 增长一个ts的配置文件tsconfig.json

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "lib": [
            "es2015",
            "es2016"
        ]
    },
    "include": [ //包含的编译目录
        "./src/**/*"
    ],
    "exclude": [ //排出不编译的目录
        "node_modules",
        "**/*.spec.ts"
    ]
}

• 修改webpack.config.base.js,增长ts的识别,修改scss中的css-load为typings-for-css-modules-loader

{
    test: /\.ts$/,
    loader: 'ts-loader'
},
{
    test: /\.tsx$/,
    loader: 'ts-loader'
},

...

{
    loader: 'typings-for-css-modules-loader',
    options: {
        modules: true,
        namedExport: true,
        camelCase: true,
        minimize: true,
        localIdentName: "[path][name]__[local]--[hash:base64:5]"
    }
},

• 修改原来的js文件为ts，包含JSX的js文件变成tsx，对于使用dva来讲就是之前的model都变成了ts,routers里面的都变成了tsx.
• 引入写法变化：以前相似import React from 'react', import styles from './company.scss'变成了import * as React from "react", import * as styles from './Main.scss'
• 其余的见 源码 吧
• 由于接触TS的时间才几天，因此有些地方的代码本身都以为写的很丑，老司机请多指教

TS的优点

最直观的感觉就是配合vscode写ts代码很是爽，智能提示太到位了。而后就是TypeScript解决JavaScript的“痛点”：弱类型。弱类型的好处是十分灵活，能够写出很是简洁的代码。可是，对于大型项目来讲，强类型更有利，能够下降系统的复杂度，在编译时就发现类型错误，减轻程序员的负担。

参考

• TS官网
• TypeScript 在 React 中使用总结

最后

你们好，这里是「 TaoLand 」，这个博客主要用于记录一个菜鸟程序猿的Growth之路。这也是本身第一次作博客，但愿和你们多多交流，一块儿成长！文章将会在下列地址同步更新……
我的博客：www.yangyuetao.cn
小程序：TaoLand