Running TypeScript

Browsers and Node.js run JavaScript, not TypeScript. So a TypeScript file has three roads to running, and in the customs picture each one crosses the border in its own way:

• a checkpoint right in the browser: the Playground;
• full customs: the compiler tsc checks the file and writes JavaScript, and Node.js runs it;
• a road with no inspection: node tears off the declarations and lets the parcels through without reading them.

Let's take all three with the same file, hello.ts. The .ts extension says that the file holds TypeScript code:

function greet(who: string): string {
    return `Hello, ${who}`;
}

console.log(greet("Anna")); // Hello, Anna

1. who: string: the parameter who accepts only strings.
2. : string after the parentheses: the function returns a string.
3. Everything else is plain JavaScript: a template literal and console.log.

Three ways to run code

The Playground

The TypeScript Playground is a page on the TypeScript website where code is checked and run right in the browser. You install nothing, and the link is in the "Set up your computer" panel on the course page.

1. Paste the code into the editor.
2. Errors are underlined at once, as you type.
3. The panel next to the editor shows the JavaScript the code turns into.
4. The Run button above the editor runs the program, and what console.log printed appears on the same panel, on the Logs tab.

The Playground is handy for short experiments: you can try the lesson examples in it.

tsc, then node

This is full customs. First the compiler checks the file and writes JavaScript, then Node.js runs the result. In a terminal it takes two commands:

$ tsc hello.ts
$ node hello.js
Hello, Anna

1. tsc hello.ts checks the types. If there are no errors, it prints nothing, and a file hello.js appears next to hello.ts: the same code in plain JavaScript.
2. node hello.js runs that file like any JavaScript program.

The $ sign marks the start of a command; you do not type it. Turning TypeScript code into JavaScript is called compilation.

The command tsc -v shows the compiler's version: it prints, for example, Version 7.0.2. If TypeScript is installed into a project folder rather than on the whole computer, put npx before the command: npx tsc hello.ts.

node hello.ts

Node.js 22.18 and newer can run a .ts file by itself:

$ node hello.ts
Hello, Anna

This is the road with no inspection. node cuts the type annotations out of the file and runs what is left. It checks no types on any line, and no hello.js file is left after it.

A few TypeScript features cannot be cut out: they have to be rewritten into other code. node refuses to run a file with such a feature, and that file needs tsc or the Playground. The course warns you when such a feature comes up.

The editor checks as you type

TypeScript code is best written in an editor that understands the language, such as VS Code. It checks the file as you type: it underlines an error with a red wavy line, and when you hover the mouse over a name, it shows its type. It is the same inspector, only standing next to you while you pack the parcel.

Strict mode

tsc has strict mode: a set of extra checks that catch more errors. For example, in strict mode you cannot leave a function parameter without a type if TypeScript cannot work out the type by itself. Since TypeScript 6.0 strict mode is on by default. The course is written for TypeScript 7, and all its examples are checked in strict mode.

Common mistake

Running a file with node hello.ts and deciding that the types were checked:

function greet(who: string): string {
    return `Hello, ${who}`;
}

console.log(greet(42)); // ✗

node hello.ts runs such a file without a single complaint and prints Hello, 42. Only tsc finds the error:

error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

The number 42 is passed where a string is expected. To check the types, run tsc hello.ts or open the file in the editor: node only cuts out the annotations.

Key points

• Browsers and Node.js run JavaScript, so TypeScript code is compiled or has its types cut out before it runs.
• The Playground checks and runs code right in the browser.
• tsc hello.ts checks the types and writes hello.js, and node hello.js runs it.
• node hello.ts cuts out the annotations and runs the code, but checks no types.