Classes in TypeScript

A class that knows its types

A shop page makes a Product object for every item it sells. Here is a JavaScript class that does it. A class is a recipe for objects: new Product(…) runs its constructor and gives back a new object (Class basics covers this). One price comes from a form, so it's text:

class Product {
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}

const tea = new Product("Tea", "3");
console.log(tea.price + 1);

Lines 2 to 5 are the constructor. It stores the two arguments on the new object as this.name and this.price. Line 8 makes a tea that costs "3", in quotes, so the price is text. Line 9 adds 1 and prints 31, because + joins text instead of adding. Nothing warns you.

Here is the same class in TypeScript. Two lines are new, and the constructor's parameters have types:

1class Product {2  name: string;3  price: number;4 5  constructor(name: string, price: number) {6    this.name = name;7    this.price = price;8  }9}10 11const tea = new Product("Tea", "3");12console.log(tea.price + 1);

Lines 2 and 3 are field declarations. They list the properties every Product has, and the type of each: name is a string (text) and price is a number. Line 5 types the constructor's parameters the same way. Lines 6 and 7 store them, as before.

Line 11 gets an error, on purpose, because it's the bug:

• Argument of type 'string' is not assignable to parameter of type 'number' means "you're passing text where the constructor wants a number". An argument is a value you pass in a call, and new Product(…) is a call to the constructor.
• The code still runs and prints 31. TypeScript only warns you; it removes the types and the browser runs the rest.

Try it: type a different price for line 11 and watch the list under the code.

1class Product {2  name: string;3  price: number;4 5  constructor(name: string, price: number) {6    this.name = name;7    this.price = price;8  }9}10 11const tea = new Product("Tea", "3");12console.log(tea.price + 1);

With 3 or Number("3"), the price is a number, so the error goes away and the code prints 4. An empty box and 3, 2 get a different error: the constructor takes exactly two arguments, a name and a price, and TypeScript counts them.

Declaring fields

In JavaScript, a constructor can add any property it likes with this.something = …. TypeScript wants to know an object's properties before the constructor runs, so it can check every use of them. Here is what happens if you skip the declaration:

1class Cart {2  constructor() {3    this.total = 0;4  }5}

Line 3 stores 0 in this.total. TypeScript says Property 'total' does not exist on type 'Cart': it looked at the class body for a total and found none. The fix is to declare it. A field declaration can have a type, a starting value, or both:

1class Cart {2  items: string[] = [];3  total = 0;4  coupon?: string;5}6 7const cart = new Cart();8const total = cart.total;9//    ^?10const coupon = cart.coupon;11//    ^?12console.log(total, coupon);

• Line 2 has a type and a starting value: items is a list of strings (string[]) and starts empty.
• Line 3 has only a starting value. TypeScript works out the type from it, just as it does for a variable. The query on line 9 shows const total: number.
• Line 4 has a question mark: coupon?: string makes the field optional. It may hold a string or nothing at all, so the query on line 11 shows string | undefined. The | means "or".

Line 12 prints 0 undefined: the total starts at 0 and nobody has set a coupon yet. A field line is still JavaScript after the types are removed: total = 0; gives every new cart its own total, as a JavaScript field does.

A field with neither a type nor a starting value gives TypeScript nothing to work with:

1class Cart {2  items;3  total = 0;4}

Line 2 declares items and says nothing else. TypeScript reports Member 'items' implicitly has an 'any' type. The type any means "anything at all, and don't check it". With TypeScript's strict setting, which this lesson's examples use, TypeScript won't pick any for you silently. Write items: string[] = []; to say what it holds.

Every field needs a starting value

A field declared as email: string promises that email is always a string. TypeScript checks that promise: each field whose type doesn't allow undefined must get a value, either where it's declared or in the constructor. This check is called strictPropertyInitialization. It's a compiler setting, and the strict setting turns it on.

1class UserProfile {2  name: string;3  email: string;4 5  constructor(name: string) {6    this.name = name;7  }8}9 10const profile = new UserProfile("Asha");11console.log(profile.email.toUpperCase());

Lines 2 and 3 declare name and email. The constructor sets name on line 6, and nothing sets email. TypeScript marks line 3: Property 'email' has no initializer and is not definitely assigned in the constructor. In plain words: this field has no starting value (an initializer), and the constructor doesn't always set it. When the code runs, line 11 calls toUpperCase() on undefined and stops with a TypeError.

There are four common ways to write line 3. Press each one and watch the errors and the output. The code prints the email with a template literal, so nothing throws this time:

