Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can we get the Syntax Tree of TypeScript?

Tags:

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

like image 845
Daj Avatar asked Sep 10 '13 08:09

Daj


People also ask

What is the syntax of TypeScript?

TypeScript is JavaScript with syntax for types. TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

What is a syntax tree give an example of a syntax tree?

The syntax tree is shortened form of the Parse Tree. Example1 − Draw Syntax Tree for the string a + b ∗ c − d. Each node in a syntax tree can be executed as data with multiple fields. In the node for an operator, one field recognizes the operator and the remaining field includes a pointer to the nodes for the operands.

What is TypeScript AST?

The AST is a data structure to represent the structure of your source file in a format readable by machines. Indeed, if I throw the above example in the TypeScript AST Viewer I get immediate access to the AST.

What is tree syntax?

A syntax tree is a tree in which each leaf node represents an operand, while each inside node represents an operator. The Parse Tree is abbreviated as the syntax tree. The syntax tree is usually used when representing a program in a tree structure.


1 Answers

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"     }, ... 
like image 102
ColinE Avatar answered Nov 03 '22 15:11

ColinE