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 的你们