● 튜플이란?
튜플이란, 자바스크립트에서는 일반 배열로 인식되지만 타입스크립트에서는 정해진 길이의 요소와 특수 배열을 입력해야지 오류가 뜨지 않는 것을 이야기한다.
const person = {
name : 'daeun',
age : 19,
hobbies : ['Sports', 'Cooking'],
role : [2, 'front-developer']
}
만약에 위와 같은 객체가 있다고 했을 때, role에 있는 배열의 구조의 타입들을 명확하게 하고 싶을 땐 어떻게 해야할까?
const person : {
name : string;
age : number;
hobbies : string[];
role : [number, string];
} = {
name : 'daeun',
age : 19,
hobbies : ['Sports', 'Cooking'],
role : [2, 'front-developer']
}
위와 같이 구조화 해주면 된다. 이렇게 코드를 적은 이후에, 구조에 벗어난 할당을 해버리게 된다면?
const person : {
name : string;
age : number;
hobbies : string[];
role : [number, string];
} = {
name : 'daeun',
age : 19,
hobbies : ['Sports', 'Cooking'],
role : [2, 'front-developer']
}
// 구조에 벗어난 할당 (에러)
person.role[1] = 3;
에러가 뜨게 된다.
하지만 예외적으로 push를 사용하게 되면 컴파일 에러가 뜨지 않고 그대로 코드에 반영이된다.
const person : {
name : string;
age : number;
hobbies : string[];
role : [number, string];
} = {
name : 'daeun',
age : 19,
hobbies : ['Sports', 'Cooking'],
role : [2, 'front-developer']
}
// 구조에 벗어난 할당 (에러)
person.role[1] = 3;
// pushs는 예외적으로 허용됨
person.role.push('admin');
// 아래도 에러처리됨
person.role = [2, 'front-developer', 'admin']
하지만 아래와 같이 처음에 구조화할 때 배열안에 새로운 요소를 넣게되면 에러가 뜨게 된다.
const person : {
name : string;
age : number;
hobbies : string[];
role : [number, string];
} = {
name : 'daeun',
age : 19,
hobbies : ['Sports', 'Cooking'],
role : [2, 'front-developer', 'admin'] // 에러뜨게됨
}