TypeScript Essentials

Learn TypeScript basics — JavaScript with types. This is the language Playwright tests are written in.

Playwright Automation • Prep • Lesson 8
12 min read

What you'll learn

  • Understand what TypeScript adds to JavaScript
  • Add type annotations to variables and functions
  • Create interfaces for object shapes
  • Read TypeScript error messages
Playwright AutomationlessonsJump to another lesson

TypeScript Essentials

Playwright tests are written in TypeScript. Let’s learn what that actually means.

What Is TypeScript?

JavaScript

  • Types guessed at runtime
  • Typos caught only when code runs
  • No autocomplete for unknown shapes
  • let age = 25; age = "twenty"; works

TypeScript

  • Types checked before running
  • Typos underlined in your editor
  • Full autocomplete for everything
  • Same line — instant error

Without TypeScript

let age = 25;
age = "twenty";
Runs fine! Bug hidden until later.

With TypeScript

let age: number = 25;
age = "twenty";
Error caught NOW, before running.

Why TypeScript for Testing?

Question 1 of 10 correct

When does TypeScript catch a type mistake?

Basic Type Annotations

let name: string = "Alice";
let age: number = 25;
let isReady: boolean = true;
let scores: number[] = [95, 87, 100];
let names: string[] = ["Alice", "Bob"];

Function Types

Types go on parameters (inputs) and the return value (output).

function add(a: number, b: number): number {
  return a + b;
}

function logMessage(message: string): void {
  console.log(message);
}

Interfaces — Shape of Data

User (interface)

3 fields
name:"string"
age:"number"
isAdmin:"boolean"
An interface is a blueprint — it says what shape an object must have.
 
interface User {
  name: string;
  age: number;
  email?: string;  // optional
}

const alice: User = {
  name: "Alice",
  age: 25,
  email: "alice@example.com"
};

const bob: User = {
  name: "Bob",
  age: 30
  // email optional — still valid
};

In an interface, the character after a property name marks it as optional.

TypeScript in Playwright

import { test, expect } from '@playwright/test';

test("user can search", async ({ page }) => {
  await page.goto("https://myshop.com");
  await page.fill("#search-box", "laptop");
  await expect(page.locator(".product-card")).toHaveCount(5);
});

Reading TypeScript Errors

Error Message

  • Type 'string' is not assignable to type 'number'
  • Property 'naem' does not exist on type 'User'
  • Property 'email' is missing in type
  • Argument of type 'number' is not assignable to parameter of type 'string'

Plain English

  • You put text where a number was expected
  • You have a typo in a property name
  • You forgot a required field
  • You passed the wrong type to a function

.ts vs .js Files

FileLanguage
script.jsJavaScript
script.tsTypeScript
component.tsxTypeScript + React

Playwright compiles .ts to .js automatically. You just write TypeScript.

Practice Exercises

Add Type Annotations

Add the correct type annotations to these variables and the function.

let username:  = "alice_test";
let loginCount:  = 42;
let isAdmin:  = false;

function greet(name: ):  {
return "Hello, " + name;
}

Match TypeScript Errors to Their Meaning

Match each TypeScript error message to what it actually means in plain English.

Fill in the Blank

To mark a property as optional in a TypeScript interface, add after the property name.

Check Your Understanding

Question 1 of 30 correct

What is the best description of TypeScript?