TypeScript Objects

Related fields, one type

An array stores many values of one type. An object stores a handful of values that belong together, even if the types differ. A point on a map has an x and a y. A player has a name and a score. Those are not four loose variables. They are one record.

This is the C++ struct chapter in TypeScript form. You name the shape, then you create values that match it. Each value is an object with its own fields.

Type the shape

Write the field names and their types inside braces. That is an object type. Then create a value with the same field names. The compiler checks that every required field is present and has the right type.

const p: { x: number; y: number } = { x: 3.0, y: 4.0 };
console.log(p.x + ", " + p.y);

The type sits after the colon. The value sits after the equals. Both use braces, but they are not the same thing: one is a shape for the checker, the other is data at runtime.

The dot operator

p.x means “the x field of p”. The dot does not copy the object. It selects one member. You can use a field anywhere you would use a variable of that field’s type: print it, add to it, pass it to a later function.

const hero: { name: string; score: number } = {
  name: "Nia",
  score: 1200,
};
hero.score = hero.score + 50;
console.log(hero.name + " has " + hero.score);

Mix types freely inside one object: numbers, text, booleans. Keep the fields related. A player record should not also store a random file path. const on hero means you will not reassignhero itself. You can still change hero.score.

Copy the fields, not the name

In C++, Point b = a copies every field. In TypeScript, const b = a copies thereference: both names point at the same object. Changing b.x would changea.x. To get a second independent point, write a new object and copy the numbers.

const a: { x: number; y: number } = { x: 2.0, y: 5.0 };
const b: { x: number; y: number } = { x: a.x, y: a.y };
b.x = 9.0;

console.log("a: " + a.x + ", " + a.y);
console.log("b: " + b.x + ", " + b.y);

After this program, a.x is still 2 and b.x is 9. Two objects, two copies of the fields. That matches what assignment does for a C++ struct.

Many values, one shape

Repeating { x: number; y: number } on every variable gets old. The next two chapters give that shape a name. For now, know the pieces.

Object now, class later

An object type is enough for a record: data you group and pass around. Classes add methods, constructors, and private fields. You do not need those yet. If you catch yourself writing x1, y1,x2, y2, stop and make a point object.

Next: name a small set of choices with an enum instead of magic numbers or loose strings.