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