[튜플]

● 튜플이란?

튜플이란, 자바스크립트에서는 일반 배열로 인식되지만 타입스크립트에서는 정해진 길이의 요소와 특수 배열을 입력해야지 오류가 뜨지 않는 것을 이야기한다.

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'] // 에러뜨게됨
}