Skip to content

TypeScript Cheat Sheet — The Essentials

Who this is for: A QA / test engineer who needs just enough TypeScript to read and write Playwright (or any TS) tests. Skim it once, keep it open as a reference. TypeScript = JavaScript + types (labels that catch mistakes before you run the code).

1. Why Types At All?

ts let count = 5; count = "five"; // ❌ TypeScript error BEFORE you run — caught instantly

The type label means your editor flags typos, wrong arguments, and undefined bugs as you type, instead of 10 minutes into a test run.

2. Basic Types

```ts let name: string = "Manoj"; let age: number = 42; let isActive: boolean = true; let nothing: null = null; let notSet: undefined = undefined; let anything: any = "avoid this"; // turns OFF type-checking — avoid

let id: number; // declare type, assign later id = 100;

// Arrays let scores: number[] = [90, 85, 100]; let names: string[] = ["a", "b"];

// Tuple — fixed-length, typed positions let pair: [string, number] = ["age", 42]; ```

3. Type Inference (you often don't need to write types)

ts let city = "London"; // TS infers: string let total = 10 + 5; // TS infers: number // city = 42; // ❌ still caught, even without an explicit type

Rule of thumb: let TS infer simple variables; write explicit types on function parameters and object shapes.

4. Functions

```ts // parameter types + return type function add(a: number, b: number): number { return a + b; }

// arrow function const greet = (name: string): string => Hello, ${name};

// optional parameter (?) and default value function log(msg: string, level?: string) {} // level may be undefined function pageSize(n: number = 20): number { return n; } // default 20

// returns nothing function printIt(x: string): void { console.log(x); }

// async function returns a Promise async function fetchUser(id: number): Promise { return "user"; } ```

5. Objects, type, and interface

Two ways to describe an object's shape. Both work; interface is common for objects, type for everything (unions, primitives, etc.).

```ts // interface interface User { name: string; age: number; email?: string; // optional readonly id: number; // can't be reassigned after creation }

// type alias type Point = { x: number; y: number };

const u: User = { name: "Jane", age: 30, id: 1 }; const p: Point = { x: 10, y: 20 }; ```

interface type
Describe object shape ✅ ✅
Unions (A \| B) ❌ ✅
Can be extended/merged ✅ (re-declare) via &
Common use Objects, classes Unions, primitives, functions

6. Union & Literal Types

```ts let id: string | number; // EITHER a string OR a number id = "abc"; id = 123; // both fine

// literal union — only these exact values allowed type Status = "pass" | "fail" | "skip"; let result: Status = "pass"; // result = "broken"; // ❌ not an allowed value ```

This is huge for tests: reporter: "html" | "list" | "junit" stops typos at write time.

7. Arrays of Objects & Record

```ts interface TestCase { id: number; name: string; }

const cases: TestCase[] = [ { id: 1, name: "login" }, { id: 2, name: "logout" }, ];

// Record — a typed dictionary/map const env: Record = { BASE_URL: "https://staging", TOKEN: "abc123", }; ```

8. Classes (Page Objects use these)

```ts class LoginPage { // properties with access modifiers private url: string; readonly name: string = "Login";

constructor(url: string) { this.url = url; }

// method open(): void { console.log(Opening ${this.url}); } }

// inheritance class AdminPage extends LoginPage { constructor() { super("/admin"); } }

const page = new LoginPage("/login"); page.open(); ```

Modifier Meaning
public (default) Accessible anywhere
private Only inside this class
protected This class + subclasses
readonly Set once, never reassigned

9. Generics — <T> (reusable, type-safe code)

A placeholder type filled in when used. You'll read these constantly in Playwright (Promise<void>, Locator, test.extend<MyFixtures>).

```ts function first(items: T[]): T { return items[0]; }

first([1, 2, 3]); // T = number → returns number first(["a", "b"]); // T inferred as string

// Promise — an async value of type T async function getCount(): Promise { return 5; } ```

10. Handling null / undefined (the safety stuff)

```ts let val: string | undefined;

// optional chaining ?. — stop if null/undefined, don't crash const len = val?.length; // number | undefined

// nullish coalescing ?? — fallback ONLY when null/undefined const name = val ?? "default"; // "default" if val is null/undefined

// non-null assertion ! — "trust me, it's not null" (use sparingly) const sure = val!.length; // tells TS to stop worrying ```

11. Imports & Exports (how files connect)

```ts // named export export const BASE_URL = "https://app.com"; export function login() {}

// import named things import { BASE_URL, login } from "./config";

// default export (one per file) export default class LoginPage {} import LoginPage from "./LoginPage";

// import everything import * as utils from "./utils";

// type-only import (clarity / perf) import type { User } from "./types"; ```

12. Common Playwright + TypeScript Patterns

```ts import { test, expect, Page, Locator } from '@playwright/test';

// typed Page Object class CartPage { readonly checkoutBtn: Locator; constructor(public page: Page) { this.checkoutBtn = page.getByRole('button', { name: 'Checkout' }); } async checkout(): Promise { await this.checkoutBtn.click(); } }

// async/await — almost everything in Playwright is async test('adds item', async ({ page }) => { await page.goto('/'); // await = wait for it to finish const title: string = await page.title(); expect(title).toContain('Shop'); });

// typed test data array (data-driven) const users: { name: string; valid: boolean }[] = [ { name: 'standard', valid: true }, { name: 'locked', valid: false }, ];

for (const u of users) { test(login: ${u.name}, async ({ page }) => { / ... / }); } ```

13. Quick Symbol Reference

Symbol Meaning Example
: type annotation name: string
? optional email?: string
\| union (or) string \| number
& intersection (and) A & B
=> arrow function (x) => x + 1
?. optional chaining user?.name
?? nullish fallback x ?? "default"
! non-null assertion value!
<T> generic type Array<string>
readonly can't reassign readonly id: number
as type assertion x as string
... spread / rest [...arr], (...args)
`${}` template string `Hi ${name}`

14. The 5 Things You'll Use 90% of the Time

  1. async / await — Playwright is asynchronous; almost every action needs await.
  2. interface / type — describe your test data and page shapes.
  3. Union literals — "pass" | "fail" to constrain values.
  4. Classes — Page Objects are classes.
  5. ?. and ?? — handle values that might be missing without crashing.

15. Where to Go Next