What a field is
An empty Dog class gives you objects that are all identical. To make them differ you attach data to each one. That data is stored in properties, which a class declares as fields. The two words describe the same thing from two sides: the class declares a field, and each object has its own value for it.
Declaring fields
In TypeScript you list the fields inside the class body, each with a name and a type:
class Dog {
name: string;
age: number;
}
This says that every Dog has a name that is a string and an age that is a number. The compiler uses the declarations to check your code: it knows what dog.name is, it suggests the field when you type dog., and it reports an error if you misspell the name or assign the wrong type of value. The types are removed when the code is compiled, but the fields remain: a declared field becomes a real property of every new object.
Setting and reading properties
Both operations use the dot operator. Writing to a field puts a value in it, and reading uses the same expression where a value is expected:
let dog = new Dog();
dog.name = "Rex";
dog.age = 4;
console.log(dog.name);
console.log(dog.age);
Rex
4
Before you assign anything, a field holds undefined. This lesson's class has no constructor or initial values, so reading a field right after new Dog() gives undefined, and so does dog.name + " is " + dog.age built from it. The compiler does not warn about this here, because the lessons compile without strict mode. In a project that turns on strict mode, the compiler requires every field to get a value, either where it is declared or in the constructor. The next lesson covers constructors.
Each object has its own values
A field belongs to one object, not to the class as a whole:
let rex = new Dog();
let luna = new Dog();
rex.name = "Rex";
luna.name = "Luna";
console.log(rex.name, luna.name);
Rex Luna
Changing rex.name never affects luna.name, because the dot operator reaches into one particular object. That is the point of the expression rex.name: whose name? Rex's.
The exercise
The starter code gives you the class with its two declared fields, one dog, and a console.log that reads both fields. Nothing sets them yet, so the log would print undefined is undefined years old. Your task is to fill in the values.
- Set the name. Below
let dog = new Dog();assign the string"Rex"todog.name. - Set the age. Assign the number
4todog.age. Both assignments must come before theconsole.logline, which reads the values when it runs.
class Dog {
name: string;
age: number;
}
let dog = new Dog();
dog.name = "Rex";
dog.age = 4;
console.log(dog.name + " is " + dog.age + " years old");
The output is:
Rex is 4 years old
The + operator joins the strings, and it converts the number 4 to text when one side is a string.
Common mistakes
- Wrong types.
dog.age = "four"is reported asType 'string' is not assignable to type 'number'. The compiler still writes the JavaScript, so the program runs and would printfour, which is exactly the kind of bug the check exists to catch. Fix the error rather than ignoring it. - Misspelled or undeclared names.
dog.color = "brown"is reported asProperty 'color' does not exist on type 'Dog'. Plain JavaScript would quietly add a new property here, and TypeScript refuses unless the class declares it. - Reading before assigning. A field that was never given a value is
undefined. Order the assignments before the code that uses them. - Using the class name instead of the object.
Dog.namedoes not reach a dog's field. Fields are reached through an object, as indog.name. - Forgetting the declaration. A field you want to use must appear in the class body with its type.
Key takeaways
- Declare fields in the class body with a name and a type:
name: string;. - Set and read them with the dot operator on an object:
dog.name = "Rex". - Every object keeps its own values for each field.
- An unassigned field holds
undefined. - The compiler checks names and types, and the types disappear in the compiled JavaScript.