튜플의 나머지 요소

가변 길이 튜플

끝에 오는 나머지 요소

type Row = [string, ...number[]]
const r: Row = ["scores", 9, 8, 7]
console.log(r[0], r.length) // scores 4

고정된 부분은 필수입니다

type Row = [string, ...number[]]
const min: Row = ["label"] // ok, zero numbers
// const bad: Row = [] // Error: missing string
console.log(min)

앞에 오는 나머지 요소

type Trailing = [...number[], boolean]
const t: Trailing = [1, 2, 3, true]
console.log(t[t.length - 1]) // true

중간에 오는 나머지 요소

type Middle = [string, ...number[], boolean]
const m: Middle = ["start", 1, 2, false]
console.log(m[0], m[m.length - 1]) // start false

튜플당 나머지 요소 하나만 허용됩니다

// type Bad = [...string[], ...number[]] // Error: only one rest allowed
type Ok = [string, ...number[]]
const o: Ok = ["x", 1]
console.log(o)

나머지 튜플 구조 분해하기

type Row = [string, ...number[]]
const row: Row = ["scores", 9, 8]
const [label, ...values] = row
console.log(label, values) // scores [9, 8]

이름이 지정된 튜플 요소

type Range = [start: number, end: number]
const span: Range = [0, 10]
console.log(span[0], span[1]) // 0 10

나머지 요소의 레이블

type Args = [command: string, ...flags: string[]]
const a: Args = ["build", "--watch", "--minify"]
console.log(a[0], a.slice(1))

매개변수 목록으로 사용하는 나머지 튜플

type Params = [name: string, ...scores: number[]]
function report(...args: Params): string {
  const [name, ...scores] = args
  return name + ": " + scores.join(",")
}
console.log(report("Ada", 9, 8))

나머지 튜플이 중요한 이유

type CSVRow = [id: number, ...fields: string[]]
const row: CSVRow = [1, "Ada", "Engineer"]
console.log(row[0], row.slice(1))

빠른 확인

복습