Learn TypeScript for Playwright - 5 chapters, 6 modules

01TS setup + basics

Topics 175-178. Get the compiler running, write the first hello-world, and learn the seven type annotations you will see in 80 percent of Playwright code.

Sub-topics covered

flowchart LR
  TS[app.ts] --> P[Parser]
  P --> A[AST]
  A --> CHK[Type checker]
  CHK -->|ok| EMIT[Emit phase]
  CHK -->|fail| ERR[compile error]
  EMIT --> JS[app.js + .d.ts]
  JS --> N[Node / Browser runs]

Exercises typical for this module

• Initialise a fresh tsconfig.json with strict: true and explain in two lines what each of the six strict* flags catches.
• Convert a JS file that uses implicit any into a strict-mode TS file. Add the minimum annotations needed to make it compile.
• Write a function signature for greet(name: string, age?: number): string and call it three ways - with and without the optional.
• Compare const arr: number[] vs const arr: Array<number> vs a tuple [number, string]. When does each matter.

02Types deep dive

Topics 179-183. Once string and number click, the next level is unknown, narrowing, and the typed array methods that come for free.

Sub-topics covered

flowchart TD
  X[x: string | number] --> G{typeof x === 'string'?}
  G -- yes --> S[narrowed to string -> .toUpperCase ok]
  G -- no  --> N[narrowed to number -> .toFixed ok]

flowchart LR
  P1[Cat: kind, meow] --> S[structural check]
  P2[CatLike: kind, meow] --> S
  S --> EQ[TS treats them as the SAME type]

Exercises typical for this module

• Migrate a callback API that uses any for the response into one that uses unknown, then narrow it with typeof and in before using it.
• Write a filterNonNull<T> that turns Array<T | null> into Array<T> using a type predicate (x): x is T => x !== null.
• Build a discriminated union for a test result: { status: 'pass'; ms: number } | { status: 'fail'; ms: number; error: string } and write a function that handles both branches.
• Explain when a function should return void vs never. Give one example each from a Playwright test helper.
• Use a literal type to restrict sortBy to 'az' | 'za' | 'lohi' | 'hilo' and watch the compiler reject typos.

03Interfaces - the contract

Chapter 19. Interfaces describe the shape of an object. They are the way a TTACart product, a login payload, or a checkout step talks to the rest of the framework.

Sub-topics covered

classDiagram
  class UserBase {
    +id: string
    +email: string
  }
  class AdminUser {
    +permissions: string[]
  }
  UserBase <|-- AdminUser

Exercises typical for this module

• Convert a JS object literal that represents a TTACart product into an interface Product. Mark the description optional and the SKU readonly.
• Extend interface UserBase with interface AdminUser that adds a permissions: string[] field. Show that a function accepting UserBase still accepts an AdminUser.
• Write a class CheckoutStepOnePage implements ICheckoutPage and let the compiler tell you which methods are missing.
• Use an index signature to type a dynamic env map: interface Env { [key: string]: string | undefined } and explain why undefined matters.
• Pick: type vs interface for a union of 'desktop' | 'mobile'. Justify in two lines.

A small TTA-targeted interface - illustrative only, written fresh:

interface Product {
  readonly sku: string;
  name: string;
  priceInPaise: number;
  description?: string;
}

interface CartLine extends Product {
  qty: number;
}

const line: CartLine = {
  sku: 'tta-001', name: 'Mug', priceInPaise: 19900, qty: 2
};

04Enums - named constants

Chapter 20. Enums replace stringly-typed switches with named buckets. Useful for env names, test tags, sort orders, and checkout states.

Sub-topics covered

Exercises typical for this module

• Define a string enum Env with members Local, Stage, Prod. Use it as the parameter type for a getBaseUrl(env: Env) helper.
• Show the reverse mapping that a numeric enum produces (Env[0] === 'Local'). Explain why string enums do not.
• Replace a 5-branch switch with a lookup-object keyed by a string enum. Compare readability.
• Decide: when do you pick const enum SortOrder over type SortOrder = 'az' | 'za'. Two sentences.
• Use an enum as the discriminator field in a tagged union of test-result payloads.

05Generics - reusable types

Chapter 21. The feature that makes a UtilElementLocator, a fixture, or a readJson helper work across types without losing inference.

Sub-topics covered

flowchart LR
  CALL1[id(42)] --> INF1[T inferred as number]
  CALL2[id('hi')] --> INF2[T inferred as string]
  CALL3[id<boolean>(true)] --> EXPL[T explicit boolean]
  INF1 --> RET1[returns number]
  INF2 --> RET2[returns string]
  EXPL --> RET3[returns boolean]

flowchart LR
  F[pair<T, U>(t, u)] --> T[T from first arg]
  F --> U[U from second arg]
  T --> R[[t, u]: [T, U]]
  U --> R

flowchart LR
  S[T extends { id: string }] --> A[ok: { id, name }]
  S --> B[ok: { id, email, age }]
  S --> C[FAIL: { name } - no id]
  S --> D[FAIL: number - no id]

Exercises typical for this module

• Write a generic wrap<T>(value: T): { value: T } and test the inference - hover over the return type for three call sites.
• Implement readJson<T>(path: string): Promise<T>, then call it with an explicit type argument readJson<User[]>('users.json').
• Add a constraint: function getId<T extends { id: string }>(x: T) and prove the compiler now rejects objects without id.
• Use Partial<Product> to type a patch-update helper. Add a Required<Product, 'sku'> variant.
• Write a generic Page Object base: class BasePage<L extends Locators> where L describes the locator dictionary.

flowchart LR
  A[BasePage<L>] --> B[LoginPage with L = LoginLocators]
  A --> C[InventoryPage with L = InvLocators]
  A --> D[CartPage with L = CartLocators]
  B --> E[expect on this.locators.user]
  C --> F[click on this.locators.sortSelect]
  D --> G[count on this.locators.cartItems]

06Access modifiers + classes

Chapter 22. The final piece. public, private, protected, readonly, parameter properties, abstract classes - the syntax that ties Page Object Model + fixtures together.

Sub-topics covered

Exercises typical for this module

• Refactor a constructor with five manual this.x = x assignments into parameter properties. Compare line counts.
• Make a BasePage abstract with one abstract method readonly url: string. Force every subclass to declare its own URL.
• Pick: TS private vs JS # for the same field. Which one is compile-time only, which is run-time enforced.
• Add a static factory: InventoryPage.from(page: Page): InventoryPage. Discuss why that beats a free function.
• Combine readonly + parameter property to build an immutable TestUser class.

A small TTA-targeted abstract page - illustrative only, written fresh:

abstract class BasePage {
  constructor(protected readonly page: Page) {}
  abstract readonly url: string;
  async open(): Promise<void> { await this.page.goto(this.url); }
}

class CartPage extends BasePage {
  readonly url = '/playwright/ttacart/cart.html';
  get items() { return this.page.locator('.cart-line'); }
}