How can we get the Syntax Tree of TypeScript?

问题:

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. :)

回答1:

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);

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"
    },
...

回答2:

Do you need to get the AST from a specific compiler or just get the syntax tree from a program in TypeScript? If you are interested in the later, then what you may need to do is grab a BNF grammar for TypeScript (starting point here) and then use ANTLR for example. It has a tool named ANTLRWorks that allows you to visualise the syntax tree of a program.