故事背景
最近项目中遇到了这样的问题，接手了一段代码，代码中定义了一个对象 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 devlet'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 {
render() {
const { text } = this.props;
return (
Example Component: {text}
);
}
}
完美运行！
结语
这篇博客其实是想记录一下我的 typescript 升级过程，希望可以帮助到同样在升级 typescript 的你们