Using the TypeScript AST

Updated: 23 July 2024

Generating Typescript using AST’s

Some parsers other that the Typescript one is Esprima, Acorn, these are Javascript Parsers> Other languages also have parsers as well as tools called Parser Generators that enable you to generate a parser for a given language or usecase

Before getting started, you should first install the typescript package into your project with:

1
yarn add typescript

Using the typescript compiler you are able to parse TS into an AST as well as build code using the TS AST

You can also generate the ts. code using the Typescript to AST Converter

Generate Types

1
export type User = {
2
  name: string
3
  age: number
4
}

To generate a type like above using the TS compiler you can use the following:

1
import ts, { factory } from 'typescript'
2
import { writeFileSync } from 'fs'
3

4
// create name property
5
const nameProp = factory.createPropertySignature(
6
  undefined,
7
  factory.createIdentifier('name'),
8
  undefined,
9
  factory.createKeywordTypeNode(ts.SyntaxKind.StringKeyword)
10
)
11

12
// create age property
13
const ageProp = factory.createPropertySignature(
14
  undefined,
15
  factory.createIdentifier('age'),
16
  undefined,
17
  factory.createKeywordTypeNode(ts.SyntaxKind.NumberKeyword)
18
)
19

20
// create User type
21
const userType = factory.createTypeAliasDeclaration(
22
  undefined,
23
  [factory.createModifier(ts.SyntaxKind.ExportKeyword)],
24
  factory.createIdentifier('User'),
25
  undefined,
26
  factory.createTypeLiteralNode([nameProp, ageProp])
27
)

We can then use the generated type to build a more complex type:

1
export type Admin = {
2
  user: User
3
}

1
const userProp = factory.createPropertySignature(
2
  undefined,
3
  factory.createIdentifier('user'),
4
  undefined,
5
  factory.createTypeReferenceNode(factory.createIdentifier('User'), undefined)
6
)
7

8
const adminType = factory.createTypeAliasDeclaration(
9
  undefined,
10
  [factory.createModifier(ts.SyntaxKind.ExportKeyword)],
11
  factory.createIdentifier('Admin'),
12
  undefined,
13
  factory.createTypeLiteralNode([userProp])
14
)

Next, we’ll creata a NodeArray our of the two type declarations we want in our file like so:

1
const nodes = factory.createNodeArray([userType, adminType])

Printing to Code

We can then print the two types out as Typescript code with the following:

1
const sourceFile = ts.createSourceFile(
2
  'placeholder.ts',
3
  '',
4
  ts.ScriptTarget.ESNext,
5
  true,
6
  ts.ScriptKind.TS
7
)

The above sourcefile is a way for us to store some basic settings for the file we’re going to be saving our file content into, we’ve got the name placeholder.ts in the above case but this doesn’t really output the file we’re going to be outputing

Next, we can create a Printer instance and use it to generate our output file:

1
const printer = ts.createPrinter()
2

3
const outputFile = printer.printList(ts.ListFormat.MultiLine, nodes, sourceFile)

Lastly, we can print the outputFile using fs:

1
import { writeFileSync } from 'fs'
2

3
//... other code from above
4

5
writeFileSync('./output.ts', outputFile)

Which will output the following:

1
export type User = {
2
  name: string
3
  age: number
4
}
5
export type Admin = {
6
  user: User
7
}

References

In addition to using the AST Direcly, some libraries that are also handy for working with the Typescript AST are: