반응형
FCM 서버를 하다가 알림함수를 공통으로 사용하고자, 타입을 지정하는 와중 발생되어져서 바로 끄적
튜플 타입(Tuple Type) 이란?
TypeScript 에서 튜플 타입은 고정된 개수의 요소를 가지며, 각 요소의 타입이 정해진 배열을 의미합니다.
일반적인 배열은 모든 요소가 동일한 타입일 수 있지만, 튜플은 위치별로 다른 타입을 지정할 수 있습니다.
튜플 타입의 특징
1. 길이가 고정 : 튜플은 정의된 요소의 개수를 초과하거나 미만으로 요소를 가질 수 없습니다.
2. 위치별 타입 지정 가능: 각 위치에 특정 타입을 지정할 수 있습니다.
3. 순서가 중요 : 정의된 순서대로 타입을 사용해야 합니다.
# 튜플 타입의 예시
1. 기본 사용
let user: [number, string, boolean];
// 올바른 초기화
user = [1, "John", true];
// 잘못된 초기화 (순서나 타입 불일치)
user = ["John", 1, true]; // ❌ 에러: 순서가 다름
user = [1, "John"]; // ❌ 에러: 요소 개수가 다름
2. 튜플과 배열의 차이
- 튜플 : 각 요소의 타입과 순서가 고정.
- 배열 : 모든 요소의 타입이 동일
let tuple: [string, number] = ["Hello", 42];
let array: number[] = [1, 2, 3];
// 올바른 튜플
tuple = ["Hi", 123]; // ✅
// 잘못된 튜플
tuple = [123, "Hi"]; // ❌ 에러: 순서 불일치
tuple = ["Hi"]; // ❌ 에러: 길이 불일치
// 배열은 요소의 순서와 길이에 관계없이 동일한 타입이면 OK
array = [4, 5, 6]; // ✅
array = []; // ✅
# 튜플을 사용해야 하는 경우
- 고정된 데이터 구조를 다룰 때.
- 예 : [id, name , isActive] 처럼 고정된 데이터 형식이 필요한 경우. - 위치에 따라 의미가 달라지는 데이터를 다룰 때.
- 예 : (x,y) 좌표처럼 위치에 따라 타입이 달라지는 경우. - 함수의 반환 값에서 여러 데이터를 함께 리턴할 때.
예 : [success , message] 형태로 리턴
let coordinates: [number, number];
coordinates = [10, 20]; // ✅
coordinates = [10]; // ❌ 에러: 길이 불일치
coordinates = ["10", 20]; // ❌ 에러: 타입 불일치
# 튜플과 함수의 활용
1. 함수에서 튜플 반환
튜플을 사용하면 함수가 여러 값을 명확하게 리턴할 수 있습니다.
function getUserInfo(): [number, string] {
return [1, "Alice"];
}
const [id, name] = getUserInfo();
console.log(id); // 1
console.log(name); // "Alice"
2. 튜플을 함수의 매개변수로 사용
function printCoordinates(coord: [number, number]) {
console.log(`X: ${coord[0]}, Y: ${coord[1]}`);
}
printCoordinates([10, 20]); // ✅
printCoordinates([10]); // ❌ 에러: 길이 불일치
# 튜플과 TypeScript 유틸리티 타입
TypeScript 의 유틸리티 타입 Parameters<T> 와 ReturnType<T> 는 튜플을 활용해 함수의 매개변수와 반환 값을 추출합니다.
type MyFunction = (id: number, name: string) => void;
// MyFunction의 매개변수 타입을 튜플로 추출
type Params = Parameters<MyFunction>; // [number, string]
const args: Params = [42, "Alice"]; // ✅
결론
- 튜플은 순서와 타입이 고정된 배열으로 , 고정된 데이터 구조를 다룰 때 적합합니다.
- 일반 배열과 달리, 각 위치에 다른 타입을 지정할 수 있으며, 길이도 고정됩니다.
- 함수의 매개변수나 반환 값에서 유용하게 활용됩니다.
튜플 타입을 잘 활용하면 TypeScript 코드의 안전성과 가독성을 높일 수 있습니다. 🚀
반응형