3TypeScript Crash Course

3.1 Why TypeScript

JS at runtime is untyped — bugs surface only when the bad code runs. TS adds compile-time type checking. Same JS output, with safety + IDE auto-complete + safer refactors. SDET-relevant payoff: fewer "is undefined" failures in test code, easier to evolve a Page Object Model.

3.2 Basic types

// Primitives
const name: string = 'Alice';
const age: number = 30;
const isAdmin: boolean = true;
const huge: bigint = 9007199254740993n;
const sym: symbol = Symbol('id');
const u: undefined = undefined;
const n: null = null;

// Special
const x: any = anything;           // opt-out — avoid
const y: unknown = anything;       // safe any — must narrow before use
const z: never = (() => { throw new Error(); })();  // never returns
function log(msg: string): void {} // returns nothing

// Arrays + tuples
const nums: number[] = [1,2,3];
const nums2: Array<number> = [1,2,3];
const pair: [string, number] = ['Alice', 30];   // fixed length + types

// Object
const user: { name: string; age?: number } = { name: 'A' };  // age optional

3.3 type vs interface

interface User {
  name: string;
  age: number;
}
interface User { email: string; }   // declaration merging — adds email
interface Admin extends User { role: 'admin' }

type User = { name: string; age: number };
type Id = string | number;          // unions
type Pair<T> = [T, T];              // generic alias
type Coord = { x: number } & { y: number };  // intersection

3.4 Union and intersection

// Union — A or B
type Result = { ok: true; value: string } | { ok: false; error: string };

function handle(r: Result) {
  if (r.ok) console.log(r.value);   // narrowed to success
  else      console.log(r.error);   // narrowed to failure
}

// Intersection — A and B
type WithTimestamp = { createdAt: Date };
type UserWithTs = User & WithTimestamp;
// must have name, age, createdAt

3.5 Literal types

type Role = 'admin' | 'user' | 'guest';     // string literal union
type Dir  = 'N' | 'S' | 'E' | 'W';
type Bit  = 0 | 1;

function setRole(r: Role) { /* ... */ }
setRole('admin');        // OK
setRole('superuser');    // type error

3.6 Generics

Type parameters let a function/class work over many concrete types while preserving information.

function first<T>(arr: T[]): T | undefined { return arr[0]; }
const a = first([1,2,3]);          // a: number | undefined
const b = first(['x','y']);        // b: string | undefined

// Multiple type params + constraints
function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
const u = { name: 'A', age: 30 };
pluck(u, 'age');     // number
pluck(u, 'foo');     // ERROR — 'foo' not in keys of u

// Generic interface
interface Box<T> { value: T }
const numBox: Box<number> = { value: 1 };

// Generic class
class Stack<T> {
  private items: T[] = [];
  push(x: T) { this.items.push(x); }
  pop(): T | undefined { return this.items.pop(); }
}

3.7 Narrowing

function fmt(x: string | number) {
  if (typeof x === 'string') return x.toUpperCase();    // narrowed: string
  return x.toFixed(2);                                  // narrowed: number
}

function area(s: { kind: 'circle', r: number } | { kind: 'square', s: number }) {
  switch (s.kind) {
    case 'circle': return Math.PI * s.r ** 2;            // narrowed: circle
    case 'square': return s.s ** 2;
  }
}

// in narrowing
type Cat = { meow: () => void };
type Dog = { bark: () => void };
function speak(p: Cat | Dog) {
  if ('meow' in p) p.meow();
  else p.bark();
}

// User-defined type predicate
function isString(v: unknown): v is string {
  return typeof v === 'string';
}
function up(v: unknown) {
  if (isString(v)) return v.toUpperCase();
}

3.8 Utility types — the ones you'll use

interface User { id: string; name: string; age: number }

type Partial1   = Partial<User>;    // all fields optional
type Required1  = Required<User>;   // all fields required
type ReadOnly1  = Readonly<User>;   // can't reassign fields
type Pick1      = Pick<User, 'id' | 'name'>;     // only id + name
type Omit1      = Omit<User, 'age'>;             // everything except age
type Record1    = Record<string, User>;          // { [k: string]: User }
type NonNull    = NonNullable<string | null>;    // string
type RT         = ReturnType<typeof fn>;         // type the fn returns
type Aw         = Awaited<Promise<string>>;      // string (unwraps promise)
type Params     = Parameters<typeof fn>;         // tuple of fn's params

function fn(a: number, b: string): boolean { return true; }
// RT = boolean, Params = [number, string]

3.9 Enums (and why as const often beats them)

// Classic enum
enum Status { Pending = 'pending', Paid = 'paid', Failed = 'failed' }
const s: Status = Status.Pending;

// Modern alternative — object + literal union (smaller output, simpler)
const STATUS = { Pending: 'pending', Paid: 'paid', Failed: 'failed' } as const;
type Status2 = typeof STATUS[keyof typeof STATUS];   // 'pending' | 'paid' | 'failed'

3.10 Mapped & conditional types

// Mapped — transform each property
type Stringify<T> = { [K in keyof T]: string };
type S = Stringify<User>;   // { id: string; name: string; age: string }

// Conditional — ternary in the type system
type IsString<T> = T extends string ? 'yes' : 'no';
type A = IsString<'hi'>;    // 'yes'
type B = IsString<42>;      // 'no'

// Extract / Exclude
type Pets = 'cat' | 'dog' | 'fish';
type Furry = Extract<Pets, 'cat' | 'dog'>;     // 'cat' | 'dog'
type NotFish = Exclude<Pets, 'fish'>;          // 'cat' | 'dog'

3.11 Classes — TS additions

class Account {
  // Access modifiers
  public  id: string;
  private balance: number;
  protected currency = 'USD';
  readonly createdAt = new Date();

  // Param properties — shorthand
  constructor(id: string, balance: number) {
    this.id = id; this.balance = balance;
  }
  /* equivalent shorthand:
     constructor(public id: string, private balance: number) {}
  */

  // Method
  deposit(amount: number): void { this.balance += amount; }

  // Getter
  get summary() { return `${this.id}: ${this.balance}`; }
}

abstract class Shape {
  abstract area(): number;     // subclasses must implement
}

3.12 tsconfig.json — what matters

{
  "compilerOptions": {
    "target": "ES2022",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,                       // enable ALL strict checks
    "noImplicitAny": true,                // (included in strict)
    "strictNullChecks": true,
    "noUncheckedIndexedAccess": true,     // arr[i] is T | undefined
    "noFallthroughCasesInSwitch": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "outDir": "dist",
    "rootDir": "src"
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules", "dist"]
}

3.13 Common TS patterns in test code

// Discriminated union for response handling
type ApiResult<T> =
  | { ok: true;  data: T }
  | { ok: false; error: { code: number; message: string } };

async function fetchUser(id: string): Promise<ApiResult<User>> {
  try {
    const r = await fetch(`/users/${id}`);
    if (!r.ok) return { ok: false, error: { code: r.status, message: r.statusText } };
    return { ok: true, data: await r.json() };
  } catch (e: any) {
    return { ok: false, error: { code: 0, message: e.message } };
  }
}

// Page Object generic
interface PageObject {
  page: Page;
}

// Type-safe fixtures
type Fixtures = {
  loginPage: LoginPage;
  authedUser: { id: string; email: string };
};
const test = base.extend<Fixtures>({ /* ... */ });