1class UserProfile {2  name: string;3  email: string;4 5  constructor(name: string) {6    this.name = name;7  }8}9 10const profile = new UserProfile("Asha");11console.log(`Email: ${profile.email}`);

A starting value fixes the bug. The ? is honest too: it changes the type, so any code that uses email as text has to check for undefined first. The ! after a field name is called a definite assignment assertion. It removes the error without giving a value, so use it only when something TypeScript can't see really does set the field, like a library that fills it in.

The table puts the four side by side. Read each row as: what you write, what TypeScript then knows, and what the field holds.

The constructor can set a field too. TypeScript follows every path through it:

1class UserProfile {2  name: string;3  email: string;4 5  constructor(name: string, email?: string) {6    this.name = name;7    if (email) {8      this.email = email;9    } else {10      this.email = "not set";11    }12  }13}14 15const profile = new UserProfile("Asha");16console.log(profile.email);

Line 5 takes an optional email parameter. Lines 7 to 11 set this.email in both branches of the if: the given email, or "not set". Every path sets it, so there's no error. Line 15 passes no email, and line 16 prints not set. Delete the else branch in Edit & run and the error on line 3 comes back.

TypeScript only looks inside the constructor itself, not inside the methods it calls:

1class UserProfile {2  name: string;3 4  constructor() {5    this.reset();6  }7 8  reset() {9    this.name = "Guest";10  }11}

Line 5 calls reset(), and line 9 sets name. You can see that it works, but TypeScript still marks line 2. It doesn't follow method calls, because a subclass (a class that extends this one, as Class inheritance shows) can replace reset() with a version that doesn't set name. Set the field in the constructor, give it a starting value, or, if you're sure, write name!: string.

Projects that turn the check off set strictPropertyInitialization to false in their tsconfig.json, the file that holds a project's compiler settings. This example sets it, and the error disappears while the bug stays:

1class UserProfile {2  name: string;3  email: string;4 5  constructor(name: string) {6    this.name = name;7  }8}9 10const profile = new UserProfile("Asha");11console.log(profile.email);

It's the profile from the start of this section, with no errors at all. Line 11 prints undefined, even though line 3 says email is a string. Keep the check on.

Parameter properties: fields from the constructor

Look back at the overview's class. Each field is written three times: once in the class body (name: string), once as a parameter (name: string), and once in the copy (this.name = name). TypeScript has a shortcut for this, called a parameter property: put public in front of a constructor parameter, and it becomes a field too.

1class Product {2  constructor(public name: string, public price: number) {}3}4 5const tea = new Product("Tea", 3);6const price = tea.price;7//    ^?8console.log(tea.name, price);

Line 2 is the whole class body. public name: string means three things: the constructor takes a name, every Product has a name field, and the argument is stored in it. The braces {} at the end are the constructor's empty body. The query on line 7 shows const price: number, and line 8 prints Tea 3.

public means anyone can use the field, which is already the default for fields. The next lesson covers private, protected, and readonly, which work here as well. Unlike the type annotations, a parameter property writes JavaScript. Here is what TypeScript gives the browser:

class Product {
  name;
  price;
  constructor(name, price) {
    this.name = name;
    this.price = price;
  }
}
const tea = new Product("Tea", 3);
const price = tea.price;
console.log(tea.name, price);

Lines 2 and 3 are the fields, and lines 5 and 6 copy the arguments into them. That's the same class the long way, written for you. Line 11 prints Tea 3.

Each parameter needs its own public. Press the buttons to change line 2:

1class Product {2  constructor(public name: string, public price: number) {}3}4 5const tea = new Product("Tea", 3);6console.log(`${tea.name}: $${tea.price}`);

A parameter with no modifier is a plain parameter: the constructor gets the value, and the object doesn't keep it. With public on name only, tea.price doesn't exist, and line 6 gets an error. With No modifiers, neither does tea.name, so line 6 has two errors.

The table compares the long way and the shortcut. Read each row as a question, then each way's answer.

1class Product {2  constructor(public name: string) {}3}

This example sets erasableSyntaxOnly, so line 2 gets This syntax is not allowed when 'erasableSyntaxOnly' is enabled. The fix is the long way: a field in the class body and a copy in the constructor. Without that setting, as in the rest of this lesson, parameter properties are fine.

Methods, getters, and setters

A method is a function that belongs to the class. You type its parameters like any function's, and you can write the type of value it gives back, its return type, after the brackets:

