We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.

This lesson's interactive features are locked, please to keep using them

Named Tuples

To be fair, position-based access isn't very descriptive. Luckily, you can label tuple elements (sometimes called "named tuples"). So, instead of this:

type UserData = [string, number, boolean];

We can do this:

type UserDataLabeled = [name: string, age: number, isAdmin: boolean];

Labels make your code more "self-documenting".

You might hear people say "there's no such thing as self-documenting code". Those people are just mad because they write terrible code. If you name things well and keep things simple, you'll still need comments occasionally, but you won't need them as often.

When you hover over a variable in your editor, you'll see names instead of just positions:

// Your editor shows the full type:
// [name: string, age: number, isAdmin: boolean]
function getUser(): UserDataLabeled {
  return ["Frodo", 33, false];
}

Labels Are Just Documentation

The labels are quite literally just names for the TypeScript tooling, they don't change how the values are accessed. Say I have a named tuple like this:

const user: [name: string, age: number] = ["Bilbo", 111];

And then I try to destructure in reverse order:

const [age, name] = user;
console.log(age); // "Bilbo"
console.log(name); // 111

The variable names I choose when destructuring don't matter: only the positions do.

Assignment

The formatTicket function accepts a Ticket tuple and returns a formatted string describing the ticket.

Expected format: #1 Your app stinks! [WONTFIX]