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[]orArray<number>. - Any:
any— disables checking; avoid when possible. Preferunknownfor 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 }orinterface 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 };extendsfor 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
unknownand 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.