How can we get the Syntax Tree of TypeScript?

Question

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

There's not much help for you, except perhaps from someone that has already dug through this code. What you are learning is that in a big piece of software, it is hard to find your way around. You need to spend time digging throught the source. An obvious trick is to search the source code for the words "parse", "tree" and "node"; code for defining/building the AST is surely near where one of those is found unless the codebase is truly awful. A standard tools loved by many programmers for this purpose is "grep". If you don't know what that is, find out at wikipedia. — Ira Baxter
– Ira Baxter, Commented Sep 11, 2013 at 7:12
The answers on this later question may be of use... TypeScript: get syntax tree — Fenton
– Fenton, Commented Nov 25, 2013 at 21:21
The problem with getting ASTs from most compilers is hard; worse, the ASTs they have tends to be idiosyncratic. Another alternative you might consider is finding a parser generator or even better a program transformation, and use (develop) a grammar for TypeScript; such tools often make it relatively to build an AST that is usuable for other-than-compiling purposes. — Ira Baxter
– Ira Baxter, Commented Jan 15, 2014 at 17:31

ColinE · Accepted Answer · 2016-06-28 20:57:33Z

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

Community · Accepted Answer · 2017-05-23 12:17:49Z

1

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.

edited May 23, 2017 at 12:17

CommunityBot

11 silver badge

answered Feb 5, 2014 at 3:18

rfernandes

1,1619 silver badges10 bronze badges

Collectives™ on Stack Overflow

How can we get the Syntax Tree of TypeScript?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related