1.25 — TypeScript Essentials: Quick Revision

Compact cheat sheet. Print-friendly.

How to use this material (instructions)

1. Skim before labs or interviews.
2. Drill gaps — reopen README.md then 1.25.a through 1.25.l.
3. Practice — 1.25-Exercise-Questions.md.
4. Polish answers — 1.25-Interview-Questions.md.

---

Core vocabulary

Term	One-liner
TypeScript	Typed superset of JavaScript that compiles to plain JS
Type annotation	Explicit type label: let x: string
Type inference	TS automatically determines types from context
Compile time	When tsc checks types — before code runs
tsc	TypeScript compiler — type-checks and emits JS
tsconfig.json	Configuration file for the TS compiler
Declaration file	.d.ts — type definitions without implementation

---

Basic types

Type	Example	Notes
string	"hello"	Text
number	42, 3.14	All numbers (no int/float split)
boolean	true	Logical
any	let x: any	Opts out of checking (avoid!)
unknown	let x: unknown	Safe any — must narrow first
void	(): void	Function returns nothing
null	null	Intentional absence
undefined	undefined	Not assigned
never	(): never	Never returns (throws/infinite loop)
bigint	42n	Large integers

---

Type annotation syntax

// Variables
let name: string = "Alice";
let age: number = 30;

// Function parameters and return
function greet(name: string): string { return `Hi, ${name}`; }

// Arrow function
const add = (a: number, b: number): number => a + b;

// Arrays
let names: string[] = ["Alice", "Bob"];
let nums: Array<number> = [1, 2, 3];

// Tuples
let pair: [string, number] = ["Alice", 30];

// Object
let user: { name: string; age: number } = { name: "Alice", age: 30 };

---

Interface vs type

// Interface — object shape
interface User {
  id: number;
  name: string;
  email?: string;          // Optional
  readonly role: string;   // Cannot reassign
}

// Type alias — any type
type ID = string | number;
type Status = "active" | "inactive";
type Pair = [string, number];
type Callback = (data: string) => void;

Feature	interface	type
Object shape	Yes	Yes
Extends	extends	&
Declaration merging	Yes	No
implements	Yes	No
Unions	No	Yes
Tuples	No	Yes
Primitives	No	Yes

Default: interface for objects, type for everything else.

---

Union and intersection

// Union — one OF several types
let id: string | number;

// Intersection — ALL types combined
type Admin = User & { permissions: string[] };

// Discriminated union
type Shape =
  | { type: "circle"; radius: number }
  | { type: "square"; side: number };

---

Type narrowing

// typeof
if (typeof x === "string") { x.toUpperCase(); }

// instanceof
if (error instanceof Error) { error.message; }

// in operator
if ("fly" in animal) { animal.fly(); }

// Discriminant
switch (shape.type) {
  case "circle": shape.radius; break;
  case "square": shape.side; break;
}

// Custom type guard
function isCat(a: Cat | Dog): a is Cat { return "meow" in a; }

---

Generics

// Generic function
function identity<T>(value: T): T { return value; }

// Generic interface
interface Box<T> { value: T; }

// Generic with constraint
function logLength<T extends { length: number }>(x: T): void {
  console.log(x.length);
}

// Multiple type params
function pair<A, B>(a: A, b: B): [A, B] { return [a, b]; }

// Default type parameter
interface Container<T = string> { value: T; }

---

Utility types

Utility	What it does	Example
Partial<T>	All props optional	Partial<User>
Required<T>	All props required	Required<Config>
Pick<T, K>	Keep only K	Pick<User, "id" | "name">
Omit<T, K>	Remove K	Omit<User, "password">
Record<K, V>	Object from key/value	Record<string, number>
Readonly<T>	All props readonly	Readonly<State>
ReturnType<F>	Function return type	ReturnType<typeof fn>
Parameters<F>	Function param types	Parameters<typeof fn>
NonNullable<T>	Remove null/undefined	NonNullable<string | null>
Exclude<T, U>	Remove from union	Exclude<"a"|"b"|"c", "a">
Extract<T, U>	Keep in union	Extract<"a"|"b"|"c", "a">