1class Product {2  constructor(public name: string, public price: number) {}3 4  label(): string {5    return `${this.name}: $${this.price}`;6  }7 8  discounted(percent: number) {9    return this.price - (this.price * percent) / 100;10  }11}12 13const tea = new Product("Tea", 4);14const sale = tea.discounted(25);15//    ^?16console.log(tea.label(), sale);

• Line 4 says label returns a string. If line 5 returned something else, TypeScript would mark it.
• Inside a method, this is the object the method was called on, so TypeScript knows this.price is a number.
• Line 8 types percent and leaves the return type out. TypeScript works it out from line 9: the query on line 15 shows const sale: number.
• Line 16 prints Tea: $4 3: the label, then 4 minus 25% of 4.

A getter is a method that you read like a field: get total() runs each time code reads line.total (Getters & setters covers how they work in JavaScript). TypeScript adds one rule: a getter with no setter is read-only.

1class CartLine {2  constructor(public name: string, public price: number, public quantity: number) {}3 4  get total() {5    return this.price * this.quantity;6  }7}8 9const line = new CartLine("Tea", 3, 2);10line.total = 10;11console.log(line.total);

Line 2 uses parameter properties for the name, price, and quantity. Lines 4 to 6 are the getter: it multiplies the price by the quantity. Line 10 tries to set line.total, and TypeScript says Cannot assign to 'total' because it is a read-only property. JavaScript has nowhere to store the 10. In this lesson's editor, line 10 does nothing and line 11 prints 6. In strict mode, which every JavaScript module uses, line 10 throws a TypeError instead.

A setter, written set, runs when code assigns to the property. It's a good place to clean up a value before you store it:

1class QuantityField {2  count = 1;3 4  get quantity() {5    return this.count;6  }7 8  set quantity(value) {9    this.count = Math.max(1, Math.round(value));10  }11}12 13const field = new QuantityField();14field.quantity = 2.6;15console.log(field.quantity);16field.quantity = -4;17console.log(field.quantity);18field.quantity = "5";

• Line 2 stores the real number in a field called count.
• Lines 4 to 6 are the getter. It returns count, so TypeScript works out that quantity is a number.
• Line 8's value has no type written. When a setter's parameter has no type, TypeScript takes the getter's return type: point at value and you see (parameter) value: number.
• Line 9 rounds the value and keeps it at least 1. Line 14 sets 2.6, and line 15 prints 3. Line 16 sets -4, and line 17 prints 1.
• Line 18 assigns the text "5". The setter takes a number, so TypeScript marks it, on purpose: Type 'string' is not assignable to type 'number'.

Any code can still change count directly and skip the setter's checks. The next lesson shows how private stops that.

A shopping cart class

Here is everything together: a cart for a shop page, with a typed list of items, a parameter property, a method, and two getters. Line 1 is a type alias: type CartItem = … gives a name to the shape of one item.

1type CartItem = { name: string; price: number; quantity: number };2 3class ShoppingCart {4  items: CartItem[] = [];5 6  constructor(public owner: string) {}7 8  add(name: string, price: number, quantity = 1) {9    this.items.push({ name, price, quantity });10  }11 12  get count() {13    return this.items.length;14  }15 16  get total() {17    return this.items.reduce((sum, item) => sum + item.price * item.quantity, 0);18  }19}20 21const cart = new ShoppingCart("Asha");22cart.add("Tea", 3, 2);23cart.add("Cake", 4);24console.log(`${cart.owner} has ${cart.count} items: $${cart.total}`);

• Line 4 declares items, a list of CartItem objects that starts empty.
• Line 6 makes owner a field with a parameter property.
• Line 8 types add's parameters. quantity = 1 is a default value, so TypeScript works out that it's a number and that callers may leave it out.
• Lines 12 to 18 are two getters. total adds up price times quantity with reduce, which combines a list into one value (map, filter & reduce covers it).
• Line 24 prints Asha has 2 items: $10: two teas at 3 and one cake at 4.

Because the class has types, every mistake in using it is marked. Here are four uses; three get errors on purpose:

1type CartItem = { name: string; price: number; quantity: number };2 3class ShoppingCart {4  items: CartItem[] = [];5 6  constructor(public owner: string) {}7 8  add(name: string, price: number, quantity = 1) {9    this.items.push({ name, price, quantity });10  }11}12 13const cart = new ShoppingCart("Asha");14cart.add("Tea", "3");15cart.add("Cake");16cart.items = [];17cart.owner = 7;

