Tuples

📘 手冊

• TypeScript ⟩

  • Tuple Types

  • readonly Tuple Types

  • Variadic Tuple Types (✳️ TS 4.0)

  • Labeled Tuple Elements (✳️ TS 4.0)

👥 相關

• ⭐️ Cheat sheet

A tuple type is a sort of Array type that knows exactly how many elements it contains, and exactly which types it contains at specific positions.

Cheatsheet

tuple

//          ╭── ⭐️ tuple ──╮
type Pair = [string, number];

function f(pair: Pair) {
  const a = pair[0];          // ⭐️ access elements by index
  const b = pair[1];
}

function f(pair: Pair) {
  const [a, b] = pair;        // ⭐️ by array destructuring
}
 
f(["hello", 42]);

optional?

// ⭐️ must be last            ╭─ ⭐️ ─╮
type Point = [number, number, number? ];
 
function f(point: Point) {
  const [x, y, z] = point;          // ⭐️ z: number | undefined
  console.log(`${point.length}`);   // ⭐️ length: 2 | 3
}

...rest

// ⭐️ rest element         ╭─ ⭐️ rest ─╮
type T1 = [string, number, ...boolean[] ];

// ⭐️ TypeScript 4.0 新功能：
// TS < 4.0 => T2 會產生："A rest element must be last in a tuple type"
type T2 = [string, ...boolean[], number];     // ⭐️ needn't be last

const a: T1 = ["hello", 1];
const b: T1 = ["beautiful", 2, true];
const c: T1 = ["world", 3, true, false, true, false, true];

Second Tab

Optional elements

• can only come at the end

• affect the type of length

// ⭐️ must be last            ╭─ ⭐️ ─╮
type Point = [number, number, number? ];
 
function f(point: Point) {
  const [x, y, z] = point;          // ⭐️ z: number | undefined
  console.log(`${point.length}`);   // ⭐️ length: 2 | 3
}

Rest elements

• Tuples can have rest elements, which have to be an array/tuple type.

• A tuple with a rest element has no set “length” - it only has a set of well-known elements in different positions.

code

// ⭐️ rest element         ╭─ ⭐️ rest ─╮
type T1 = [string, number, ...boolean[] ];

// ⭐️ TypeScript 4.0 新功能：
// TS < 4.0 => T2 會產生："A rest element must be last in a tuple type"
type T2 = [string, ...boolean[], number];     // ⭐️ needn't be last

const a: T1 = ["hello", 1];
const b: T1 = ["beautiful", 2, true];
const c: T1 = ["world", 3, true, false, true, false, true];

CodeSandbox

Tuples types can be used in rest parameters and arguments, so that the following:

// rest param ↴
//         ╭─ ⭐️ ─╮ ╭── ⭐️ tuple with rest elem ──╮
function f(...args: [string, number, ...boolean[]]) {
  const [name, version, ...input] = args;
  // ...╰──── ⭐️ array destructuring ───╯
}

is basically equivalent to:

function f(name: string, version: number, ...input: boolean[]) {
  // ...
}

Variadic Tuple Types

🚧 under construction ...

Labeled Tuple Elements

🚧 under construction ...