写一个基于 typescript compiler 的转换工具

背景：当你接手一些老的前端项目的时候，有时候这个项目同时又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文件
• 。。。

ts compile 能够根据你们的须要作一些你们预期的操做，相似于babel的parser, traverse, generator等。这里只是大概的思路提供给你们，毕竟如今不少小程序框架也是相似的方式。happy coding!