🔶 Array vs Tuple

Array

const strArr: string[] = ['apple', 'kiwi'];
const numArr: Array<number> = [1, 2, 3];

• 위와 같이 배열에 타입을 지정해서 정의할 때 두 가지 방식으로 할 수 있다.

function printArr(arr: ***readonly*** string[]) {
	// arr.push 같은 것들 불가능 
}

// readonly 옵션을 줄 때는 Generic 사용 불가능 
function printArr(arr: ***readonly*** ~~Array<number>~~) {
}

• 전달된 인자를 함수 내부에서 변경하지 않게 하고 싶을 때 readonly라는 옵션을 줘서 타입으로 보장이 가능하다. 말 그대로 데이터를 읽을 수만 있게 된다.
  • 불변성을 유지하기 위해 readonly가 많이 쓰인다.
• readonly 옵션을 줄 때는 배열을 generic 타입으로 설정할 수 없다. 그래서 일관성 있는 코드를 짜기 위해서는 string[] 과 같은 식으로 작성하는 게 낫다.

Shadowed variable

• 전달된 인자의 이름을 함수 내에서 로컬 변수로 다시 덮어 씌우는 것
  • 위험하기 때문에 하지 않는 것이 좋음

function printArr(arr: ***readonly*** string[]) {
	arr[0] = 'papaya'; // Index signature in type 'readonly string[]' only permits reading.ts(2542)
}

function printArr(arr: ***readonly*** string[]) {
	arr = ['SHADOW']; // 에러 안 뜸
}

• TS config로 방지할 수 있는 방법은 없음
• ESLint와 같은 툴로 컴파일 때 방지할 수 있음

Tuple

• JavaScript에 없는 타입
• 서로 다른 타입이면서 고정된 개수만큼 element를 담을 수 있는 배열
  • 불변하는 구조, 특정 순서나 패턴일 때 유용

type rgb = number | string;

const rgbColor1: [rgb, rgb, rgb] = [255, 0, 255];
const rgbColor2: [rgb, rgb, rgb] = ['FF', 'FF', '00'];

• 튜플의 타입은 생략할 수 있고 생략하면 할당된 값으로 타입이 정의된다.
• 객체보단 간결하지만, 객체만큼 ‘자체 문서화’ 되진 않는다. → 작고 명백한 데이터 구조에 적합
• 배열 내장 함수들을 사용할 수 있지만 값을 추가하거나 변경할 때 처음 할당된 값의 타입만 허용한다.

const person: [string, number] = ['Millie', 391];
person[0] // Millie
person[1] // 391

// destructuring
const [name, age] = person;