Working with Arrays & Objects

Typed arrays, tuples, and TypeScript's built-in utility types

Written by Andrew Lee Jenkins14 min read1 activity

Buzz presents

typed arrays, tuples and handy helpers like Partial and Pick make youre data sooo tidy. you got this, friend!typed arrays, tuples and handy helpers like Partial and Pick make youre data sooo tidy. you got this, friend!

Buzz holds an egg tray of matching eggs and a three compartment bento box with different foods — Arrays hold many of one type and tuples hold a fixed set

Think about playlists for a sec. Some have a strict order, like a band's setlist for a concert. Others are just a pile of songs you hit shuffle on. TypeScript has tools for both kinds.

Typed arrays are your shuffle playlists, tuples are your strict setlists, and utility types are shortcuts for patterns you'd otherwise type out over and over (and over).

Typed Arrays#

You've already seen the basics of typed arrays. Let's go a lil deeper.

// Array of objects
interface Task {
  id: number;
  title: string;
  completed: boolean;
}
 
const tasks: Task[] = [
  { id: 1, title: "Learn TypeScript", completed: false },
  { id: 2, title: "Build a project", completed: false },
  { id: 3, title: "Deploy to production", completed: false }
];
 
// Array methods are fully typed
const completedTasks = tasks.filter(task => task.completed);
// TypeScript knows completedTasks is Task[]
 
const titles = tasks.map(task => task.title);
// TypeScript knows titles is string[]
 
const firstTask = tasks.find(task => task.id === 1);
// TypeScript knows firstTask is Task | undefined

Tuple Types#

Tuples are arrays with a set number of items, where every position has its own specific type.

// A tuple with exactly [string, number]
let coordinates: [number, number] = [40.7128, -74.0060];
 
// Each position has its own type
let userInfo: [string, number, boolean] = ["Alice", 28, true];
 
// TypeScript enforces the exact types at each position
coordinates = [10, 20];           // OK
coordinates = [10, "twenty"];     // Error! string is not number
coordinates = [10, 20, 30];      // Error! Too many elements
 
// Accessing tuple elements gives you the right type
const lat = coordinates[0];  // type is number
const lng = coordinates[1];  // type is number

Named Tuples (for clarity)#

// Named tuple elements make the code self-documenting
type Point = [x: number, y: number];
type HttpResponse = [status: number, body: string, headers: Record<string, string>];
 
const point: Point = [10, 25];
const response: HttpResponse = [200, "OK", { "content-type": "application/json" }];

The Record Type#

Record makes an object type where every key is one type and every value is another.

// Record<KeyType, ValueType>
type Scores = Record<string, number>;
 
const playerScores: Scores = {
  alice: 150,
  bob: 200,
  charlie: 175
};
 
// Useful for dictionaries and lookup tables
type StatusMessages = Record<number, string>;
 
const httpMessages: StatusMessages = {
  200: "OK",
  404: "Not Found",
  500: "Internal Server Error"
};

Utility Types: Partial, Required, Pick, Omit#

TypeScript ships with built-in utility types that reshape types you already have. They save you from writing nearly-identical interfaces again and again, which gets old FAST.

Partial - Make all properties optional#

interface User {
  name: string;
  email: string;
  age: number;
}
 
// Partial<User> makes everything optional
type UpdateData = Partial<User>;
 
// Now you can update just one field
function updateUser(id: number, updates: Partial<User>) {
  // updates could be { name: "New Name" } or { age: 30 } or both
}
 
updateUser(1, { name: "Alice" });         // OK - only updating name
updateUser(1, { age: 30, email: "a@b" }); // OK - updating age and email

Required - Make all properties required#

interface Config {
  host?: string;
  port?: number;
  debug?: boolean;
}
 
// Required<Config> makes everything mandatory
type FullConfig = Required<Config>;
 
const config: FullConfig = {
  host: "localhost",  // Must provide all three
  port: 3000,
  debug: false
};

Pick - Select specific properties#

interface User {
  id: number;
  name: string;
  email: string;
  password: string;
  createdAt: Date;
}
 
// Only keep the properties you need
type PublicUser = Pick<User, "id" | "name" | "email">;
 
// PublicUser only has id, name, and email (no password!)
const displayUser: PublicUser = {
  id: 1,
  name: "Alice",
  email: "[email protected]"
};

Omit - Remove specific properties#

// Remove properties you don't want
type CreateUserInput = Omit<User, "id" | "createdAt">;
 
// CreateUserInput has name, email, password (no id or createdAt)
const newUser: CreateUserInput = {
  name: "Bob",
  email: "[email protected]",
  password: "secure123"
};

Mapped Types (Preview)#

Buzz tweezers three items from a toolbox into a tray, leaving a brass padlock behind — Pick keeps only the properties you need

Mapped types let you transform every single property in a type. Fun fact, the utility types up above are actually built with mapped types.

// This is how Partial works under the hood
type MyPartial<T> = {
  [K in keyof T]?: T[K];
};
 
// Make all properties readonly (TypeScript already ships this one as Readonly<T>)
type MyReadonly<T> = {
  readonly [K in keyof T]: T[K];
};
 
// Make all property values strings
type Stringify<T> = {
  [K in keyof T]: string;
};
 
interface User {
  name: string;
  age: number;
}
 
type StringUser = Stringify<User>;
// { name: string; age: string }

Putting It All Together#

Here's a realistic example that mixes all of this together.

interface Product {
  id: number;
  name: string;
  price: number;
  description: string;
  category: string;
  inStock: boolean;
}
 
// For creating products (no id yet)
type CreateProduct = Omit<Product, "id">;
 
// For updating products (all fields optional)
type UpdateProduct = Partial<Omit<Product, "id">>;
 
// For product listings (just what the user sees)
type ProductCard = Pick<Product, "id" | "name" | "price" | "inStock">;
 
// For a price lookup table
type PriceLookup = Record<string, number>;
 
const prices: PriceLookup = {
  "widget": 9.99,
  "gadget": 19.99,
  "doohickey": 4.99
};

TL;DR#

Typed arrays make sure every item matches a specific type
Tuples have a fixed length and a specific type at each position
Record<K, V> makes dictionary-style object types
Partial<T> makes every property optional (handy for updates)
Pick<T, Keys> grabs specific properties out of a type
Omit<T, Keys> drops specific properties from a type
Utility types save you from rewriting nearly the same interface again

What's Next?#

You've got a solid handle on TypeScript's type system now. Next up you'll set up a real TypeScript project from scratch, configure the compiler, and learn the tsconfig.json options that actually matter.

This lesson ends with a short activity.