TypeScript Tutorial: Objects
Object types, index signatures, structural typing, object spread, and working with Object methods.
Object Type Annotations
```typescript
// Inline object type
const user: { name: string; age: number } = { name: "Alice", age: 30 };
// Type alias (preferred for reuse)
type Point = { x: number; y: number };
// Interface (preferred for object shapes used across multiple files)
interface Config { host: string; port: number; }
```
---
Index Signatures — Dynamic Keys
When you don't know the keys in advance:
```typescript
type StringMap = { [key: string]: string };
type NumberMap = { [key: string]: number };
const headers: StringMap = {
"Content-Type": "application/json",
"Authorization": "Bearer token123",
};
```
---
Structural Typing
TypeScript uses structural typing — if an object has the required shape, it satisfies the type:
```typescript
interface HasName { name: string; }
function greet(x: HasName): string {
return `Hello, ${x.name}`;
}
// Any object with a name property works
greet({ name: "Alice", age: 30 }); // ✓
greet({ name: "Bob", role: "admin" }); // ✓
```
---
Object Spread and Merge
```typescript
const defaults = { theme: "light", language: "en" };
const overrides = { theme: "dark" };
const merged = { ...defaults, ...overrides };
// { theme: "dark", language: "en" }
```
---
What's Next?
Next: **Interfaces** — defining reusable object shapes and contracts.
What you'll learn in this TypeScript objects tutorial
This interactive TypeScript tutorial has 13 hands-on exercises. Estimated time: 18 minutes.
- Object types — shape your data — In TypeScript, every object has a type that describes its shape. The most direct way is an inline type annotation — but …
- Structural typing — shape matters, name doesn't — TypeScript uses **structural typing** — a value satisfies a type if it has the right shape, regardless of how it was cre…
- Index signatures — dynamic key-value maps — When you need an object with dynamic keys (you don't know the keys in advance), use an index signature `[key: string]: V…
- Object spread — merge and override — The spread operator `...` creates new objects by merging existing ones. Later properties override earlier ones. TypeScri…
- Nested objects — complex data shapes — Objects can be nested. TypeScript tracks types at every level — you get autocomplete and type checking even deep inside …
- Object.keys, entries, values — iterate safely — `Object.keys()`, `Object.values()`, and `Object.entries()` let you iterate over an object's properties. TypeScript types…
- Computed property names — dynamic keys — Square bracket notation lets you create objects with dynamic key names. Combined with TypeScript, you can create type-sa…
- Object.assign — merge with type safety — `Object.assign()` merges objects in place. TypeScript infers the result type. However, spread syntax is generally prefer…
- Destructuring objects from function returns — Functions that return objects can be destructured at the call site. This is the standard pattern for returning multiple …
- Freezing objects — true runtime immutability — `Object.freeze()` prevents runtime mutation. When combined with `as const`, TypeScript also makes the type fully immutab…
- Pick specific properties with object spread — You can extract specific properties from an object without destructuring the rest. This is useful when preparing data fo…
- Object type guards — narrow at runtime — A type guard function checks an object's shape at runtime. TypeScript narrows the type after the check, giving you safe …
- Satisfies operator — validate without widening — The `satisfies` operator (TypeScript 4.9+) validates that a value matches a type without changing the inferred type. Thi…
TypeScript Objects concepts covered
- Object Type Annotations
- Index Signatures — Dynamic Keys
- Structural Typing
- Object Spread and Merge
- What's Next?