前言
本篇文章默認您大概了解什么是TypeScript，主要講解如何在React舊項目中安裝並使用TypeScript。
寫這個的目的主要是網上關於TypeScript這塊的講解雖然很多，但都是一些語法概念或者簡單例子，真正改造一個React舊項目使用TypeScript的文章很少。
所以在這里記錄下改造一個React項目的實踐。
博客內容部分參照 TypeScript中文網，這個網站有官方文檔的中文版。
安裝TypeScript及相關庫
對於集成了TypeScript的腳手架可以略過這一步，這里主要講一下如何將TypeScript集成到一個React腳手架中。
首先執行
npm install --save @types/react @types/react-dom
這一步主要是為了獲取react和react-dom的聲明文件，因為並不是所有的庫都有TypeScript的聲明文件，所以通過運行
npm install --save @types/庫名字
的方式來獲取TypeScript的聲明文件。
只有獲取了聲明文件，才能實現對這個庫的類型檢查。
如果你使用了一些其它的沒有聲明文件的庫，那么可能也需要這么做。
然后運行命令：
npm install --save-dev typescript awesome-typescript-loader source-map-loader
這一步，我們安裝了typescript、awesome-typescript-loader和source-map-loader。
awesome-typescript-loader可以讓Webpack使用TypeScript的標准配置文件tsconfig.json編譯TypeScript代碼。
source-map-loader使用TypeScript輸出的sourcemap文件來告訴webpack何時生成自己的sourcemaps,源碼映射，方便調試。
添加TypeScript配置文件
在項目根目錄下創建一個tsconfig.json文件，以下為內容示例：
{
"compilerOptions": {
"allowSyntheticDefaultImports": true, // 允許從沒有設置默認導出的模塊中默認導入。這並不影響代碼的輸出，僅為了類型檢查。
"outDir": "./dist/", // 重定向輸出目錄
"sourceMap": true, // 生成相應的 .map文件
"noImplicitAny": true, // 在表達式和聲明上有隱含的 any類型時報錯。（默認為false，個人建議也為false，可以兼容之前的js代碼，這里改為true是為了我自己檢測哪些類型需要處理）
"module": "esnext", // 模塊引入方式
"target": "es6", // 指定ECMAScript目標版本
"moduleResolution": "node", // 決定如何處理模塊
"lib": [
"esnext",
"dom"
], // 編譯過程中需要引入的庫文件的列表。
"skipLibCheck": true, //忽略所有庫中的聲明文件（ *.d.ts）的類型檢查。
"jsx": "react" // 在 .tsx文件里支持JSX
},
"include": [
"./src/**/*", // 這個表示處理根目錄的src目錄下所有的.ts和.tsx文件，並不是所有文件
]
}
skipLibCheck非常重要，並不是每個庫都能通過typescript的檢測。
moduleResolution設為node也很重要。如果不這么設置的話，找聲明文件的時候typescript不會在node_modules這個文件夾中去找。
更多配置文件信息可以參考：這里。
配置webpack
這里列出一些TypeScript需要在webpack中使用的配置。
解析tsx文件的rule配置
示例如下：
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /(node_modules)/,
use: {
loader: 'babel-loader',
options: {
presets: ['react', 'env', 'stage-0', 'stage-3'],
plugins: [
'transform-decorators-legacy',
['import', { libraryName: 'antd', style: 'css' }], // `style: true` 會加載 less 文件
],
},
},
},
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }
//...
]
//...
}
其實就只是多加了一行：
{ test: /\.tsx?$/, loader: "awesome-typescript-loader" }
注意這一行需要加在解析jsx的rule下面，因為rule的執行順序是從下往上的，先解析tsx和ts再解析js和jsx。
當然用
enforce: 'pre'
調整過rule順序的可以不用在意這一點。
解決使用css-moudule的問題
如果代碼中使用了以下這種代碼：
import styles from './index.css'
那么很可能報下面的錯：
Cannot find module './index.css'
解決方法就是在根目錄下新建文件一個叫declaration.d.ts的文件，內容為：
declare module '*.css' {
const content: any;
export default content;
}
這行代碼就是為所有的css文件進行聲明。
同時需要更改一下我們之前的tsconfig.json文件，將這個文件路徑放在include中：
"include": [
"./src/**/*",
"./declaration.d.ts"
]
這個問題有通過安裝一些庫來解決的辦法，但是會給每個css生成一個聲明文件，感覺有點奇怪，我這里自己考慮了一下采用了上面這種方法。
用於省略后綴名的配置
如果你慣於在使用
import Chart from './Chart/index.jsx'
時省略后綴，即：
import Chart from './Chart/index'
那么在webpack的resolve中同樣需要加入ts和tsx：
resolve: {
extensions: [".ts", ".tsx", ".js", ".jsx"]
},
引入Ant Design
實際上這個東西Ant Design的官網上就有怎么在TypeScript中使用：在 TypeScript 中使用。
那么為什么還是要列出來呢？
因為這里要指出，對於已經安裝了Ant Design的舊項目而言（一般都是配了按需加載的吧），在安裝配置TypeScript時上面這個文檔基本沒有任何用處。
在網上可以搜到的貌似都是文檔中的方案，而實際上我們需要做的只是安裝ts-import-plugin。
npm i ts-import-plugin --save-dev
然后結合之前的 awesome-typescript-loader ，在webpack中進行如下配置
const tsImportPluginFactory = require('ts-import-plugin')
module.exports = {
// ...
module: {
rules: [
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader",
options: {
getCustomTransformers: () => ({
before: [tsImportPluginFactory([
{
libraryName: 'antd',
libraryDirectory: 'lib',
style: 'css'
}
])]
}),
},
exclude: /node_modules/
}
]
},
// ...
}
配置完成，修改前的准備
注意，直到這一步，實際上您的項目在編譯過程中仍然沒有用到TypeScript。
因為我們這里只會用TypeScript處理.ts和.tsx后綴的文件，除非在配置中將allowJs設為true。
在使用之前，默認您已經對TypeScript語法有了了解，不了解可以參考：5分鍾上手TypeScript。
也就是說，經過了上面的這些步驟，您的原有代碼在不改動后綴的情況下應該是可以繼續用的。
如果要使用TypeScript，那么新建tsx和ts文件，或者修改原有的文件后綴名即可。
接下來會列出一些典型的修改示例。
函數式組件的修改示例（含children）
import React from 'react'
import styles from './index.css'
interface ComputeItemProps {
label: string;
children: React.ReactNode;
}
function ComputeItem({ label, children }: ComputeItemProps) {
return <div className={styles['item']}>
<div className={styles['label']}>{label}:</div>
<div className={styles['content']}>{children}</div>
</div>
}
export default ComputeItem
這個例子中語法都可以在TypeScript的官網查到，唯一需要注意的是children的類型是React.ReactNode。
class組件修改示例(含函數聲明，事件參數的定義)
import React from 'react'
import styles from './index.css'
interface DataSourceItem {
dayOfGrowth: string;
netValueDate: string;
}
interface ComputeProps {
fundCode: string;
dataSource: DataSourceItem[];
onChange(value: Object): void;
}
export default class Compute extends React.Component<ComputeProps, Object> {
// 改變基金代碼
handleChangeFundCode = (e: React.ChangeEvent<HTMLInputElement>) => {
const fundCode = e.target.value
this.props.onChange({
fundCode
})
}
render() {
//...
);
}
}
這個例子展示如何聲明class組件：
React.Component<ComputeProps, Object>
語法雖然看起來很怪，但是這就是TypeScript中的泛型，以前有過C#或者Java經驗的應該很好理解。
其中，第一個參數定義Props的類型，第二個參數定義State的類型。
而react的事件參數類型應該如下定義：
React.ChangeEvent<HTMLInputElement>
這里同樣使用了泛型，上面表示Input的Change事件類型。
而組件的Prop上有函數類型的定義，這里就不單獨列出來了。
這幾個例子算是比較典型的TypeScript與React結合的例子。
處理window上的變量
使用寫在window上的全局變量會提示window上不存在這個屬性。
為了處理這點，可以在declaration.d.ts這個文件中定義變量：
// 定義window變量
interface Window{
r:string[]
}
其中r是變量名。
處理別名問題（2019年12月2日更新）
如果你的代碼在webpack中定義了別名，即：
resolve: {
alias: {
common: path.resolve(__dirname, 'src/common'),
modules: path.resolve(__dirname, 'src/modules'),
store: path.resolve(__dirname, 'src/store'),
}
},
那么使用這種別名的時候：
import { PageReduxState } from 'store/reducers';
typescript會找不到相應模塊。
為了解決這個問題，需要在tsconfig.json中配置解析路徑：
{
"compilerOptions": {
// ...
// ts下別名的檢測
"baseUrl": "./src",
"paths": {
"common/*": ["common/*"],
"modules/*": ["modules/*"],
"store/*": ["store/*"]
}
},
//...
}
typescript解析擴展運算符報錯（2019年12月13日更新）
報錯提示如下：
ERROR in ./src/modules/pageMain/index.tsx 40:16
Module parse failed: Unexpected token (40:16)
You may need an appropriate loader to handle this file type.
| this.handleChange = (params) => {
| this.setState({
> ...this.state,
| ...params
| }, this.getList);
@ ./src/route/index.js 28:9-35
@ ./src/app.js
@ multi babel-polyfill ./src/app.js
解決方案：
嘗試將tsconfig.json中
"target": "esnext"
修改為
"target": "es6"
即可。
總結
本來還想再多寫幾個示例的，但是Dota2版本更新了，導致我不想繼續寫下去了，以后如果有時間再更新常用的示例吧。
本篇文章只專注於在React舊項目中安裝並集成TypeScript，盡可能做到不涉及TypeScript的具體語法與介紹，因為介紹這些東西就不是一篇博客能搞定的了。
文章如有疏漏還請指正，希望能幫助到在TypeScript面前遲疑的你。