Objects, Arrays & Tuples

📦 Objects, Arrays & Tuples

🏠 Object Types

Basic Object Type Annotation

Objects in TypeScript are typed by listing their properties and types:

Copyconst person: { name: string; age: number } = {
  name: "Alice",
  age: 30
};

// ✅ Works
console.log(person.name);  // "Alice"

// ❌ Error! Property 'email' does not exist
console.log(person.email);

Optional Properties

Use a question mark (?) to mark a property as optional:

Copyconst user: { name: string; email?: string } = {
  name: "Bob"
  // email is optional, so it's fine to omit it
};

// ✅ Both work:
const user2 = { name: "Charlie", email: "charlie@example.com" };
const user3 = { name: "Diana" };  // No email property

Readonly Properties

Use readonly to prevent a property from being changed after creation:

Copyconst config: { readonly apiKey: string; port: number } = {
  apiKey: "secret123",
  port: 3000
};

config.port = 4000;  // ✅ Fine, port is mutable
config.apiKey = "newsecret";  // ❌ Error! Cannot assign to readonly property

Nested Objects

Objects can contain other objects:

Copyconst company: {
  name: string;
  address: {
    city: string;
    zipCode: number;
  }
} = {
  name: "TechCorp",
  address: {
    city: "San Francisco",
    zipCode: 94105
  }
};

console.log(company.address.city);  // "San Francisco"

📋 Arrays

Array Type Syntax

Arrays are typed by specifying the type of their elements. Use either syntax:

Copyconst numbers: number[] = [1, 2, 3];
const names: string[] = ["Alice", "Bob"];
const flags: boolean[] = [true, false];

Copyconst numbers: Array<number> = [1, 2, 3];
const names: Array<string> = ["Alice", "Bob"];

Type Safety with Arrays

TypeScript catches type mismatches in arrays:

Copyconst scores: number[] = [95, 87, 92];

// ✅ Works - adding a number
scores.push(88);

// ❌ Error! Argument of type 'string' is not assignable to parameter of type 'number'
scores.push("100");

// ✅ IDE knows scores[0] is a number
const firstScore = scores[0];  // Type: number

Arrays of Objects

Combine array and object types for realistic data structures:

Copyconst users: { name: string; age: number }[] = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 }
];

// ✅ TypeScript knows users[0] is an object with name and age
console.log(users[0].name);  // "Alice"

🎯 Tuples

Basic Tuple Syntax

Copyconst point: [number, number] = [10, 20];
const rgb: [number, number, number] = [255, 128, 0];
const response: [string, number] = ["success", 200];

// ❌ Error! Type '[number, number, string]' is not assignable to type '[number, number]'
const badPoint: [number, number] = [10, 20, "invalid"];

// ❌ Error! Length mismatch
const anotherBad: [number, number] = [10];

Tuples with Optional Elements

Use ? to make tuple elements optional:

Copyconst maybe: [string, number?] = ["hello"];  // ✅ Fine
const also: [string, number?] = ["hello", 42];  // ✅ Also fine

Tuples with Named Elements

For clarity, you can name tuple elements:

Copyconst namedTuple: [x: number, y: number] = [5, 10];
const response: [status: string, code: number] = ["OK", 200];

// Names make the code self-documenting:
console.log(`Response: ${response.status} (${response.code})`);

Readonly Tuples

Prevent tuple elements from being modified:

Copyconst coordinates: readonly [number, number] = [5, 10];

// ❌ Error! Cannot assign to readonly property
coordinates[0] = 20;

🔀 Union Types (Preview)

Copyconst id: string | number = 42;  // ✅ Can be string or number
id = "user-123";  // ✅ Still valid

const values: (string | number)[] = [1, "two", 3];  // Array of mixed types

💻 Coding Challenges

🎯 What's Next

Now that you can type objects and arrays, we'll learn Interfaces — the TypeScript way to define reusable object shapes and create contracts that multiple objects can implement.