|$ curl https://forge-ai.dev/api/markdown?path=docs/typescript

$cat docs/typescript-—-0-to-hero.md

updated Recently·45 min read·published

TypeScript — 0 to Hero

◆TypeScript◆Beginner to Advanced

Introduction

TypeScript is a statically typed superset of JavaScript developed by Microsoft. It adds optional type annotations, interfaces, generics, and other type-level constructs to JavaScript, catching errors at compile time rather than runtime. TypeScript compiles down to plain JavaScript — any valid JS is valid TS.

Created by Anders Hejlsberg (also behind C# and Delphi), TypeScript was first released in 2012. It has since become the dominant language for large-scale JavaScript applications, used by Angular, React, Vue, and virtually every major framework.

TypeScript's type system is structural, not nominal — types are compatible based on their shape, not their name. This makes it flexible while still catching real bugs. The type system is also Turing-complete, enabling advanced patterns like conditional types, mapped types, and template literal types.

Why TypeScript?

JavaScript is dynamically typed — type errors surface at runtime, often in production. TypeScript adds a compile-time type checker that catches these errors before code ships. Beyond safety, TypeScript provides better IDE support (autocomplete, go-to-definition, refactoring), self-documenting code, and easier onboarding for large teams.

why-ts.js

TypeScript

1	// JavaScript — this "works" until runtime
2	function add(a, b) {
3	return a + b;
4	}
5	add(1, "2"); // "12" — silent string concatenation, probably a bug
6
7	// TypeScript — this catches the error at compile time
8	function add(a: number, b: number): number {
9	return a + b;
10	}
11	add(1, "2"); // Error: Argument of type 'string' is not assignable to parameter of type 'number'

📝

note

TypeScript does not change how your code runs. It only adds compile-time checks. The output is always valid JavaScript.

Setting Up

Getting started with TypeScript requires the TypeScript compiler (tsc) and a configuration file. Most projects use npm or yarn to manage the dependency.

terminal

Bash

1	# Install TypeScript globally or as a dev dependency
2	npm install -g typescript
3
4	# Or per project (recommended)
5	npm init -y
6	npm install -D typescript
7
8	# Verify installation
9	tsc --version # e.g., 5.4.5
10
11	# Compile a file
12	tsc hello.ts # outputs hello.js
13
14	# Watch mode — recompile on changes
15	tsc --watch
16
17	# Initialize tsconfig.json (recommended for all projects)
18	tsc --init

hello.ts

TypeScript

1	// hello.ts
2	function greet(name: string): string {
3	return `Hello, ${name}!`;
4	}
5
6	const message = greet("TypeScript");
7	console.log(message); // Hello, TypeScript!

✓

best practice

Always use tsconfig.json instead of passing flags to tsc. It documents your project's configuration and is the standard for all TypeScript projects.

Type System Overview

TypeScript's type system is one of the most powerful in any mainstream language. It supports structural typing, type inference, generics, conditional types, and more. Here are the core concepts:

Category	Examples	Purpose
Primitives	string, number, boolean, null, undefined	Basic value types
Complex	array, tuple, object, enum	Compound data structures
Special	any, unknown, void, never, never	Control type checking behavior
Composed	union, intersection, type alias	Combine types
Structural	interface, type, class	Define shapes

type_overview.ts

TypeScript

1	// TypeScript infers types when possible
2	let x = 42; // inferred: number
3	let s = "hello"; // inferred: string
4	let arr = [1, 2, 3]; // inferred: number[]
5
6	// Explicit annotations when needed
7	let name: string = "Alice";
8	let age: number = 30;
9	let active: boolean = true;
10
11	// Type inference is usually enough
12	function multiply(a: number, b: number) {
13	return a * b; // return type inferred as number
14	}

Key Features

TypeScript adds several features on top of JavaScript. Here are the most impactful ones:

features.ts

TypeScript

1	// Interfaces — define object shapes
2	interface User {
3	name: string;
4	age: number;
5	email?: string; // optional
6	}
7
8	// Generics — reusable type-safe components
9	function first<T>(items: T[]): T \| undefined {
10	return items[0];
11	}
12
13	const num = first([1, 2, 3]); // inferred: number \| undefined
14	const str = first(["a", "b"]); // inferred: string \| undefined
15
16	// Type narrowing — TypeScript knows the type inside branches
17	function process(value: string \| number) {
18	if (typeof value === "string") {
19	return value.toUpperCase(); // TS knows: string
20	}
21	return value.toFixed(2); // TS knows: number
22	}
23
24	// Enums — named constants
25	enum Direction {
26	Up = "UP",
27	Down = "DOWN",
28	Left = "LEFT",
29	Right = "RIGHT",
30	}
31
32	const move = Direction.Up; // "UP"

ℹ

info

TypeScript's type system is structural — two types are compatible if they have the same shape, regardless of name. This means you rarely need to explicitly declare implements relationships.

Getting Started with tsc

The tsc compiler reads your TypeScript files and emits JavaScript. The tsconfig.json file controls compilation settings, including target ECMAScript version, module system, strictness, and file inclusion.

tsconfig.json

JSON

1	{
2	"compilerOptions": {
3	"target": "ES2022",
4	"module": "ESNext",
5	"moduleResolution": "bundler",
6	"strict": true,
7	"esModuleInterop": true,
8	"skipLibCheck": true,
9	"outDir": "./dist",
10	"rootDir": "./src",
11	"declaration": true,
12	"sourceMap": true
13	},
14	"include": ["src/*/"],
15	"exclude": ["node_modules", "dist"]
16	}

Flag	What It Does
strict	Enables all strict type-checking options
target	ECMAScript version for output (ES5, ES2020, ES2022)
module	Module system (CommonJS, ESNext, NodeNext)
declaration	Emit .d.ts declaration files
sourceMap	Generate source maps for debugging
noUncheckedIndexedAccess	Array/object index access returns T \| undefined

✓

best practice

For new projects, always start with strict: true. You can relax individual flags if needed, but strict mode catches the most bugs from the start.

Next Steps

This guide covers the essentials. From here, dive into the specific topics below to build a deep understanding of TypeScript's type system and features.

roadmap.ts

TypeScript

1	// The journey ahead:
2	// 1. Types & Annotations — primitives, arrays, tuples, unions
3	// 2. Type Inference — how TS figures out types for you
4	// 3. Literals & Unions — literal types, discriminated unions
5	// 4. Enums — named constants and reverse mappings
6	// 5. Function Types — signatures, overloads, callbacks
7	// 6. Interfaces & Classes — OOP patterns in TypeScript
8	// 7. Generics — reusable type-safe components
9	// 8. Utility Types — Partial, Pick, Omit, Record, etc.
10	// 9. Advanced Types — conditional, mapped, template literal
11	// 10. tsconfig Deep Dive — compiler configuration mastery

$Blueprint — Engineering Documentation·Section ID: TS-HERO·Revision: 1.0

X GitHub YouTube Instagram Facebook Buy me a coffee Sponsor