Roadmap › 4. Frontend › Step 44
TS
TypeScript — Types, Generics and Real-World Patterns
Why TypeScript, basic and object types, interfaces vs type aliases, unions and narrowing, functions, classes, generics, utility types, mapped and conditional types, modules, tsconfig and strict mode, typing API calls for Angular/React, and the TypeScript interview questions.
What it is & where it is used
TypeScript is JavaScript with a static type system, created by Microsoft (lead designer Anders Hejlsberg, also the designer of C#). TypeScript code is compiled (transpiled) to plain JavaScript; types exist only at compile time and are erased at runtime.
Why teams use it:
- Catches errors before running (typos, wrong argument types,
undefinedaccess). - IntelliSense, safe refactoring and self-documenting APIs.
- Required by Angular; the default for React (Vite, Next.js) and Vue 3 projects; familiar to C# developers.
| C# concept | TypeScript equivalent |
|---|---|
class, interface, access modifiers | Same keywords (interfaces are structural, not nominal) |
Generics List<T> | Generics Array<T>, Promise<T> |
enum | enum or (preferred) union of string literals |
Nullable string? | string | undefined, optional prop?: |
async/await + Task<T> | async/await + Promise<T> |
| LINQ | Array methods map, filter, reduce |
Versions & history
| Year | Version | Highlights |
|---|---|---|
| 2012 | 0.8 | First public release |
| 2016 | 2.0 | strictNullChecks, never, control-flow analysis |
| 2018 | 3.0 | unknown, tuples in rest parameters, project references |
| 2020 | 4.0–4.1 | Variadic tuples, template literal types, key remapping |
| 2022 | 4.9 | satisfies operator |
| 2023 | 5.0 | Standard (TC39) decorators, const type parameters, faster builds |
| 2024 | 5.4–5.7 | NoInfer, inferred type predicates, --erasableSyntaxOnly prep |
| 2025 | 5.8–5.9 | Node 18+ module modes, import defer; TypeScript 7 native compiler (Go port, ~10× faster) in preview |
Node.js 22.6+/23+ can run .ts files directly by stripping types (no type checking) — type-check with tsc --noEmit.
Lifecycle
From .ts file to running code:
- Write
.ts/.tsxwith types. - The type checker (
tscor the editor's language service) reports errors usingtsconfig.jsonsettings. - Transpile to JavaScript (
tsc, esbuild, SWC, Babel, Vite, Angular CLI) — types are erased; syntax down-levelled to thetarget. - Bundle (Vite/Rollup/webpack/esbuild) with imports resolved per
module/moduleResolution. - Run in the browser or Node.js. At runtime there are no types — validate external data (API responses, forms) with code or a schema library (Zod).
Tools used to develop
tsccompiler,tsconfig.json,ts-node/tsxto run TS in Node.- VS Code (built-in TS language service), TypeScript Playground (typescriptlang.org/play).
- Bundlers: Vite, esbuild, SWC, Angular CLI, Next.js.
- Lint: ESLint +
typescript-eslint; format: Prettier. - Runtime validation: Zod, Valibot; API types from OpenAPI: openapi-typescript, NSwag, Orval.
- Testing: Vitest, Jest (ts-jest), Playwright.