在React舊專案中安裝並使用TypeScript的實踐
前言
本篇文章預設您大概瞭解什麼是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型別時報錯。 "module": "esnext", // 模組引入方式 "target": "esnext", // 指定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是變數名。
總結
本來還想再多寫幾個示例的,但是Dota2版本更新了,導致我不想繼續寫下去了,以後如果有時間再更新常用的示例吧。
本篇文章只專注於在React舊專案中安裝並整合TypeScript,儘可能做到不涉及TypeScript的具體語法與介紹,因為介紹這些東西就不是一篇部落格能搞定的了。
文章如有疏漏還請指正,希望能幫助到在TypeScript面前遲疑的你