TypeScript Basics

Add static types to JavaScript with TypeScript. Set up tsc, learn the primitive types, type inference, and the most useful tsconfig flags.

TypeScripttypestsconfigstrict

Duration

⏱ About 2 hours

Level

📊 Intermediate

Prerequisite

🎯 JavaScript track

OUTCOME

Convert a JS project to TS and run it with strict mode enabled

What you'll learn

1Install TypeScript and write a minimal tsconfig.json
2Use the primitive types and literal types
3Rely on type inference, annotate when needed
4Run TS with tsx or compile with tsc

1. Why TypeScript?

Catch bugs at compile time, not at 3 AM
Editors show real autocomplete and refactors
Easier to navigate large codebases
Industry standard for any non-trivial JS project

2. Setup

bash

npm install --save-dev typescript tsx
npx tsc --init   # creates tsconfig.json

json

// tsconfig.json (key fields)
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "NodeNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "noEmit": true
  }
}

3. Primitive Types

typescript

let count: number = 0;
let name: string = "Alice";
let active: boolean = true;
let nothing: null = null;
let missing: undefined;
let ids: number[] = [1, 2, 3];
let pair: [string, number] = ["a", 1];   // tuple

// Type inference — let TS figure it out
const score = 100;          // inferred as number
const greeting = "hello";   // inferred as string

4. Literal Types & Unions

typescript

type Status = "pending" | "done" | "failed";
function setStatus(s: Status) { /* ... */ }
setStatus("done");
// setStatus("complete");  // error: not assignable

type ID = string | number;   // union

Example code / lecture materials

All lecture materials and example code are openly available on GitHub.

View on GitHub ↗