---

keyof and mapped types

// keyof — union of property names
type UserKeys = keyof User;  // "id" | "name" | "email"

// Type-safe property access
function get<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

// Mapped type — transform each property
type Stringify<T> = { [K in keyof T]: string };
type Flags<T> = { [K in keyof T]: boolean };

---

Enums and literal types

// String enum
enum Status { Active = "ACTIVE", Inactive = "INACTIVE" }

// Literal union (often preferred)
type Status = "active" | "inactive";
type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

// as const — makes values literal and readonly
const config = { port: 3000, host: "localhost" } as const;

---

tsconfig.json key options

Option	Purpose	Recommended
target	JS output version	"ES2020"
module	Module system	"commonjs" (Node) or "ESNext" (bundler)
strict	All strict checks	true (always)
outDir	Output directory	"./dist"
rootDir	Source directory	"./src"
lib	Built-in type libs	["ES2020", "DOM"]
jsx	JSX handling	"react-jsx"
moduleResolution	Import resolution	"bundler" or "node"
esModuleInterop	Default import fix	true
skipLibCheck	Skip .d.ts checking	true
noEmit	Type-check only	true (when bundler compiles)
declaration	Generate .d.ts	true (for libraries)
sourceMap	Generate .js.map	true (for debugging)
include	Files to compile	["src/**/*"]
exclude	Files to skip	["node_modules", "dist"]

---

Compiler commands

npx tsc                    # Compile project
npx tsc hello.ts           # Compile single file
npx tsc --watch            # Watch mode
npx tsc --noEmit           # Type-check only
npx tsc --init             # Create tsconfig.json
npx tsc --noEmitOnError    # No output if errors
npx tsc --build            # Build project references

---

Running TypeScript

Tool	Type-checks?	Speed	Use case
tsc	Yes	Moderate	Production build, CI
tsc --noEmit	Yes	Moderate	Type checking only
ts-node	Yes (default)	Slow	Scripts, REPL
tsx	No	Fast	Development
Vite/esbuild	No	Very fast	Bundled apps

Dev workflow: tsx watch for running + tsc --noEmit --watch for type checking.

---

ESLint + Prettier

# Install
npm install -D eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin
npm install -D prettier eslint-config-prettier
npm install -D husky lint-staged

ESLint = code quality (bugs, patterns). Prettier = formatting (whitespace, quotes). eslint-config-prettier = disables ESLint formatting rules that conflict with Prettier.

Key TS ESLint rules

Rule	Purpose
no-explicit-any	Ban any usage
no-unused-vars	Catch dead code
no-floating-promises	Unhandled promises
consistent-type-imports	Use import type

---

CI pipeline order

1. typecheck   → tsc --noEmit
2. lint        → eslint src/
3. format      → prettier --check src/
4. test        → vitest run
5. build       → vite build (or tsc)

---

Common patterns

// Nullable
function find(id: number): User | null { /* ... */ }

// Optional chaining + nullish coalescing
const name = user?.profile?.name ?? "Anonymous";

// Type assertion (use sparingly)
const input = document.getElementById("email") as HTMLInputElement;

// Discriminated union + exhaustive check
function handle(action: Action): State {
  switch (action.type) {
    case "increment": return state + action.amount;
    case "reset": return 0;
    default: const _: never = action; return _;
  }
}

// Generic API wrapper
async function fetchData<T>(url: string): Promise<T> {
  const res = await fetch(url);
  return res.json();
}
const users = await fetchData<User[]>("/api/users");

---

Master workflow

1. Define types — interfaces, type aliases for data shapes.
2. Write signatures — function inputs/outputs (types-first).
3. Implement — let autocomplete and errors guide you.
4. Refactor — compiler flags every breakage.
5. Lint + format — ESLint + Prettier on save.
6. Commit — husky + lint-staged enforce quality.
7. CI — typecheck + lint + format + test + build.

---

End of 1.25 quick revision.