TypeScript Academy · Lesson

Object Destructuring Types

Type destructured object properties without confusing rename syntax.

Object Destructuring Types is a free TypeScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the TypeScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Destructuring Meets Types

Object destructuring pulls properties out of an object into local variables. With TypeScript, you can annotate the destructured shape — but the syntax has a famous trap. Let us get it right.

Basic Object Destructuring

Plain destructuring extracts properties by name. TypeScript infers each variable's type from the source object.

const user = { name: "Ada", age: 36 }
const { name, age } = user
console.log(name, age) // Ada 36

Annotating the Whole Pattern

To annotate destructured variables, you put the type after the entire pattern, describing the object shape — not after each variable.

const { name, age }: { name: string; age: number } = {
  name: "Leo",
  age: 5,
}
console.log(name, age)

Destructuring Function Parameters

A very common pattern: destructure a parameter object directly in the signature, annotating its shape. Inside the body, name and id are typed locals.

function greet({ name }: { name: string }) {
  return "Hi " + name
}
console.log(greet({ name: "Sam" }))

The Colon Confusion Trap

In destructuring, a colon means rename, not annotate. Writing { name: string } creates a variable called string holding the value of name — almost never what you want.

const user = { name: "Ada" }
const { name: renamed } = user // renamed holds "Ada"
console.log(renamed) // Ada
// 'name' is NOT defined here

Rename and Annotate Together

If you must both rename and type, rename with a colon, then annotate the whole pattern. The shape annotation still uses the original property names.

const { name: who }: { name: string } = { name: "Ada" }
console.log(who) // Ada

Using a Named Type

For anything non-trivial, prefer a named interface over an inline shape. It reads better and is reusable.

interface User {
  name: string
  age: number
}
function show({ name, age }: User) {
  console.log(name + " is " + age)
}
show({ name: "Ada", age: 36 })

Destructuring Only Some Properties

You do not have to extract every field. Pick what you need; the rest of the object's type is ignored for the locals you create.

interface User { name: string; age: number; email: string }
function label({ name }: User) {
  return name.toUpperCase()
}
console.log(label({ name: "ada", age: 1, email: "a@b.c" }))

Destructuring Return Values

When a function returns an object, you can destructure the result immediately. Types flow from the return type onto your locals.

function makePoint(): { x: number; y: number } {
  return { x: 1, y: 2 }
}
const { x, y } = makePoint()
console.log(x + y) // 3

Collecting the Rest

A rest pattern gathers remaining properties into a new object. TypeScript types it as the source minus the extracted keys.

interface User { id: number; name: string; age: number }
const u: User = { id: 1, name: "Ada", age: 36 }
const { id, ...rest } = u
console.log(id, rest.name, rest.age)

Inline vs Named Recap

Inline shapes are fine for one-off, tiny patterns. Reach for a named type as soon as the shape grows or repeats. And remember: colon renames, the annotation comes after the closing brace.

interface Opts { verbose: boolean }
const run = ({ verbose }: Opts) => verbose ? "loud" : "quiet"
console.log(run({ verbose: true }))

Quick Check

Test your understanding of typed object destructuring.

Recap

Type annotations on destructuring go after the entire pattern and describe the object shape. A colon inside the pattern renames a binding, not annotates it. Destructure function parameters and return values with shape annotations or named types, extract only the fields you need, and use a rest pattern to collect the remainder.

Frequently asked questions

Is the “Object Destructuring Types” lesson free?

Yes — the full text of “Object Destructuring Types” is free to read here on the web, and the TypeScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the TypeScript Academy course, upgrade to CoddyKit PRO.

What will I learn in “Object Destructuring Types”?

Type destructured object properties without confusing rename syntax. You practise TypeScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start TypeScript Academy?

No prior experience is required. TypeScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Object Destructuring Types” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this TypeScript Academy lesson?

Yes. Every TypeScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to TypeScript Academy