Static members & class types

One class name, two types

A shop page shows a label for each product, like Tea: $3. Here is a Product class and a label function in plain JavaScript (Class basics covers classes). The last line passes the wrong thing:

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

function label(item) {
  return `${item.name}: $${item.price}`;
}

console.log(label(new Product("Tea", 3)));
console.log(label(Product));

Lines 1 to 6 are the class: the constructor stores a name and a price on each new object. Lines 8 to 10 build a label from any item's name and price. Line 12 passes a real product and prints Tea: $3. Line 13 passes Product, the class itself, and prints Product: $undefined. Nothing warns you: the class has a name too (every function does, and the class's is the text "Product"), but no price.

Here is the same code in TypeScript, with the class shortened by parameter properties:

1class Product {2  constructor(public name: string, public price: number) {}3}4 5function label(item: Product) {6  return `${item.name}: $${item.price}`;7}8 9console.log(label(new Product("Tea", 3)));10console.log(label(Product));

Line 5 says label takes an item of type Product. When you use a class name as a type, it means one object made by the class: something with a name that is a string and a price that is a number. This is called the instance type, because an object made with new is an instance of the class. Line 9 passes one, and that's fine. Line 10 passes the class itself, and TypeScript marks it, on purpose:

• Argument of type 'typeof Product' is not assignable to parameter of type 'Product' means "you passed the class, and label wants one of its objects". typeof Product is TypeScript's name for the type of the class itself; the next section covers it.
• The second line says why they don't match: Property 'price' is missing in type 'typeof Product'.

Try each kind of value on line 10 and watch the list under the code:

1class Product {2  constructor(public name: string, public price: number) {}3}4 5function label(item: Product) {6  return `${item.name}: $${item.price}`;7}8 9console.log(label(new Product("Tea", 3)));10console.log(label(Product));

A new Product and A plain object both work. The type Product doesn't care how an object was made, only that it has the right fields, as the Structural typing lesson showed. An object without a price fails for the same reason the class does.

The class's own type: typeof

A class is also a value: you can store it in a variable and pass it to a function. To write its type, TypeScript uses the word typeof inside a type. Here TypeScript works it out for you:

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

• Line 5 stores the class itself in Maker. The query on line 6 shows const Maker: typeof Product.
• Line 7 calls new Maker("Cake", 4). Maker is the class, so this makes a product: the query on line 8 shows const cake: Product.
• Line 9 prints function 4. This typeof is JavaScript's, in running code: it gives back text that names a kind of value, and a class is a "function" (Checking types covers it). In a type, after a colon, typeof is TypeScript's, and it gives a type.

Write typeof Product yourself when a function takes the class as a parameter:

1class Product {2  constructor(public name: string, public price: number) {}3}4 5function makeFree(Kind: typeof Product, name: string) {6  return new Kind(name, 0);7}8 9const sample = makeFree(Product, "Tea sample");10//    ^?11console.log(sample.name, sample.price);

Line 5 says Kind is the class Product, not one product. So line 6 can call new Kind(name, 0), and TypeScript checks the arguments against Product's constructor: a string and a number. Line 9 passes the class, and the query on line 10 shows that sample is a Product. Line 11 prints Tea sample 0.

A class can only be called with new, and its type says so:

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

Line 5 forgets new. TypeScript says Value of type 'typeof Product' is not callable. Did you mean to include 'new'? In plain words: the class can't be called like a normal function. Run it anyway and JavaScript agrees: TypeError: Class constructor Product cannot be invoked without 'new'.

The table compares the two types. Read each row as a question, then the answer for each type.

Static members belong to the class

A static field or method belongs to the class itself, not to each object. There is only one of it, and you reach it through the class name (Static members covers how they work in JavaScript). TypeScript types them like any other member. Here a toast message class counts how many toasts it has shown:

1class Toast {2  static shown = 0;3 4  constructor(public message: string) {5    Toast.shown += 1;6  }7 8  static saved() {9    return new Toast("Saved");10  }11}12 13const first = Toast.saved();14//    ^?15const second = new Toast("Deleted");16console.log(first.message, second.message, Toast.shown);

