In today’s fast-paced world of application development, projects often span multiple developers and depend on dozens of libraries. As you build with JavaScript on the Fastly Compute platform, you may find yourself reaching for TypeScript and the robustness it brings to your development process—and you're certainly not alone. In fact, TypeScript support is a common question we hear from developers. Thankfully, TypeScript is straightforward to work with in Fastly Compute.

Why TypeScript?

For those who are new to TypeScript, it’s a superset of JavaScript that adds static typing. It helps catch errors early and improves code maintainability, making it a popular choice for large-scale applications. TypeScript is very popular among developers, perhaps due to the enhanced developer experience that comes with it, in the form of code completion and type inspection in your favorite IDE.

In fact, Fastly’s JavaScript SDK comes with a complete set of TypeScript typings, making it a blast to work with in environments such as VS Code and IntelliJ IDEA, even when writing using plain JavaScript:

Code completion in JavaScript in IntelliJ IDEA, thanks to TypeScript typings exported by @fastly/js-compute 

Using TypeScript to write your application helps make your code more bulletproof, by allowing you to define and extend types in your application, and making sure that the values, variables, and functions match their usages. This allows you to catch many errors earlier—during build time and even before, thanks to syntax highlighting—rather than waiting for them to creep up at runtime.

TypeScript is designed to be easy to add. In fact, the TypeScript language is positioned as a superset of JavaScript, so if you’re already familiar with JavaScript, then using it is just about learning a few rules and keywords. Check out the TypeScript Handbook to get started with the language.

Getting Started with TypeScript on Fastly Compute

When it comes time to run your code, source code written in TypeScript is first translated into equivalent JavaScript, then run in a JavaScript environment. In other words, TypeScript works as a compiler step in a JavaScript project, which means it’s simple to set up for Fastly Compute as well.

If you’re beginning a new project from scratch, Fastly provides an official TypeScript starter kit to make it easy to jump in. The simplest way to get started is by using the npm init @fastly/compute command in a new directory:

mkdir new-project && cd new-project
npm init @fastly/compute@latest

I covered npm init @fastly/compute in more detail in a previous blog post, so be sure to check that out if you're new to Fastly Compute JavaScript development.

This command walks you through setting up a new Compute project, and when prompted, you can choose TypeScript as your language. This will generate a project using our TypeScript starter kit, which includes everything you need to get up and running quickly, complete with all the build steps pre-configured and an index.ts file that contains the request handler.

With TypeScript, the IDE knows the types of variables and parameters most of the time

TypeScript traps entire classes of errors at build time, making development more efficient and your code more reliable

Adding TypeScript to an Existing Compute Application

If you already have a JavaScript-based Fastly Compute application and want to migrate to TypeScript, you can do so in just a few steps.

NOTE: The following instructions assume that your Compute application is not using a bundler such as Webpack, esbuild, or rollup. If your project uses a bundler, add TypeScript according to the directions for your bundler (Webpack, esbuild, rollup).

1. Install TypeScript as a development dependency:

npm install --save-dev typescript

2. Create a tsconfig.json file in your project root. A recommended configuration for Fastly Compute is:

{
  "compilerOptions": {
    "strict": true,
    "rootDir": "src",
    "outDir": "build",
    "allowJs": true,
    "module": "ES2022",
    "lib": [ "ES2022" ],
    "moduleResolution": "bundler",
    "customConditions": [ "fastly" ],
    "esModuleInterop": true
  }
}

For more information about the properties that can be set in this file, see the tsconfig.json documentation.

3. The configuration above places the intermediate “compiled” JavaScript files into the build/ directory, so add this directory to your .gitignore file.

/build

4. Add tsc (TypeScript compiler) as the “prebuild” script of your application. Additionally, the “build” step needs to find the input file in the intermediate directory. Update your scripts in package.json like so:

{
  "scripts": {
    "prebuild": "tsc",
    "build": "js-compute-runtime build/index.js bin/main.wasm"
  }
}

5. Rename your .js files to .ts and start adding type annotations where needed. For example, add the FetchEvent type to the event object in your handler:

async function handler(event: FetchEvent) {
  // ...
}

Now, you are able to build and run the TypeScript application!

These steps are covered in more detail in the TypeScript section of our JavaScript documentation, so be sure to check that out if you need more guidance.

How it works

After performing the steps above, building the application causes the following steps to run:

1. The fastly.toml file is consulted for its scripts.build value, which is npm run build. This instructs npm to execute the build script listed in package.json. 

2. Because package.json defines a prebuild script, npm first runs it: tsc processes the TypeScript source files in src/ and outputs them to bin/.

3. npm runs the build script: The js-compute-runtime CLI tool builds the JavaScript runtime and program into a Wasm binary file at bin/main.wasm and packages it for deployment to Compute.

With this understanding, you are able to make any further adjustments as necessary for your application’s build setup.

Join the Discussion

We’re excited to see what you build with TypeScript on Fastly Compute! If you haven’t already, get your free Fastly developer account and join us on the Fastly community forum. We’d love to hear about what you’ve been building!

Happy coding!