Course overview

Introduction

What is an Abstract Syntax Tree? Visualizing Code Like a Compiler

How to View Abstract Syntax Tree Code With AST Explorer

The Best JavaScript AST Tools - ESLint, Babel, Terser, and More

Environment setup

Understanding Abstract Syntax Trees (AST)

How to Generate a JavaScript AST With Babel Plugins

Traversing an AST With Babel Traverse

Add Type Safety and Prevent Runtime Errors With AST

Working with Abstract Syntax Trees

Practical code audits

How to Audit Your Code With AST Programming

How to Add a Component and Update an AST

When to Use Abstract Syntax Tree Tooling to Refactor at Scale

Code Audits

How to Mutate an AST and Automatically Replace Code Components

How to Create Codemods Using jscodeshift

Codemods

How to Ensure Codebase is Up to Date With Linting Rules

How to Use ESLint to Create AST Rules With Babel Traverse

Linting

node.js

In this course, we'll start with the fundamentals of abstract syntax trees (ASTs) and learn the basic mental models. This general AST knowledge can be translated to almost any tool that works with ASTs.

## Why this course?

Understanding and using ASTs unlocks the ability to make sweeping changes in a safe and reliable way in any size codebase.

## Course topics

Throughout this course, we'll have converted source code into ASTs, traversed, mutated, and generated ASTs. With these concepts we'll then explore several practical applications including things like code audits (static analysis), code transformations (codemods), and linting.

### Module 1

We'll learn the fundamentals of abstract syntax trees. 

- What is an AST?
- How to explore an AST
- Examples of JavaScript tools that work with ASTs

### Module 2

We'll learn how to work with ASTs.

- How to turn code into an AST
- How to programmatically navigate any AST 
- How to leverage TypeScript to prevent runtime errors

### Module 3

We'll learn how to statically analyze, or "audit" code to understand the state of the codebase using abstract syntax trees.

- An introduction to an example codebase and refactor
- Understanding the state of the current codebase
- When to use an AST-based tool versus doing something manually

### Module 4

We'll learn how to transform, or "codemod" code from one state to another using abstract syntax trees.

- How to make changes to an AST
- How to change ASTs with [jscodeshift](https://github.com/facebook/jscodeshift)
- How to test a code transform

### Module 5

We'll learn how to write rules, or "lint" code using abstract syntax trees.

- How to create rules for code
- How to create custom rules with [ESLint](https://eslint.org)
- How to test a rule

In this course, you'll learn the fundamentals of abstract syntax trees, what they are, how they work, and dive into several practical use cases of abstract syntax trees to maintain a JavaScript codebase.

Practical Abstract Syntax Trees

JavaScript tools that work with abstract syntax trees

How to parse, traverse, and generate abstract syntax trees

Practical skill set for maintaining large JavaScript codebases

In the previous lesson, the initial script for logging the numeric values worked for one specific code snippet (

). Updating that to another code snippet (

) resulted in a runtime error, because the underlying AST changed.

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

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 

 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.

, but it helps avoid runtime errors and provides code completion, which makes it easier to work with complex nodes.

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 

A simpler approach is to execute the script with 

. This package can be used in the same way as 

# 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 

 binary. This will be used throughout the rest of the course.

Running the script should produce the following output.

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 

 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 

) these type errors will also show up in the editor.

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

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

---
title: Add Type Safety and Prevent Runtime Errors With AST
description: See how types can surface runtime errors
privateVideoUrl: "https://fullstack.wistia.com/medias/42xrtz4dav"
---

# Preventing runtime errors

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"](https://www.typescriptlang.org/docs/handbook/2/narrowing.html) 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.

:::tip

**TypeScript is not a requirement**, but it helps avoid runtime errors and provides code completion, which makes it easier to work with complex nodes.

:::

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

```typescript { actualFilename=./protected/babel-parser-demo/parser-with-type-errors.ts endChar=293 endLine=10 startChar=0 startLine=1 statedFilename=parser.ts url=https&#x3A;//gitlab.com/fullstackio/books/practical-ast-and-codemods/module_02/lesson_02.03/protected/babel-parser-demo/parser-with-type-errors.ts }
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`](https://www.npmjs.com/package/ts-node). This package can be used in the same way as `node`, but with TypeScript support.

```bash
# 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`.

```bash
npx ts-node ./parser.ts
```

:::note

Note that [`npx`](https://www.npmjs.com/package/npx) (not `npm`) was used to execute the `ts-node` binary. This will be used throughout the rest of the course.

:::

Running the script should produce the following output.

```typescript
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](https://code.visualstudio.com/)) 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:

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

What is type `Statement`?

We can answer this by inspecting the type definitions for `@babel/parser`. The type definitions for the `parse` function are defined in the current project's node modules at `./node_modules/@babel/parser/typings/babel-parser.d.ts`. These types then reference `@babel/types` type definitions in `./node_modules/@babel/types/lib/index.d.ts` where all the node types are defined _(this package will be covered more in-depth in a later module)_. In VSCode, these can also be accessed by holding command and clicking on the `parser` function or other properties.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Practical Abstract Syntax Trees

Module 1: Introduction

Introduction:

Start Here

Introduction: (2:27)

Course overview

Module 2: Understanding Abstract Syntax Trees (AST)

Lesson 1: (5:55)

What is an Abstract Syntax Tree? Visualizing Code Like a Compiler

Lesson 2: (4:21)

How to View Abstract Syntax Tree Code With AST Explorer

Lesson 3: (1:46)

The Best JavaScript AST Tools - ESLint, Babel, Terser, and More

Lesson 4: (1:03)

Environment setup

Module 3: Working with Abstract Syntax Trees

Lesson 1: (6:29)

How to Generate a JavaScript AST With Babel Plugins

Lesson 2: (7:33)

Traversing an AST With Babel Traverse

Lesson 3: (9:31)

Add Type Safety and Prevent Runtime Errors With AST

Module 4: Code Audits

Lesson 1: (2:35)

Practical code audits

Lesson 2: (15:29)

How to Audit Your Code With AST Programming

Lesson 3: (2:32)

How to Add a Component and Update an AST

Lesson 4: (1:43)

When to Use Abstract Syntax Tree Tooling to Refactor at Scale

Module 5: Codemods

Lesson 1: (21:13)

How to Mutate an AST and Automatically Replace Code Components

Lesson 2: (10:03)

How to Create Codemods Using jscodeshift

Module 6: Linting

Lesson 1: (8:44)

How to Ensure Codebase is Up to Date With Linting Rules

Lesson 2: (5:31)

How to Use ESLint to Create AST Rules With Babel Traverse

Add Type Safety and Prevent Runtime Errors With AST