故事背景

最近项目中遇到了这样的问题，接手了一段代码，代码中定义了一个对象 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 的你们