我们如何获得TypeScript的语法树？ [英] How can we get the Syntax Tree of TypeScript?

问题描述

是否有获取编译器语法树的过程。我们被分配到一个需要访问打字稿的语法树（这是开源的，因此我们可以看到整个编译器的代码）的项目。但是我们不知道如何获得它。我一直在阅读Internet上的一些文章，但实际上找不到适合用户使用的文章或以雷曼兄弟的说法撰写的文章。我相信有人提到我们要做的第一步是找到解析步骤。但是之后我们不知道下一步该怎么做。

Is there a process on getting a syntax tree of a compiler. We had been assigned on a project that needs to access typescript's syntax tree (which is opensource so we could see the whole compiler's code). But we don't know how to get it. I've been reading some articles in the Internet but I can't really find a user-friendly article or which is written in lehman's term. I believe some mentioned that the first step we need to do is to find the parsing step. But after that we had no idea what to do next.

对不起，这个问题很抱歉。 ：）

Sorry for the noob question. :)

推荐答案

TypeScript编译器API确实非常易于使用。要解析打字稿文件并获取AST，请尝试以下操作：

The TypeScript compiler API is really quite easy to use. To parse a typescript file and obtain the AST, try the following:

const ts = require('typescript');
const sourceFile = ts.createSourceFile(filename,
    fs.readFileSync(filename).toString(), ts.ScriptTarget.ES6, false);
console.log(sourceFile.ast);

这将生成AST，例如：

This generates the AST, for example:

{
  "kind": 251,
  "pos": 0,
  "end": 1097,
  "flags": 0,
  "bindDiagnostics": [],
  "languageVersion": 2,
  "fileName": "slidingWindow.ts",
  "languageVariant": 0,
  "scriptKind": 3,
  "referencedFiles": [],
  "amdDependencies": [],
  "statements": [
    {
      "kind": 218,
      "pos": 0,
      "end": 69,
      "flags": 0,
      "name": {
        "kind": 69,
        "pos": 10,
        "end": 22,
        "flags": 0,
        "text": "Accumulator",
        "kindDecoded": "Identifier"
      },
      "members": [
        {
          "kind": 148,
          "pos": 24,
          "end": 67,
          "flags": 0,
          "parameters": [
            {
              "kind": 139,
              "pos": 28,
              "end": 42,
              "flags": 0,
              "name": {
                "kind": 69,
                "pos": 28,
                "end": 32,
                "flags": 0,
                "text": "data",
                "kindDecoded": "Identifier"
              },
              "type": {
                "kind": 157,
                "pos": 33,
                "end": 42,
                "flags": 0,
                "elementType": {
                  "kind": 128,
                  "pos": 33,
                  "end": 40,
                  "flags": 0,
                  "kindDecoded": "NumberKeyword"
                },
                "kindDecoded": "ArrayType"
              },
              "kindDecoded": "Parameter"
            },
            {
              "kind": 139,
              "pos": 43,
              "end": 57,
              "flags": 0,
              "name": {
                "kind": 69,
                "pos": 43,
                "end": 49,
                "flags": 0,
                "text": "index",
                "kindDecoded": "Identifier"
              },
              "type": {
                "kind": 128,
                "pos": 50,
                "end": 57,
                "flags": 0,
                "kindDecoded": "NumberKeyword"
              },
              "kindDecoded": "Parameter"
            }
          ],
          "type": {
            "kind": 128,
            "pos": 59,
            "end": 66,
            "flags": 0,
            "kindDecoded": "NumberKeyword"
          },
          "kindDecoded": "CallSignature"
        }
      ],
      "kindDecoded": "InterfaceDeclaration"
    },
...

这篇关于我们如何获得TypeScript的语法树？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！