typescript 改造二三事

故事背景

最近項目中遇到了這樣的問題，接手了一段代碼，代碼中定義了一個對象 item ，接下來的方法根據 item 內部的某些字段進行一頓 format 操作，問題的關鍵在於，我接手的時候沒有人給我講這個 item 對象內部都有什麼字段，表達什麼含義，當代碼量足夠大的時候，維護性就成了問題，所以就有了在項目中引入 typescript 的故事

安裝 typescript

項目現狀：node版本 8.x babel6.x
看了一下ts 官方文檔，引入ts只需要安裝typescript @types/react @types/react-dom 再配置一下webpack的配置就ok

安裝配套babel插件和預設

首先我們需要添加一個 @babel/preset-typescript 在 babel 配置的 preset 裏，安裝一下

yarn add @babel/preset-typescript --save

先把他如此粗暴的添加到配置中去，運行起來看看會發生什麼

presets: ['react', 'es2015', 'stage-0', '@babel/preset-typescript'],

npm run dev

let's do it~

發現 @babel/preset-typescript 需要babel7.X 支持，我們升級下 babel
項目當先babel相關設置

"babel-cli": "^6.24.1",
"babel-core": "^6.25.0",
"babel-eslint": "^8.0.3",
"babel-jest": "^21.0.2",
"babel-loader": "^7.1.1",
"babel-plugin-add-module-exports": "^0.2.1",
"babel-plugin-import": "^1.11.2",
"babel-plugin-transform-decorators-legacy": "^1.3.4",
"babel-plugin-transform-react-jsx-source": "^6.22.0",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-plugin-zent": "^2.0.0-next.5",
"babel-preset-env": "^1.6.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
"babel-register": "^6.24.1",

我們更新一波，更新後的配置爲

"@babel/cli": "^7.6.2",
"@babel/core": "^7.6.2",
"@babel/plugin-proposal-class-properties": "^7.5.5",
"@babel/plugin-proposal-decorators": "^7.6.0",
"@babel/plugin-proposal-export-default-from": "^7.5.2",
"@babel/plugin-proposal-object-rest-spread": "^7.6.2",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-modules-commonjs": "^7.6.0",
"@babel/plugin-transform-runtime": "^7.6.2",
"@babel/preset-env": "^7.6.2",
"@babel/preset-react": "^7.0.0",
"@babel/preset-typescript": "^7.6.0",
"@babel/register": "^7.6.2",
"@babel/runtime": "^7.6.2",
"babel-loader": "^8.0.6",

調整項目原先babel配置
具體可以參考 babel7 升級指南

去掉原先配置中的 es2015 stage-0 的preset，替換爲 @babel/preset-env
修改多個倉庫 babel-plugin-import 的使用方法 （多個分開調用import插件）
修改裝飾器插件 transform-decorators-legacy => @babel/plugin-proposal-decorators
支持類屬性的轉化 @babel/plugin-proposal-class-properties
支持對象使用解構 @babel/proposal-object-rest-spread
支持動態導入文件 @babel/plugin-syntax-dynamic-import
轉換爲commonjs包 @babel/plugin-transform-modules-commonjs (這一步是因爲目前很多地方用js寫的 export default {...} ts導入需要 import xx as xxx)

我的配置如下

tsconfig

{
    "include": ["src/**/*"],
    "exclude": ["node_modules/**"]
    "compilerOptions": {
        "target": "es6",
        "module": "commonjs",
        "lib": [
            "dom",
            "es2017",
            "es2018.promise"
        ],
        "allowSyntheticDefaultImports": true,
        "moduleResolution": "node",
        "allowJs": true,
        "experimentalDecorators": true,
        "emitDecoratorMetadata": true,
        "sourceMap": true,
    }
}

ok 目前來看 問題都已經解決了，我們再次 run dev 試試看

Perfect! 運行沒有問題， 時間還比之前短了 10000 毫秒的樣子。

ts測試

新建一個ts

import React, { Component } from 'react';
import { Button } from 'zent';

interface IExampleComponentProps {
  text?: string;
}

export default class ExampleComponent extends Component<IExampleComponentProps> {
  render() {
    const { text } = this.props;

    return (
      <div className="example-component">
        <h1>Example Component: {text}</h1>
        <Button>123</Button>
      </div>
    );
  }
}

完美運行！

結語

這篇博客其實是想記錄一下我的 typescript 升級過程，希望可以幫助到同樣在升級 typescript 的你們