2019有太多的東西想嘗試湘换,ts,GraphQL,SSR,docker,python,electron,小程序云后臺,vue3等等,一個個來吧,用兩天了解了下typescript,大概做了個webpack-ts-react-dva的腳手架出來,因為接觸TS的時間才幾天,所以有些地方的代碼自己都覺得寫的很丑炫狱,老司機(jī)請多指教
image
- 是在半年前 webpack4構(gòu)建react腳手架 基礎(chǔ)上修改的,這樣自己熟悉一點
- 基于:
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的時間才幾天,所以有些地方的代碼自己都覺得寫的很丑躬审,老司機(jī)請多指教
TS的優(yōu)勢
最直觀的感受就是配合vscode寫ts代碼非常爽,智能提示太到位了蟆盐。然后就是TypeScript解決JavaScript的“痛點”:弱類型承边。弱類型的好處是十分靈活,可以寫出非常簡潔的代碼石挂。但是博助,對于大型項目來說,強(qiáng)類型更有利痹愚,可以降低系統(tǒng)的復(fù)雜度富岳,在編譯時就發(fā)現(xiàn)類型錯誤蛔糯,減輕程序員的負(fù)擔(dān)。
參考
最后
大家好窖式,這里是「 TaoLand 」蚁飒,這個博客主要用于記錄一個菜鳥程序猿的Growth之路。這也是自己第一次做博客萝喘,希望和大家多多交流淮逻,一起成長!文章將會在下列地址同步更新……
個人博客:www.yangyuetao.cn
小程序:TaoLand