在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面前遲疑的你。