• Line 14 passes the price as text: Argument of type 'string' is not assignable to parameter of type 'number'.
• Line 15 leaves out the price: Expected 2-3 arguments, but got 1. The quantity is optional, so add takes two or three.
• Line 16 empties the list. That's allowed: an empty list is still a list of CartItem.
• Line 17 sets the owner to a number: Type 'number' is not assignable to type 'string'.

Now sort each line. Will TypeScript report an error, or is it fine?

Common mix-ups

• "The ! gives a field a value." No. It only tells TypeScript to stop checking that field. The field is still undefined until some code sets it.
• "A parameter needs public to be used inside the constructor." No. Any parameter can be used in the constructor. public also makes it a field on the object.
• "TypeScript checks the values passed to new while the page runs." No. The types are removed first. A price that arrives as text from a server gets into a Product without a warning.
• "Setting a field in a method the constructor calls is enough." No. TypeScript only looks inside the constructor itself, so the field still gets an error.
• "A getter needs a setter." No. A getter on its own is fine. It makes a property you can read but not set.
• "Field declarations are only types and disappear." No. The type after the colon disappears, but the field itself stays in the JavaScript, like total = 0;.

Practice exercises

Each exercise is TypeScript. Press Edit & run on the starter code: the errors update as you type, and the console shows what it prints. Try a guess first, then use the hints.

class Order {
  id: number;
  customer: string;
  paid = false;

  constructor(id: number) {
    this.id = id;
  }
}

1class Order {2  id: number;3  customer: string; // line 3: nothing gives it a value4  paid = false;5 6  constructor(id: number) {7    this.id = id;8  }9}

1class Settings {2  theme = "dark";3  fontSize = 16;4}5 6const size = new Settings().fontSize;

1class Settings {2  theme = "dark";3  fontSize = 16;4}5 6const size = new Settings().fontSize;7//    ^?

1class Product {2  name: string;3  price: number;4 5  constructor(name: string, price: number) {6    this.name = name;7    this.price = price;8  }9}10 11const cake = new Product("Cake", 4);12console.log(`${cake.name} costs ${cake.price}`);

1class Product {2  constructor(public name: string, public price: number) {}3}4 5const cake = new Product("Cake", 4);6console.log(`${cake.name} costs ${cake.price}`);

1class UserProfile {2  name: string;3  avatarUrl: string;4 5  constructor(name: string) {6    this.name = name;7  }8}9 10const asha = new UserProfile("Asha");11console.log(asha.avatarUrl);

1class UserProfile {2  name: string;3  avatarUrl = "/images/default.png";4 5  constructor(name: string) {6    this.name = name;7  }8}9 10const asha = new UserProfile("Asha");11console.log(asha.avatarUrl);

1class Cart {2  prices: number[] = [];3 4  add(price: number) {5    this.prices.push(price);6  }7}8 9const cart = new Cart();10cart.add(3);11cart.add(3);12cart.add(4);13console.log(cart.total);

1class Cart {2  prices: number[] = [];3 4  add(price: number) {5    this.prices.push(price);6  }7 8  get total() {9    return this.prices.reduce((sum, price) => sum + price, 0);10  }11}12 13const cart = new Cart();14cart.add(3);15cart.add(3);16cart.add(4);17console.log(cart.total);

1class SearchBox {2  text = "";3 4  get query() {5    return this.text;6  }7}8 9const box = new SearchBox();10box.query = "  Green Tea  ";11console.log(box.query);

1class SearchBox {2  text = "";3 4  get query() {5    return this.text;6  }7 8  set query(value) {9    this.text = value.trim().toLowerCase();10  }11}12 13const box = new SearchBox();14box.query = "  Green Tea  ";15console.log(box.query);

Check your understanding

For each question, think about two moments: what TypeScript says before the code runs, and what the code does when it runs. The quiz shows its code without the checker, so the error list doesn't give the answers away.

Key takeaways

• Declare every field in the class body, with a type, a starting value, or both: items: string[] = [].
• TypeScript checks each new call against the constructor's parameters, and each use of a field against its type.
• With strictPropertyInitialization, a field whose type doesn't allow undefined needs a value by the end of the constructor. ? allows undefined; ! turns the check off for one field.
• A parameter property, like constructor(public name: string), declares a field and stores the argument in one go.
• Methods are typed like functions. A getter without a setter is read-only, and a setter's parameter takes the getter's type.

Coming next: public, private, protected & #private. It shows who can use each field and method, and how TypeScript's private differs from JavaScript's #private.