背景：当你接手一些老的前端项目的时候，有时候这个项目同时又js和ts，如何快速将一个老的基于React的项目快速转换为ts风格。
ts compiler
链接是typescript官方的介绍，这里我简单说一说一些ts compiler的基本概念。
- Parser 根据源代码生产ast
- Type Checker 可以分析生成一些推断类型
- Emitter 生成器
- Pre-processor 分析源代码依赖，生成一系列SourceFile
目标
基本上我们需要将一个jsx风格的React Component 转换为一个tsx风格的Component
import PropTypes from 'prop-types'
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
@connect(
(state, props) => {
const { app, global, info, list, curItem } = state
return {
curApp: list[props.id],
app,
curItem,
total: info.total,
name: global.name,
}
},
dispatch =>
bindActionCreators(
{
save,
update,
remove,
},
dispatch
)
)
export default class Test extends Component {
static propTypes = {
obj: PropTypes.object,
isBool: PropTypes.bool,
str: PropTypes.string,
arr: PropTypes.array,
oneOfType: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
node: PropTypes.node,
oneOf: PropTypes.oneOf(['a', 'b', 'c', 'd']),
func: PropTypes.func,
required: PropTypes.func.isRequired,
}
constructor(props) {
super(props)
this.state = {
isShowModal: false,
modalName: props.report_name || '',
modalType: 'save',
confirmLoading: false,
monitorModalVisible: false,
}
this.aaa = '111'
}
render() {
return <div>hello tscer</div>
}
}
复制代码我们需要做什么
- 将 static propTypes 转换为 interface IProps
- 根据 this.state 生成 interface IState
- 生成 Component 的 generic types
- 去掉 PropTypes
在开始之前我们需要个 ast viewer 帮我们快速分析ast树结构， 这里，让我们把上述代码复制进去， 看看ast树结构。
开始分析
入口
import { CompilerOptions, createPrinter, createProgram, EmitHint, transform } from 'typescript'
const program = createProgram([realPath], compileOptions)
const sourceFiles = program
.getSourceFiles()
.filter(s => s.fileName === realPath)
const typeChecker = program.getTypeChecker()
const result = transform(sourceFiles, [
generateGenericPropAndState(typeChecker),
removeImportPropTypes(typeChecker),
removeStaticPropTypes(typeChecker),
])
const printer = createPrinter()
const printed = printer.printNode(
EmitHint.SourceFile,
result.transformed[0],
sourceFiles[0]
)
const res = prettier.format(printed, {
semi: true,
singleQuote: true,
trailingComma: 'es5',
bracketSpacing: true,
parser: 'typescript',
})
复制代码-
createProgram
- 第一个参数是我们需要编译文件的地址数组
- 第二个参数是ts项目下面的tsconfig.json的一些编译选项，这里可以读取目标文件的compileOptions，或者自选一些默认的选项生成。
- 简单来说一个program就是编译的入口（pre-processor）,根据的参数ts compiler会生成一系列目标文件编译所依赖的库，生成一系列SourceFiles
-
program.getSourceFiles()
- 获取编译后的SourceFile对象，这里需要filter一下我们需要的目标文件，因为默认ts compiler会添加一系列目标文件所依赖的一些文件，例如一个es dom lib库等， 我们需要的只是目标文件。
-
transform
- 类似于babel分析里面的 traverse，本质就是便利ast，分析每个node， 然后做一个我们需要的操作
- generateGenericPropAndState 做的就是生成IProps 和 IState
- removeImportPropTypes 删除掉 import PropTypes
- removeStaticPropTypes 删除掉 static PropTypes
-
createPrinter
- Printer 就是最后的generator, 生成最终我们的代码
- 最后可以利用 prettier， tslint等格式化工具生成你项目中需要的代码
removeImportPropTypes
import { isImportDeclaration, isStringLiteral, SourceFile, updateSourceFileNode } from 'typescript'
export const removeImportPropTypes = (typeChecker: TypeChecker) => (
context: TransformationContext
) => (sourceFile: SourceFile) => {
const statements = sourceFile.statements.filter(
s =>
!(
isImportDeclaration(s) &&
isStringLiteral(s.moduleSpecifier) &&
s.moduleSpecifier.text === 'prop-types'
)
)
return updateSourceFileNode(sourceFile, statements)
}
复制代码-
这里更多的会将思考过程，代码细节大家可以自己去试试就知道了
-
一个transform的高阶方程
- 第一个参数 typeChecker，使我们在transform中自己传递的
- 第二个参数 context， 使整个编译过程中保存的上下文信息
- 第三个参数 sourceFile，就是我们需要编译的源文件了
-
sourceFile的结构， 这里就用到我之前说的ast viewwe
-
中间的SourceFile即是sourceFile的结构了，选择代码也可以看到代码对应的ast结构
-
这里我们需要把 import PropTypes from 'prop-types' 删除掉，明细这里对应的是一个叫做 ImportDeclaration 的结构
- 我们看看图中最右侧Node节点
- 我们需要的是一个叫做 prop-types的import 声明，很明显在右侧它在 moduleSpecifier -> text 里面
- 到这里我们就得到我们需要的了 找到一个sourceFile里面 ImportDeclaration的moduleSpecifier的text是'prop-types'的节点，去除掉即可。
-
sourceFile.statements 代表的是每一个代码块
-
filter就按照我以上说的逻辑 去除掉 prop-types
-
最后返回 updateSourceFileNode， 生成了一个更新后我们需要新的sourceFile返回
-
之后的transform功能类似于此的思考过程，由于ts结构vscode有很好的代码提示，以及类型注释，一些ts compiler的api大家根据对应Node的定义应该可以很快的适应
removeStaticPropTypes
export const removeStaticPropTypes = (typeChecker: TypeChecker) => (
context: TransformationContext
) => (sourceFile: SourceFile) => {
const visitor = (node: Node) => {
if (isClassDeclaration(node) && isReactClassComponent(node, typeChecker)) {
return updateClassDeclaration(
node,
node.decorators,
node.modifiers,
node.name,
node.typeParameters,
createNodeArray(node.heritageClauses),
node.members.filter(m => {
if (
isPropertyDeclaration(m) &&
isStaticMember(m) &&
isPropTypesMember(m)
) {
// static and propTypes
return false
}
if (
isGetAccessorDeclaration(m) &&
isStaticMember(m) &&
isPropTypesMember(m)
) {
// static and propTypes
return false
}
return true
})
)
}
return node
}
return visitEachChild(sourceFile, visitor, context)
}
复制代码- visitEachChild 遍历ast tree，在每一个node给一个回调
- 我们需要去除掉 static propTypes, 前提如图， 首先是一个ClassDeclaration，其次是一个 React Component, 最后class里面有一个 PropertyDeclaration， static修饰，名字是propTypes
- ClassDeclaration很好判断， isClassDeclaration
- react Component, 这里我们需要分析 ClassDeclaration 的 HeritageClause，也就是继承条件。如图展示，我们需要获得 HeritageClause.types[0].expression.getText(), 这里可以利用正则去判断一下，/React.Component|Component|PureComponent|React.PureComponent/, 基本情况下这是react class component
- isPropertyDeclaration可以判断是否是 PropertyDeclaration，如图，PropertyDeclaration.modifiers[0] === StaticKeyword, 这里判断其修饰是否是一个 static， PropertyDeclaration.name === 'propTypes' 去判断。
generateGenericPropAndState
- 思考过程还是如上面所述，大家可以先自己尝试一下。 源码
- 关于生成的新的代码的ast结构， 大家可以在 ast viewer输入需要的代码，在观察一下生成的ast结构，从而去构建例如 interface 等类型结构。
总结
还可以做什么
- 例如将 redux connect转换为hoc，利用 returnType 获取redux的一些类型
- 可以根据 class 里面 this.props 去分析， 添加一个没有定义的属性添加到 IProps 中间
- 给一些声明周期添加一些IProps, IState， params的参数
- 可以将一些 简单function, 利用checker生成一些类型，并在复杂类型添加TODO，给后期方便添加。
- 可以根据一些project的目录，批量去处理js， jsx去转换成需要的ts文件
- 做一个回退操作， 如果不理想， 用户可以回退为原来的js文件
- 。。。