Tuple 타입 참고 사항

*본 게시글은 타입스크립트에서 tuple 타입에 대한 참고 게시글입니다.

 

 

tuple 타입은 길이와 요소의 타입이 고정된 타입스크립트의 타입이다. 즉, 대괄호 안에 명시된 타입의 수만큼 배열의 요소가 존재해야 되며, 요소가 많아도 안되고 적어도 안된다. 당연히 배열의 각 요소의 타입도 일치해야 한다. 

 

 

push 메서드

const items: [string, string] = ["item1", "item2"];

items.push("item3");

console.log(items);

변수 items에 위와 같이 tuple 타입이 명시되어 있고, 명시된 타입과 일치하는 배열이 초기값으로 설정되어 있다. 

 

게시글의 상단에서 언급한 대로라면 배열의 요소의 수가 tuple 타입과 일치해야 하며 많아도 안되는데 push 메서드를 사용하니 타입 에러는 발생하지 않는다. 

 

*배열 메서드 pop도 동일한 문제가 발생합니다.

 

위의 문제는  push 메서드를 사용하여 배열의 마지막 요소로 추가하기 때문에 기존에 명시한 tuple 타입의 순서는 바뀌지 않고 뒤에 추가되는 것이기 때문에 문제가 되지 않을 수 있다고 생각할 수 있다. 하지만 해당 문제는 tuple 타입의 사용 이유가 사라지는 부분이라고 생각하며, 타입을 엄격히 지키기 위해 타입스크립트를 사용하는 이유에도 흠이 생기는 것이라 생각한다.

 

위의 문제를 방지하고 싶다면 아래의 방법으로 코드를 변경하면 좋을 것 같다.

 

type Items = readonly [string, string];

const items: Items = ["item1", "item2"];

items.push("item3"); // 타입 에러 발생

console.log(items);

우선 Items라는 타입 별칭을 사용하여 기존의 tuple 타입을 명시해 주었으며, 추가로 readonly 키워드를 사용해 주었다.

 

tuple 타입에 readonly 키워드를 사용해주면 tuple 타입의 재기능을 할 수 있게 된다.

 

이제 tuple 타입의 변수 items는 push 메서드를 사용할 경위 해당 속성이 없다는 타입 에러가 발생하게 된다.