• Line 2 is a static field: one shown, on the class, starting at 0. TypeScript works out that it's a number.
• Line 5 runs in the constructor, once for each new toast, and adds 1 to Toast.shown, through the class name.
• Lines 8 to 10 are a static method. Toast.saved() makes a toast with a ready-made message. A method like this, which makes objects for you, is often called a factory.
• The query on line 14 shows const first: Toast: TypeScript works out the factory's return type.
• Line 16 prints Saved Deleted 2: each toast's own message, then the one shared count.

Static members are part of typeof Toast, the class's own type, and not of Toast, the type of each object. Type what line 14 prints, and watch which reads TypeScript accepts:

1class Toast {2  static shown = 0;3 4  constructor(public message: string) {5    Toast.shown += 1;6  }7 8  static saved() {9    return new Toast("Saved");10  }11}12 13const first = Toast.saved();14console.log(first.shown);

first.shown gets Property 'shown' does not exist on type 'Toast'. Did you mean to access the static member 'Toast.shown' instead? TypeScript even suggests the fix. Toast.message is the mirror mistake: message belongs to each object, so the class doesn't have it. Both print undefined when they run.

Constructor signatures: any class you can call new on

typeof Product describes one particular class. Often a function should take any class that can make the kind of object it needs. For that, write a constructor signature: new, then the constructor's parameters, then an arrow and the type of object it makes.

1class Widget {2  constructor(public label: string) {}3  render() {4    return `<span>${this.label}</span>`;5  }6}7 8class Button extends Widget {9  render() {10    return `<button>${this.label}</button>`;11  }12}13 14function mount(Kind: new (label: string) => Widget, label: string) {15  const widget = new Kind(label);16  return widget.render();17}18 19console.log(mount(Button, "Buy"));20console.log(mount(Widget, "Sale"));

• Lines 1 to 6 make a Widget for a page, with a label and a render method that gives back its HTML. Lines 8 to 12 make Button, a subclass that renders a button instead (Class inheritance covers extends).
• Line 14 reads: Kind is something you can call with new and one string, label, and it gives back a Widget. It looks like a function type with new in front.
• Line 15 calls new Kind(label), and line 16 renders the widget.
• Line 19 prints <button>Buy</button>, and line 20 prints <span>Sale</span>. Both classes fit.

Now try some values that don't fit. This time Widget is abstract, and a Badge class takes a number:

1abstract class Widget {2  constructor(public label: string) {}3  abstract render(): string;4}5 6class Button extends Widget {7  render() {8    return `<button>${this.label}</button>`;9  }10}11 12class Badge {13  constructor(public count: number) {}14  render() {15    return `<b>${this.count}</b>`;16  }17}18 19function mount(Kind: new (label: string) => Widget, label: string) {20  return new Kind(label).render();21}22 23console.log(mount(Button, "Buy"));

Badge has a render method, but its constructor takes a number, and its objects have no label, so it doesn't fit. Widget is abstract, and an abstract class can't be called with new, so a constructor signature turns it away. An arrow function makes a Button when you call it, but it can't be called with new.

You can also write a constructor signature inside an interface, without the arrow. This is handy when you want to give the type a name:

1class Chip {2  constructor(public label: string) {}3}4 5interface ChipClass {6  new (label: string): Chip;7}8 9const Kind: ChipClass = Chip;10const tea = new Kind("Tea");11console.log(tea.label);

Lines 5 to 7 say a ChipClass is anything you can call with new and a string to get a Chip. Line 9 stores the Chip class with that type, line 10 makes a chip, and line 11 prints Tea.

The table compares typeof Widget with a constructor signature. Read each row as a question, then the answer for each.

A toolbar built from widget classes

Here is everything together: a page builder that describes a toolbar as a list of widget classes and labels, builds each widget, and counts how many it made.

1abstract class Widget {2  static created = 0;3 4  constructor(public label: string) {5    Widget.created += 1;6  }7 8  abstract render(): string;9}10 11class Button extends Widget {12  render() {13    return `<button>${this.label}</button>`;14  }15}16 17class Link extends Widget {18  render() {19    return `<a href="#">${this.label}</a>`;20  }21}22 23type WidgetClass = new (label: string) => Widget;24 25const toolbar: { Kind: WidgetClass; label: string }[] = [26  { Kind: Button, label: "Buy" },27  { Kind: Link, label: "Help" },28];29 30for (const item of toolbar) {31  console.log(new item.Kind(item.label).render());32}33console.log(Widget.created);

