Arrays, Objects and Nested Shapes

Real programs do not pass around a lone number. They pass lists of orders, and each order has a customer, and each customer has an address. If you cannot describe those shapes, TypeScript has nothing to check and you are back to guessing what a function receives. This lesson covers arrays, objects and the two stacked together.

Arrays

Put [] after the type of the items.

const prices: number[] = [10, 20, 30];
const tags: Array<string> = ["new", "sale"];

prices.push("40");
tags.push(5);

arrays.ts(4,13): error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.
arrays.ts(5,11): error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

number[] and Array<number> mean the same thing. Most people write number[]. Pick one and keep it.

With a starting value, you can skip the annotation. const prices = [10, 20, 30] is already a number[]. The annotation matters for an empty array.

const names: string[] = [];
names.push("Ana");
names.push(7);

empty.ts(3,12): error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.

Objects

An object type lists each property and its type.

const product: { title: string; price: number } = {
  title: "Notebook",
  price: 120,
};

console.log(product.prise);
product.price = "cheap";

const broken: { title: string; price: number } = { title: "Pen" };
const extra: { title: string } = { title: "Pen", color: "blue" };

objects.ts(6,21): error TS2551: Property 'prise' does not exist on type '{ title: string; price: number; }'. Did you mean 'price'?
objects.ts(7,1): error TS2322: Type 'string' is not assignable to type 'number'.
objects.ts(9,7): error TS2741: Property 'price' is missing in type '{ title: string; }' but required in type '{ title: string; price: number; }'.
objects.ts(10,50): error TS2353: Object literal may only specify known properties, and 'color' does not exist in type '{ title: string; }'.

Four different mistakes, four messages. A misspelled property is does not exist. A wrong value is not assignable. A missing property says what is required. An extra property in a fresh object literal is flagged because it is almost always a typo. Read the first sentence of each message and you know which kind you have.

Nested shapes

An order has a customer, and a list of lines. Typing that inline gets ugly fast, so give the shape a name with type. Lesson 8 compares this with interface. For now, type is enough.

type Order = {
  id: number;
  customer: { name: string; city: string };
  lines: { sku: string; qty: number; price: number }[];
};

const order: Order = {
  id: 1001,
  customer: { name: "Ana Reyes", city: "Manila" },
  lines: [
    { sku: "NB-1", qty: 2, price: 120 },
    { sku: "PN-4", qty: 5, price: 15 },
  ],
};

let total = 0;
for (const line of order.lines) {
  total += line.qty * line.price;
}

console.log(order.customer.city, total);

Manila 315

Read the type from the outside in. An Order has an id, a customer object and a lines array. Each line is an object with three properties. Now a typo like order.customer.cty is an error, and so is a line with no qty. When you rename a property later, the compiler lists every place that still uses the old name.

Where the compiler stops helping

An array type says what the items are. It does not promise that an item exists.

const prices: number[] = [10, 20, 30];
const missing = prices[5];

console.log(typeof missing);

undefined

The compiler treats missing as a number, but at run time it is undefined. There is a setting that makes the compiler stricter about this, and we meet it in the tsconfig.json lesson. Until then, check the length or use a loop when the index is not certain.

Common mistakes

• Writing object or {} as the type and then wondering why no properties are allowed. Describe the properties.
• Forgetting that arrays of objects need the brackets after the whole object type: { sku: string }[].
• Trusting array[i] without checking the index.

If you skip this and type everything as any, your editor stops suggesting property names, and a typo in customer.cty turns into undefined in the middle of a report. How many places in your own code pass an object around without saying what is in it?