Classes and new

So far, you've created objects by writing them out, { name: "Goblin", health: 30 }, or with a function that returns one. When a game needs many objects of the same kind, JavaScript has another way: a class. A class is a template for objects. It says once what every object made from it will have:

class Monster {
    name: string = "Goblin";
    health: number = 30;
}

const goblin = new Monster();
const wolf = new Monster();
wolf.name = "Wolf";

console.log(goblin);
console.log(wolf);

This prints:

Monster { name: "Goblin", health: 30 }
Monster { name: "Wolf", health: 30 }

Step by step:

  • class Monster { … } declares a class named Monster. Class names start with a capital letter, like the names of types.
  • Inside the class are its fields: the properties that every object of the class will have. A field is written like a property in an object type, with a name and a type, followed by = and its initial value. Each field ends with ;.
  • new Monster() creates a new object from the template, with the fields set to their initial values. Such an object is an instance of the class. Each new creates a separate object, so changing wolf.name doesn't change goblin.
  • console.log writes the class's name in front of the object, so you can see what the object was made from.

Classes are part of JavaScript; TypeScript adds the types of the fields. As with variables, you can leave the type out when there's an initial value: health = 30; is a number.

A class is also a type. You can use the name Monster in annotations, like the types from lesson 4: const boss: Monster = new Monster(); or function hit(monster: Monster): void. TypeScript checks fields as it checks properties: goblin.helth gives Property 'helth' does not exist on type 'Monster'. Did you mean 'health'? (TS2551), and goblin.health = "a lot"; is TS2322.

Every field needs a value. Leave out an initial value, and you get an error:

class Monster {
    name: string = "Goblin";
    health: number;
}

TypeScript reports:

main.ts(3,5): error TS2564: Property 'health' has no initializer and is not definitely assigned in the constructor.

Without this check, a new monster would have undefined in health, though its type says number. The message mentions the constructor, the other way to give a field its value; that's the next exercise.

Typical mistakes:

  • Forgetting new: const goblin = Monster(); gives Value of type 'typeof Monster' is not callable. Did you mean to include 'new'? (TS2348).
  • Writing a field like a property of an object literal: name: "Goblin";. After a colon comes a type, so "Goblin" becomes the field's literal type, the field gets no value, and you get TS2564. The value goes after =.
  • Separating fields with commas, as in an object: TypeScript reports ';' expected. (TS1005).

Instructions

Declare a class Monster with two fields: name, a string with the initial value "Goblin", and health, a number with the initial value 30.

Below the class, create two monsters with new: goblin and wolf. Change the wolf's name to "Wolf" and its health to 25. Then print both monsters:

Monster { name: "Goblin", health: 30 }
Monster { name: "Wolf", health: 25 }

Write a function hit(monster: Monster, damage: number): void that lowers the monster's health by damage. At the end of the program, call hit(wolf, 10) and print the wolf's name and health like this:

Wolf: 15

Start programming for free

By signing up, you agree to the Terms of Service and Privacy Policy.

Or sign up with:

1/9