TypeScript
Overview
TypeScript is JavaScript with static typing. It adds a compile-time type checker; runtime behavior is JavaScript. Learning JavaScript applies to TypeScript for runtime tasks (e.g. sorting a list, DOM, async). Use TypeScript for types, interfaces, generics, and better tooling.
Core idea: Types describe shape and contracts; the compiler catches type errors before run time. Enable strict in tsconfig.json as a best practice.
Quick reference
| Concept |
Syntax / note |
| Type annotation |
let x: string, function f(n: number): void |
| Interface |
interface User { name: string; id: number } |
| Type alias |
type Id = string | number |
| Union |
string or number (union types) |
| Optional |
prop?: string or prop: string | undefined |
| Generics |
function id<T>(x: T): T { return x } |
| Infer type from schema |
Use library (e.g. Zod: z.infer<typeof schema>) |
Everyday types
- Primitives:
string, number, boolean, bigint, symbol.
- Arrays:
number[] or Array<number>.
- Any:
any — disables checking; avoid when possible. Prefer unknown for truly unknown data and narrow before use.
- Type annotations (postfix):
const name: string = "x", function greet(name: string): string { return "Hi " + name }.
- Object types:
{ name: string; age?: number } or interface User { name: string; age?: number }.
- Unions:
string | number; literal types: "a" | "b".
Narrowing
Narrow types with conditionals so TypeScript can infer:
- typeof:
if (typeof x === "string") { ... }
- Truthiness:
if (value) { ... }
- Equality:
if (x === null) { ... }
- in:
if ("name" in obj) { ... }
- Type guards:
function isFish(pet: Fish | Bird): pet is Fish { ... }
- Discriminated unions: Use a common literal field (e.g.
kind: "circle") and switch on it.
Functions
- Signatures:
(a: string, b?: number) => boolean; void for no return value.
- Overloads: Multiple call signatures + one implementation.
- Generics:
function first<T>(arr: T[]): T \| undefined.
- Constraints:
function longest<T extends { length: number }>(a: T, b: T): T.
Object types & type manipulation
- Interfaces:
interface Point { x: number; y: number }; extends for extension.
- Index signatures:
[key: string]: number.
- keyof:
type K = keyof User → union of keys.
- typeof:
type C = typeof config (value → type).
- Indexed access:
type Name = User["name"].
- Mapped types:
type Readonly<T> = { readonly [K in keyof T]: T[K] }.
- Conditional types:
type F = T extends string ? number : boolean.
- Template literal types:
type E = `on${Capitalize<Event>}`.
- Utility types:
Partial<T>, Required<T>, Pick<T, K>, Omit<T, K>, Record<K, V>, Exclude<T, U>, Extract<T, U>, NonNullable<T>, ReturnType<F>, Parameters<F>.
Classes
- Members:
class C { prop: number; method(): void {} }.
- Constructor:
constructor(public name: string) {} (parameter property).
- Implements:
class D implements I {}.
- Extends:
class Child extends Parent {}.
- Readonly, private, protected as needed.
Modules
- ES modules:
import { x } from "./file", export const x = 1, export type { T }.
- Default export:
export default App, import App from "./App".
- Namespace (legacy): Prefer ES modules.
Project configuration: tsconfig.json
- strict: Set
"strict": true (recommended). Enables strictNullChecks, noImplicitAny, strictFunctionTypes, etc.
- target: e.g.
"ES2022" or "ESNext".
- module: e.g.
"ESNext", "NodeNext" for Node.
- moduleResolution:
"bundler" (with bundler), "NodeNext" for Node.
- paths:
"@/*": ["./src/*"] for path aliases.
- include / exclude: Which files are compiled.
- References: Use project references for large monorepos.
See reference.md for official TSConfig Reference link.
Best practices
- Enable strict mode.
- Prefer interfaces for object shapes that may be extended; type for unions, mapped types, and aliases.
- Prefer const and readonly where possible.
- Use unknown instead of any for external data; narrow before use.
- Use generics to keep functions reusable and type-safe.
- For runtime validation + types, use a schema library (e.g. Zod) and infer types with
z.infer<typeof schema>.
Common mistakes
- any: Avoid; use
unknown and narrow, or proper types.
- Non-null assertion (
!): Use sparingly; prefer narrowing or optional chaining.
- Type assertions (
as): Prefer type guards or schema validation when data comes from outside.
- Strict off: Keep
strict: true; fix errors rather than disabling.
Additional resources
- reference.md — Official documentation links (Handbook, Reference, TSConfig, Cheat Sheets).
- Official: https://www.typescriptlang.org/docs — Get Started, Handbook, Reference, TSConfig.
1---2name: typescript3description: Use TypeScript for type-safe JavaScript: types, interfaces, generics, narrowing, tsconfig, modules, and strict mode. Use when writing or reviewing TypeScript, configuring tsconfig.json, defining types or interfaces, generics, type inference, or when the user mentions TypeScript, TS, or type checking.4---5
6# TypeScript
7
8## Overview
9
10TypeScript is JavaScript with static typing. It adds a **compile-time type checker**; runtime behavior is JavaScript. Learning JavaScript applies to TypeScript for runtime tasks (e.g. sorting a list, DOM, async). Use TypeScript for types, interfaces, generics, and better tooling.
11
12**Core idea**: Types describe shape and contracts; the compiler catches type errors before run time. Enable `strict` in `tsconfig.json` as a best practice.
13
14---
15
16## Quick reference
17
18| Concept | Syntax / note |
19|--------|----------------|
20| Type annotation | `let x: string`, `function f(n: number): void` |
21| Interface | `interface User { name: string; id: number }` |
22| Type alias | `type Id = string \| number` |
23| Union | `string` or `number` (union types) |
24| Optional | `prop?: string` or `prop: string \| undefined` |
25| Generics | `function id<T>(x: T): T { return x }` |
26| Infer type from schema | Use library (e.g. Zod: `z.infer<typeof schema>`) |
27
28---
29
30## Everyday types
31
32- **Primitives**: `string`, `number`, `boolean`, `bigint`, `symbol`.
33- **Arrays**: `number[]` or `Array<number>`.
34- **Any**: `any` — disables checking; avoid when possible. Prefer `unknown` for truly unknown data and narrow before use.
35- **Type annotations** (postfix): `const name: string = "x"`, `function greet(name: string): string { return "Hi " + name }`.
36- **Object types**: `{ name: string; age?: number }` or `interface User { name: string; age?: number }`.
37- **Unions**: `string | number`; **literal types**: `"a" | "b"`.
38
39---
40
41## Narrowing
42
43Narrow types with conditionals so TypeScript can infer:
44
45- **typeof**: `if (typeof x === "string") { ... }`
46- **Truthiness**: `if (value) { ... }`
47- **Equality**: `if (x === null) { ... }`
48- **in**: `if ("name" in obj) { ... }`
49- **Type guards**: `function isFish(pet: Fish | Bird): pet is Fish { ... }`
50- **Discriminated unions**: Use a common literal field (e.g. `kind: "circle"`) and switch on it.
51
52---
53
54## Functions
55
56- **Signatures**: `(a: string, b?: number) => boolean`; **void** for no return value.
57- **Overloads**: Multiple call signatures + one implementation.
58- **Generics**: `function first<T>(arr: T[]): T \| undefined`.
59- **Constraints**: `function longest<T extends { length: number }>(a: T, b: T): T`.
60
61---
62
63## Object types & type manipulation
64
65- **Interfaces**: `interface Point { x: number; y: number }`; `extends` for extension.
66- **Index signatures**: `[key: string]: number`.
67- **keyof**: `type K = keyof User` → union of keys.
68- **typeof**: `type C = typeof config` (value → type).
69- **Indexed access**: `type Name = User["name"]`.
70- **Mapped types**: `type Readonly<T> = { readonly [K in keyof T]: T[K] }`.
71- **Conditional types**: `type F = T extends string ? number : boolean`.
72- **Template literal types**: `` type E = `on${Capitalize<Event>}` ``.
73- **Utility types**: `Partial<T>`, `Required<T>`, `Pick<T, K>`, `Omit<T, K>`, `Record<K, V>`, `Exclude<T, U>`, `Extract<T, U>`, `NonNullable<T>`, `ReturnType<F>`, `Parameters<F>`.
74
75---
76
77## Classes
78
79- **Members**: `class C { prop: number; method(): void {} }`.
80- **Constructor**: `constructor(public name: string) {}` (parameter property).
81- **Implements**: `class D implements I {}`.
82- **Extends**: `class Child extends Parent {}`.
83- **Readonly**, **private**, **protected** as needed.
84
85---
86
87## Modules
88
89- **ES modules**: `import { x } from "./file"`, `export const x = 1`, `export type { T }`.
90- **Default export**: `export default App`, `import App from "./App"`.
91- **Namespace** (legacy): Prefer ES modules.
92
93---
94
95## Project configuration: tsconfig.json
96
97- **strict**: Set `"strict": true` (recommended). Enables strictNullChecks, noImplicitAny, strictFunctionTypes, etc.
98- **target**: e.g. `"ES2022"` or `"ESNext"`.
99- **module**: e.g. `"ESNext"`, `"NodeNext"` for Node.
100- **moduleResolution**: `"bundler"` (with bundler), `"NodeNext"` for Node.
101- **paths**: `"@/*": ["./src/*"]` for path aliases.
102- **include** / **exclude**: Which files are compiled.
103- **References**: Use project references for large monorepos.
104
105See [reference.md](reference.md) for official TSConfig Reference link.
106
107---
108
109## Best practices
110
111- Enable **strict** mode.
112- Prefer **interfaces** for object shapes that may be extended; **type** for unions, mapped types, and aliases.
113- Prefer **const** and **readonly** where possible.
114- Use **unknown** instead of **any** for external data; narrow before use.
115- Use **generics** to keep functions reusable and type-safe.
116- For runtime validation + types, use a schema library (e.g. **Zod**) and infer types with `z.infer<typeof schema>`.
117
118---
119
120## Common mistakes
121
122- **any**: Avoid; use `unknown` and narrow, or proper types.
123- **Non-null assertion (`!`)**: Use sparingly; prefer narrowing or optional chaining.
124- **Type assertions (`as`)**: Prefer type guards or schema validation when data comes from outside.
125- **Strict off**: Keep `strict: true`; fix errors rather than disabling.
126
127---
128
129## Additional resources
130
131- [reference.md](reference.md) — Official documentation links (Handbook, Reference, TSConfig, Cheat Sheets).
132- **Official**: https://www.typescriptlang.org/docs — Get Started, Handbook, Reference, TSConfig.
enderpuentes