Type Script 의 tuple type 이란?

tuple type?

TypeScript에서 일반 배열은 동일한 타입의 요소를 가질 수 있지만 요소의 개수는 고정되지 않는다.

let array : (string | number)[] = ['lsiron', 28]

 

반면, 튜플(Tuple) 타입은 배열의 한 종류로, 고정된 개수의 요소를 가지며 각 요소는 미리 정해진 타입을 가진다.

 

튜플을 사용하면 배열 요소의 타입과 개수를 정확히 지정할 수 있어, 보다 엄격한 타입 검사를 할 수 있다.

 

즉, 요소의 위치까지 고려한 타입지정이 가능하다는 것 이다.

let array : [string, number] = ['lsiron', 28]

 

이 선언은 두 개의 요소를 가지는 튜플을 정의하며, 첫 번째 요소는 string 타입, 두 번째 요소는 number 타입이어야 한다.

 

이 튜플을 사용할 때는 각 요소의 순서와 위치, 그리고 타입을 정확히 맞춰야 한다.

 

튜플 타입에 대해 알아야 할 몇 가지 중요한 사항은 다음과 같다.

• 고정된 길이와 타입: 튜플은 고정된 길이와 각 위치에 대한 고정된 타입을 가진다.
• 옵셔널 요소: 튜플의 요소는 옵셔널로 선언될 수 있다. 옵셔널 요소는 반드시 마지막에 위치해야 한다.( 2개 이상도 가능하다. )

let optionalTuple: [string, number?] = ['lsiron', 28];  // 올바른 사용
optionalTuple = ['lsiron'];  // 올바른 사용
// optionalTuple = [28];  // 오류: 첫 번째 요소는 string 여야 함

 

number가 들어올 수도 있고 안 들어 올 수도 있다는 의미로 옵셔널 요소를 넣어주었기 때문에 사용할 때, number를 입력하지 않아도 에러가 발생하지 않는다.

• 스프레드 연산자: 튜플 타입에 스프레드 연산자를 사용할 수 있다. 이를 통해 가변 길이의 마지막 요소를 가질 수 있다.

function lsiron(...x :number[]){
    console.log(x)
}

lsiron(1, 2, 3, 4, 5, 6); // [1, 2, 3, 4, 5, 6] 출력

 

함수를 정의할 때 파라미터 왼쪽에 점 3개를 붙이면 rest parameter 였다.

 

rest parameter는 파라미터가 몇 개 들어올 지 모른다는 뜻으로 사용하는 파라미터이다.

 

x 자리에 입력한 파라미터들은 array에 담겨오기 때문에 array 처럼 타입지정을 해주는게 일반적이다. 

function lsiron(...x :[number, string]){
    console.log(x)
}

lsiron(111,'222'); // [111, '222'] 출력

 

허나 tuple을 이용해서 타입지정을 해주는 것도 가능하다.

let spreadTuple: [string, ...number[]] = ['lsiron', 28, 29, 30, 31, 32, 33];  // 올바른 사용

spreadTuple = ['lsiron'];  // 올바른 사용

위 예시에서 ...number[] 의 뜻은 array 가 들어오지만 아직 몇 개 인지는 모른다는 뜻이다. 즉, rest parameter처럼 마음 껏 넣을 수 있다.

 

array에서의 rest parameter의 형태를 유의하면 좋을 듯 하다.

 

튜플 사용 예제

 

다음은 튜플을 사용하는 몇 가지 예제이다.

• 기본적인 튜플 사용

let person: [string, number];
person = ["Alice", 30];
console.log(person[0]);  // "Alice"
console.log(person[1]);  // 30

• 요소에 대한 타입 검사

let tuple: [number, string];
tuple = [42, "Answer"];
// tuple = ["Answer", 42];  // 오류: 타입이 맞지 않음

• 튜플과 배열 메서드: 튜플은 배열이므로 배열 메서드를 사용할 수 있지만, 메서드의 결과는 일반적으로 배열 타입을 반환한다.

let tuple: [number, string] = [1, "one"];
let array: Array<string | number> = tuple.concat([2, "two"]);  // [1, "one", 2, "two"]

• 튜플의 타입 추론: TypeScript는 함수에서 반환된 튜플의 타입을 자동으로 추론할 수 있다.

function getPerson(): [string, number] {
    return ["Alice", 30];
}
let person = getPerson();
console.log(person[0]);  // "Alice"
console.log(person[1]);  // 30

 

튜플은 배열보다 엄격한 타입 검사를 제공하므로, 데이터를 더 정확하게 다루고자 할 때 유용하다.

 

TypeScript의 강력한 타입 시스템을 활용하여 튜플을 적절히 사용하면, 코드의 안전성과 가독성을 크게 향상시킬 수 있다.

 

참조: 코딩애플