튜플이란?

🔆 튜플(Tuple)은 고정된 크기와 타입을 가지는 배열을 의미합니다. 튜플은 배열과 비슷하지만, 배열과는 달리 각 요소의 타입과 순서가 명확하게 정의된다

리스트 보다 더 정교한 검사를 원하면 튜플을 사용하게 현명다고 생각한다

리스트

🔆 리스트는(List) 동일한 타입의 요소들이 순서대로 저장된 데이터 구조입니다.

// arr1과 arr2는 같은 타입을 의미합니다 두 리스트 모두 string 타입만을 원소 가질 수 있습니다.
const arr1:string[] = ['a','b','c'] // 기본 배열 선언
const arr2:Array<string> = ['a','b','c'] // 제너릭 배열 선언

---

다른 타입 값 리스트에 추가

const arr1:string[] = ['a','b','c']
const arr2:Array<string> = ['a','b','c']
// Argument of type 'number' is not assignable to parameter of type 'string'.(2345)
arr1.push(0) // 위와 같은 에러 발생 

javascript와 typescript 리스트 차이점

JavaScript
자바스크립트는 동적 타입을 지원하며, 배열의 요소 타입에 대한 제한이 없습니다. 즉, 배열에 어떤 타입의 값이든 넣을 수 있다.
TypeScript
타입스크립트는 정적 타입 시스템을 제공하므로 배열의 요소 타입을 명시하고 타입 검사를 수행합니다. 이를 통해 배열의 각 요소가 특정 타입이어야 한다는 것을 보장할 수 있습니다.

튜플 사용

기본사용 법

const tuple1: [number, string, boolean] = [0, "string", false];

tuple1[0] = 100 // 에러 없이 실행
tuple1[0] = "hello" // 에러 발생  Type 'string' is not assignable to type 'number'.(2322) 
tuple1[1] = 'script' // 에러 없이 실행
tuple1[1] = 99 // 에러 발생 Type 'number' is not assignable to type 'string'.(2322)
tuple1[2] = true // 에러 없이 실행
tuple1[2] = 3 // 에러 발생  Type 'number' is not assignable to type 'boolean'.(2322)

튜플 스프레드(spread) 기본 문법

const tuple1: [number, string] = [1, "apple"];
const tuple2: [boolean, ...string[]] = [true, "banana", "cherry"];
const details: [number, string, boolean] = [1, "Alice", true];


// 튜플 결합
const combined: [number, string, boolean, ...string[]] = [...tuple1, ...tuple2];
console.log(combined); // [1, "apple", true, "banana", "cherry"]

// 스프레드를 사용하여 함수 호출
function printDetails(id: number, name: string, active: boolean) {
    console.log(`ID: ${id}, Name: ${name}, Active: ${active}`);
}
printDetails(...details);

// 첫 번째 두 요소를 분리
let [first, second, ...rest]: [number, string, boolean, ...string[]] = combined;
console.log(first); // 1
console.log(second); // "apple"
console.log(rest); // [true, "banana", "cherry"]

튜플 스프레드(spread) 타입 문법

// 타입 조작
type Tuple1 = [number, string];
type Tuple2 = [boolean, ...string[]];

// 튜플1과 튜플2를 결합한 타입
type CombinedTuple = [...Tuple1, ...Tuple2];

// CombinedTuple 타입은 [number, string, boolean, ...string[]]을 가지게 됩니다
let combinedTuple: CombinedTuple = [1, "apple", true, "banana", "cherry"];

// --------------------------------------------
// 타입 추론
let tuple1: [number, string] = [1, "apple"];
let tuple2: [boolean, string] = [true, "banana"];

// 스프레드를 사용하여 결합
let combined: [number, string, boolean, string] = [...tuple1, ...tuple2];

console.log(combined); // [1, "apple", true, "banana"]

readonly를 사용해서 튜플 타입을 고정하자

개발을 하다 튜플 변수에 실수로 새롭운 index를 .push()로 추가될 경우와 데이터가 변형될 경우를 대비해서 readonly를 사용하자

const tuple: readonly [number, string] = [1, "hello"];

tuple[0] = 10 // 오류 발생 Cannot assign to '0' because it is a read-only property.(2540)
tuple.push(true) // 오류 발생Property 'push' does not exist on type 'readonly [number, string]'.(2339)

/* 변수에 데이터 바뀌면 안되는 경우에 readonly를 사용해서 데이터 변형을 막을 수 있다*/

자료 출처

• 타입스크립트 교과서 (조현영 지음)
  타입스크립트 교과서 구매링크