TypeScript Transform查找命名函数并在外部插入代码

时间:2018-12-12 16:17:56

标签: typescript

我希望编写一个简单的TypeScript转换,它采用了这种方式:

const MyVariableName = targetFunctionName(...)

并将其转换为

const MyVariableName = targetFunctionName(...) MyVariableName.displayName = 'MyVariableName'

在使用AST时,“ Babel插件手册”非常有用之前,我已经写了一个基本的babel插件。但是我很难找到与TypeScript转换类似的东西,这使得很难掌握转换的结构。

下面的列表是我知道我需要做的3个步骤:

  1. 寻找targetFunction
  2. 获取node.parent.name
  3. 以下面的格式${node.parent.name}.displayName = '${node.parent.name}'插入下面的代码(这是我遇到的问题)

我正在寻找良好的资源,希望类似于Babel的手册。或有关如何执行步骤3的一些指导。因为我很确定自己已经确定了步骤1和2。

1 个答案:

答案 0 :(得分:0)

这是一个老问题,但我想我会提供一些见识。

在基本级别上称为“块”(或行为类似于“块”的SourceFile),您可以使用ts.createBlock重新创建,以提供语句列表。如果我检测到一个块,则以递归方式使用ts.visitNodeChildren来查看targetFunctionName是否在该块内(如果其中一个子块是另一个块,则返回步骤1,以避免在错误的范围内添加代码)。

然后,一旦知道函数在您所在的块中,就可以使用原始语句和添加的语句重新创建该块。

Typescript有很多方便而直接的ts.create函数(确保您包括编译器以实现自动补全),可用于您需要做的所有事情,找出需要做的事情以及要处理的节点创建我使用https://astexplorer.net/(选择javascript作为语言,选择typescript作为编译器)并输入所需的结果语句。

我相信添加到sourceFile的过程与添加到块的过程类似,但是更加复杂。我只是通过表达兴趣并把它放在一个新的块中来解决这个问题,所以:

const MyVariableName = targetFunctionName(...)

成为:

{
    const MyVariableName = targetFunctionName(...)
    MyVariableName.displayName = 'MyVariableName'
}

绕开了重新创建块或源文件的整个问题。但是,它更加混乱,并且会导致let关键字无法正常运行(对于我的用例,它还有其他好处,所以这就是我决定采用这种方式的原因。)