2019有太多的東西想嘗試，ts,GraphQL,SSR,docker,python,electron,小程序云后臺,vue3等等,一個個來吧,用兩天了解了下typescript,大概做了個webpack-ts-react-dva的腳手架出來,因為接觸TS的時間才幾天，所以有些地方的代碼自己都覺得寫的很丑，老司機請多指教
image
- 是在半年前 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的“痛點”：弱類型。弱類型的好處是十分靈活，可以寫出非常簡潔的代碼。但是，對于大型項目來說，強類型更有利，可以降低系統的復雜度，在編譯時就發現類型錯誤，減輕程序員的負擔。
參考
最后
大家好，這里是「 TaoLand 」，這個博客主要用于記錄一個菜鳥程序猿的Growth之路。這也是自己第一次做博客，希望和大家多多交流，一起成長！文章將會在下列地址同步更新……
個人博客：www.yangyuetao.cn
小程序：TaoLand
