Add Type Safety and Prevent Runtime Errors With AST

In the previous lesson, the initial script for logging the numeric values worked for one specific code snippet (2 + (4 * 10)). Updating that to another code snippet ((2 + 4) * 10) resulted in a runtime error, because the underlying AST changed.

Ideally, this issue could have been caught before the script was even run.

Adding type-safety#

Fortunately, many of these issues can be caught in your editor, or at compile-time, with TypeScript. The type definitions define all of the nodes and each node's specific properties. This means only valid properties can be accessed. Additionally, since many properties can be polymorphic, or point to many other nodes, it requires "narrowing" the type to only the node(s) with that property defined. This results in many more checks and an overall more robust script leading to fewer runtime errors.

You can think of the AST that the type definitions represent as the most "generic" AST, since it represents every possible node and property.

To start, rename the previous parser.js file to parser.ts and convert the require to an import.

xxxxxxxxxx

import { parse } from "@babel/parser";

​

const code = "2 + (4 * 10)";

​

const ast = parse(code);

​

console.log(ast.program.body[0].expression.left.value); // 2

console.log(ast.program.body[0].expression.right.left.value); // 4

console.log(ast.program.body[0].expression.right.right.value); // 10

Now we have a parser written in TypeScript, but need a way to execute it.

There are a few options, including running babel on parser.ts and transpiling it to JavaScript. 😅

A simpler approach is to execute the script with ts-node. This package can be used in the same way as node, but with TypeScript support.

xxxxxxxxxx

# Install the ts-node and typescript packages as development dependencies

npm i -D ts-node typescript

All set! ✨ The script can now be run with ts-node.

xxxxxxxxxx

npx ts-node ./parser.ts

Running the script should produce the following output.

xxxxxxxxxx

TSError: ⨯ Unable to compile TypeScript:

parser.ts:7:33 - error TS2339: Property 'expression' does not exist on type 'Statement'.

  Property 'expression' does not exist on type 'BlockStatement'.

​

7 console.log(ast.program.body[0].expression.left.value); // 2

                                  ~~~~~~~~~~

parser.ts:8:33 - error TS2339: Property 'expression' does not exist on type 'Statement'.

  Property 'expression' does not exist on type 'BlockStatement'.

​

8 console.log(ast.program.body[0].expression.right.left.value); // 4

                                  ~~~~~~~~~~

parser.ts:9:33 - error TS2339: Property 'expression' does not exist on type 'Statement'.

  Property 'expression' does not exist on type 'BlockStatement'.

​

9 console.log(ast.program.body[0].expression.right.right.value); // 10

                                  ~~~~~~~~~~

The script isn't executed because there are type errors. The @babel/parser package includes its own TypeScript type definitions, which is why nothing new was installed, but we're now seeing type errors. If you open this file in an editor with TypeScript support (such as VSCode) these type errors will also show up in the editor.

Fixing the type errors#

The type errors are all along the same lines with the message:

xxxxxxxxxx

Property 'expression' does not exist on type 'Statement'

What is type Statement?