• Lines 1 to 9 are an abstract Widget with a static counter. Line 5 adds 1 for every widget made, whatever its subclass, because each subclass runs this constructor.
• Lines 11 to 21 are two widgets, Button and Link, each with its own render.
• Line 23 gives the constructor signature a name with a type alias: WidgetClass.
• Lines 25 to 28 list the toolbar. Each entry holds a class in Kind and a label. Putting Widget itself there would be an error, because it's abstract.
• Lines 30 to 32 make each widget and print <button>Buy</button> and <a href="#">Help</a>. Line 33 prints 2, read from the class.

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

Common mix-ups

• "The type Product means the class." No. It means one object made by the class. The class itself is typeof Product.
• "A Product must be made with new Product." No. Any object with the same fields and methods fits, like { name: "Cake", price: 4 }.
• "typeof in a type is the same as typeof in code." No. In code, JavaScript gives text such as "function" while the page runs. In a type, TypeScript gives the type of a value.
• "Each object gets a copy of the static fields." No. There is one, on the class. Read it as Toast.shown, not first.shown.
• "Any class with the right methods fits a constructor signature." No. The constructor's parameters must match too, so Badge, which takes a number, doesn't fit.
• "An abstract class fits new (label: string) => Widget." No. You can't call new on an abstract class, so TypeScript turns it away.

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 Cart {
  static maxItems = 10;
  items: string[] = [];
}

const cart = new Cart();
console.log(cart.maxItems);

1class Cart {2  static maxItems = 10;3  items: string[] = [];4}5 6const cart = new Cart();7console.log(Cart.maxItems);

1class Cart {2  items: string[] = [];3}4 5const Maker = Cart;

1class Cart {2  items: string[] = [];3}4 5const Maker = Cart;6//    ^?

1class Toast {2  shown = 0;3 4  constructor(public message: string) {5    this.shown += 1;6  }7}8 9const saved = new Toast("Saved");10const deleted = new Toast("Deleted");11console.log(deleted.shown);

1class Toast {2  static shown = 0;3 4  constructor(public message: string) {5    Toast.shown += 1;6  }7}8 9const saved = new Toast("Saved");10const deleted = new Toast("Deleted");11console.log(Toast.shown);

1class User {2  constructor(public name: string) {}3}4 5const visitor = User.guest();6console.log(visitor.name);

1class User {2  constructor(public name: string) {}3 4  static guest() {5    return new User("Guest");6  }7}8 9const visitor = User.guest();10console.log(visitor.name);

1class Chip {2  constructor(public label: string) {}3  render() {4    return `[${this.label}]`;5  }6}7 8function renderAll(Kind, labels: string[]) {9  return labels.map((label) => new Kind(label).render()).join(" ");10}11 12console.log(renderAll(Chip, ["Tea", "Cake"]));

1class Chip {2  constructor(public label: string) {}3  render() {4    return `[${this.label}]`;5  }6}7 8function renderAll(Kind: new (label: string) => Chip, labels: string[]) {9  return labels.map((label) => new Kind(label).render()).join(" ");10}11 12console.log(renderAll(Chip, ["Tea", "Cake"]));

1abstract class Widget {2  constructor(public label: string) {}3  abstract render(): string;4}5 6class Button extends Widget {7  render() {8    return `<button>${this.label}</button>`;9  }10}11 12function mount(Kind: typeof Widget, label: string) {13  return new Kind(label).render();14}15 16console.log(mount(Button, "Buy"));

1abstract class Widget {2  constructor(public label: string) {}3  abstract render(): string;4}5 6class Button extends Widget {7  render() {8    return `<button>${this.label}</button>`;9  }10}11 12function mount(Kind: new (label: string) => Widget, label: string) {13  return new Kind(label).render();14}15 16console.log(mount(Button, "Buy"));

Check your understanding

For each question, ask whether a name means the class or one of its objects. The quiz shows its code without the checker, so the error list doesn't give the answers away.

Key takeaways

• A class name used as a type, like item: Product, means one object with the class's shape.
• typeof Product is the type of the class itself: its constructor and its static members.
• Static fields and methods belong to the class. Read them as Toast.shown; objects don't have them.
• A constructor signature, new (label: string) => Widget, accepts any class you can call new on with those arguments, but not abstract classes.
• A class must be called with new, and TypeScript marks a call without it.

Coming next: Generic functions. It shows how to write a function like first(list) that gives back the same type it was given, whatever that type is.