TypeScript：获取语法树

Question

我已经阅读了“整个互联网”，但找不到任何关于从 TypeScrypt 源获取语法树（就像在 Esprima 中一样）的示例。 我的意思是我怎样才能得到这样的对象（Esprima Parser 示例）

{
    "type": "Program",
    "body": [
        {
            "type": "VariableDeclaration",
            "declarations": [
                {
                    "type": "VariableDeclarator",
                    "id": {
                        "type": "Identifier",
                        "name": "answer"
                    },
                    "init": {
                        "type": "BinaryExpression",
                        "operator": "*",
                        "left": {
                            "type": "Literal",
                            "value": 6,
                            "raw": "6"
                        },
                        "right": {
                            "type": "Literal",
                            "value": 7,
                            "raw": "7"
                        }
                    }
                }
            ],
            "kind": "var"
        }
    ]
}

来自 javascript 代码

var answer = 6 * 7;

仅适用于 TypeScript 源文本？

附：非常希望对你有所帮助，因为我不想写你自己的糟糕自行车）

P.P.S.我认为 lib 文件 typescript.ts(.js) 和 typescriptServices.ts(.js) 可以帮助我，但我不知道如何:(

已解决

非常感谢用户 Steve Fenton。 这是我的代码，如果有人感兴趣的话：

// uses
var typeScriptLS =  new Harness.TypeScriptLS();
var ServicesFactory = new Services.TypeScriptServicesFactory();
var serviceShim = ServicesFactory.createLanguageServiceShim(typeScriptLS);

// add lib.d.ts
var _libText = window.document.getElementById('lib.d.ts').innerText;
typeScriptLS.addScript('lib.d.ts', _libText.replace(/\r\n?/g,"\n"), true);

// add greeter.ts
var _sourceText = window.document.getElementById('greeter.ts').innerText;
typeScriptLS.addScript('greeter.ts', _sourceText.replace(/\r\n?/g,"\n"), true);

// script name
var _scriptName = 'greeter.ts';
// get syntax tree
var _st = serviceShim.languageService.getSyntaxTree(_scriptName);
//console.log(_st);
console.log(JSON.stringify(_st, "", 2));

Answer 1

TypeScript 解析器不会直接生成这样的树，但您仍然可以使用它的对象模型来做各种事情。例如，我们在一些工具中使用它来进行语法转换以用于测试目的。这是一个可以用来打印语法树的 sn-p：

import ts from "typescript";
 
const code = "enum { x = 1 }";
const sc = ts.createSourceFile("x.ts", code, ts.ScriptTarget.Latest, true);

let indent = 0;
function print(node: ts.Node) {
    console.log(new Array(indent + 1).join(" ") + ts.SyntaxKind[node.kind]);
    indent++;
    ts.forEachChild(node, print);
    indent--;
}
 
print(sc);

Answer 2

这个问题是在back in September之前提出的。

目前没有可以为您执行此操作的方法 - 没有可以调用的神奇 getSyntaxTree 方法可以执行此操作。

TypeScript 编译器是开源的 - 并且完全用 TypeScript 编写，因此您可以扫描它以了解是否有可以使用/添加句柄的东西。

这样做的好处是你有很大的机会将你的工作作为一个开源项目发布，从这两个问题的投票来看，这是有一些需求的。

或者，使用Esprima 或SpiderMonkey 从已编译的JavaScript（将在运行时实际执行的代码）中获取语法树。

Answer 3

可以使用 recast 和 babylon@next。尽管您必须相信这些技术定义的用于表示 TypeScript 代码 AST 的语法，并且它们将保持最新——因为 TypeScript 具有逐个发布（短期）发布的新语言功能——但与其他语言不同（JavaScript ) 你有明确定义的版本并以标准发布 - 所以如果你的用户开始使用新的语言功能，这些技术（我猜巴比伦）应该保持最新，否则解析将失败

// npm install recast babylon@next
const source = `
interface I {
  color: string
}
class C implements I{
  color: string='blue'
}
`
const recast = require('recast')
const tsParser = require("recast/parsers/typescript")
const ast = recast.parse(source, {
  parser: tsParser
});
console.log(`
CODE: 

${source}

AST: 

${JSON.stringify(ast)}
`);

Answer 4

我发现recast 工作得很好。示例：

var recast = require('recast');
var ast = recast.parse(`var answer = 6 * 7;`);
console.log(ast);

这将输出所有需要的信息和事件TypeAnnotation，所以这个库真的很棒:)

[
   {
      "type": "VariableDeclaration",
      "declarations": [
         {
            "type": "VariableDeclarator",
            "id": {
               "type": "Identifier",
               "name": "answer",
               "typeAnnotation": {
                  "type": "TypeAnnotation",
                  "typeAnnotation": {
                     "type": "NumberTypeAnnotation",
                     "loc": {
                        "start": {
                           "line": 1,
                           "column": 12
                        },
                        "end": {
                           "line": 1,
                           "column": 18
                        },
                        "lines": {},
                        "indent": 0
                     }
                  },
                  "loc": {
                     "start": {
                        "line": 1,
                        "column": 10
                     },
                     "end": {
                        "line": 1,
                        "column": 18
                     },
                     "lines": {},
                     "indent": 0
                  }
               },
               "loc": {
                  "start": {
                     "line": 1,
                     "column": 4
                  },
                  "end": {
                     "line": 1,
                     "column": 18
                  },
                  "lines": {},
                  "indent": 0
               }
            },
            "init": {
               "type": "BinaryExpression",
               "operator": "*",
               "left": {
                  "type": "Literal",
                  "value": 6,
                  "raw": "6",
                  "loc": {
                     "start": {
                        "line": 1,
                        "column": 21
                     },
                     "end": {
                        "line": 1,
                        "column": 22
                     },
                     "lines": {},
                     "indent": 0
                  }
               },
               "right": {
                  "type": "Literal",
                  "value": 7,
                  "raw": "7",
                  "loc": {
                     "start": {
                        "line": 1,
                        "column": 25
                     },
                     "end": {
                        "line": 1,
                        "column": 26
                     },
                     "lines": {},
                     "indent": 0
                  }
               },
               "loc": {
                  "start": {
                     "line": 1,
                     "column": 21
                  },
                  "end": {
                     "line": 1,
                     "column": 26
                  },
                  "lines": {},
                  "indent": 0
               }
            },
            "loc": {
               "start": {
                  "line": 1,
                  "column": 4
               },
               "end": {
                  "line": 1,
                  "column": 26
               },
               "lines": {},
               "indent": 0
            }
         }
      ],
      "kind": "var",
      "loc": {
         "start": {
            "line": 1,
            "column": 0
         },
         "end": {
            "line": 1,
            "column": 27
         },
         "lines": {},
         "indent": 0
      }
   }
]