Installing TypeScript: tsc, tsconfig.json and Running .ts Files

You can try TypeScript in your browser in seconds, and set it up on your computer with Node.js and npm in a few minutes.

Try it online: the TypeScript Playground#

The official TypeScript Playground at typescriptlang.org/play lets you write TypeScript, see errors as you type, and view the JavaScript it compiles to. It is ideal for experimenting with examples from this course.

Install on your computer#

You need Node.js installed. Then, in a project folder:

npm init -y
npm install --save-dev typescript

TypeScript is installed per project as a dev dependency, so each project records its own version. Check it with:

npx tsc --version

Compile a file#

Create hello.ts:

const greeting: string = "Hello, TypeScript!";
console.log(greeting);

Hello, TypeScript!

Compile it to JavaScript, then run the result with Node.js:

npx tsc hello.ts
node hello.js

tsc checks the file and writes hello.js next to it, with the type annotations removed. If there are type errors, tsc prints them (and still writes the JavaScript by default, unless configured not to).

tsconfig.json#

Real projects configure the compiler with a tsconfig.json file. Create one with:

npx tsc --init

The generated file has many options, most commented out. A small, modern configuration for a Node.js project looks like this:

{
  "compilerOptions": {
    "target": "es2022",
    "module": "nodenext",
    "strict": true,
    "outDir": "dist",
    "rootDir": "src",
    "skipLibCheck": true
  },
  "include": ["src"]
}

With a tsconfig.json, run plain npx tsc and it compiles every file in src/ to dist/. The most important option is "strict": true, which turns on the checks that make TypeScript most useful. All examples in this course use strict mode. The options are explained in tsconfig.json and Strict Mode.

Watch mode#

npx tsc --watch

recompiles automatically every time you save. Add scripts to package.json to make this convenient:

{
  "scripts": {
    "build": "tsc",
    "dev": "tsc --watch",
    "start": "node dist/index.js"
  }
}

Running TypeScript directly#

For scripts and development, you can skip the separate compile step:

• Node.js (version 22.18 and later, and 23.6 and later) can run .ts files directly with node file.ts. It strips the types without checking them, so still run tsc --noEmit (type-check only) to find errors. Some TypeScript-only syntax, such as enum, is not supported by type stripping.
• tsx (npx tsx file.ts) is a popular tool that runs TypeScript files quickly, also without type-checking.

In both cases, the editor and tsc --noEmit are what find type errors.

Front-end projects#

Build tools set TypeScript up for you. For example, npm create vite@latest offers React, Vue and plain TypeScript templates, and Next.js creates TypeScript projects by default. The bundler strips types while tsc --noEmit (often run in a typecheck script or in CI) checks them.

Editor support#

VS Code has TypeScript built in: errors are underlined as you type, hovering shows types, and F12 jumps to definitions. VS Code also type-checks JavaScript files lightly, which is why you sometimes see TypeScript-style hints in .js files.

Practice#

npm init -y
npm install --save-dev typescript
npx tsc --init

const a: number = 12;
const b: number = 30;
console.log(`The sum is ${a + b}`);

The sum is 42

npx tsc
node dist/index.js

Key takeaway#