TypeScript Compiler API

Parsing d.ts files using typescript compiler-Week 1 GSoC’21

Hey Welcome to week 1 of my coding in Google Summer of code, lets discuss some important concepts of typescript compiler and will also discuss what I did in my first week

About Typescript Compiler API

Before getting started with how parsing is done let us understand what typescript compiler is

When writing an application using TypeScript, you typically use the “typescript” module as a build tool to transpile your TypeScript code into JavaScript. This is usually all you need. However, if you import the “typescript” module in your application code, you get access to the compiler API. This compiler API provides some very powerful tools for interacting with TypeScript code

Basically you all know typescript is widely used with JavaScript to introduce Type checking, which helps in writing stable checked code. Many projects which add typescript to JavaScript projects usually do it with the help of type definition files(d.ts file), in which they write the blueprint of the whole code with there types and then they used the same in the JavaScript code to have type-checking enabled. Typescript is basically a Node module which you can install using npm in your projects.

Now we not only can make typescript compiler to execute our typescript files but we can also import it as a module in our projects which has some powerful tools to help us extract, run, modify the source files and programs inside our code. I will be using the same in my code!

The Abstract Syntax tree

SourceFile contains a representation of the source code itself, from which you can extract the abstract syntax tree (AST) for the code

Basically AST represents your code in syntactical structure as a tree. In general, ASTs are used by compilers or interpreters as an initial step in the processing of the source code

The below code

function hello() {
  console.log('world');
}

Looks like this in AST

-> SourceFile
  -> FunctionDeclaration
      - Identifier
  -> Block
    -> ExpressionStatement
      -> CallExpression
        -> PropertyAccessExpression
            - Identifier
            - Identifier
          - StringLiteral
  - EndOfFileToken

Another Example of keys class in Digital Ocean

In above picture you can find many keys written like statements, Class Declaration etc, Each of these describe a Node. ASTs can be made from one to many - and together they describe the syntax of a program that can be used for static analysis.

Every node has a kind property which describes what kind of node it is, as well as pos and end which describe where in the source they are.

Now Lets play with above AST to do some magical stuff!!!!

How to get AST and Child’s of AST using TypeScript Compiler API

In order to get AST of a code/source file you need to use the ts.createSourceFile function passing the code as string, the filename and the JavaScript target version.Here is an Example👇

import * as ts from "typescript";
const filename = "mycode.ts";
const code = `const name: string= "Mohit";`;
const ast= ts.createSourceFile(filename, code, ts.ScriptTarget.Latest);

And then if you want to visit EachChild of the ast you can use ast.forEachChild function to visit them

await ast.forEachChild(child => {
     if (SyntaxKind[child.kind] === "ClassDeclaration") {
      //Do anything with found child
     }
})

My weekly Update

In week 1 I started analysing SDK’s and finalising Do-Wrapper SDK of digital ocean for code generation module. It contains proper definition files which is needed.

I then started analysing the Definition files of Do-Wrapper(Digital ocean SDK). I installed the Do-wrapper SDK in the code Generation module to setup it for Digital Ocean. I then made a parser which converts the source file in AST and then in AST , Visiting nodes to find a class Kind of node, cloning it in a object and then returning it from the function.

let cloned = null;
await ast.forEachChild(child => {
     if (SyntaxKind[child.kind] === "ClassDeclaration") {
             cloned = Object.assign({}, child);
     }
});

if (!cloned) {
  reject(new Error("Class not found!"));
} else {
  resolve(cloned);
}

Week 1 Completed with this and It was fun talking to mentors and having discussions on my work in the weekly meeting. Now in the next Week I would be working on extracting the data from this cloned class node, like functions, parameters,etc. Will see you there…😋

Till then Good Bye✌️ and Have Fun!😋

Follow me here…. Linkedin, Github, Twitter