TIL | Array, readonly, Tuple

Array, readonly, Tuple,

Array

const fruits: string[] = ["1", "2"];
const fruits: number[] = [1, 2];
const fruits: Array<string> = ["1", "2"]; // 제네릭 챕터에서 다시 다룰 예정
const fruits: Array<number> = [1, 2];

• 배열의 element 타입을 위와 같이 지정할 수 있다.

---

 

readonly

const numbers: number[] = [1, 2];
const printArray1 = function (scores: readonly number[]) {
  numbers.push(); // Property 'push' does not exist on type 'readonly number[]
};
const printArray2 = function (scores: readonly Array<number>) {
  //'readonly' type modifier is only permitted on array and tuple literal types.
};

• 속성명 그대로 전달된 인자, 혹은 데이터가 수정되지 않도록 타입으로 보장하는 방법이다.
• object의 불변성을 보장하는 것이 중요하며 readonly 타입 지정은 Array<type> 방식과 같은 제네릭 표기법에 적용되지 않으므로 type[] 표기법으로 타입을 지정하는 것이 좋다.

---

 

Tuple

const tuple: [number, boolean] = [1, true];
tuple[0]; // 1;
tuple[3]; //  Tuple type '[number, boolean]' of length '2' has no element at index '3'
const [id, hasjob] = tuple;
console.log(id, hasjob); // 1, true

• 서로 다른 타입의 데이터를 함께 갖고 있는, 고정된 길이를 가진 배열의 형식을 뜻한다.
• 정의하지 않은 타입, 혹은 index로 접근하게 될 경우 오류가 발생한다.
• 튜플 방식은, index값으로 접근하기 때문에 가독성이 매우 떨어지므로 구조분해로 값에 할당하여 사용하는 것이 더욱 좋아보인다.
  (생각해보니 프로젝트를 진행했을 때, 배열 방식으로 전달되는 데이터값에 대한 구조분해는 사용해본 적이 없었다 ...)
• 나중에 배우게 될 interface, type alias, class로 대체하여 사용하도록 하자.

---

 

Reference

• 타입스크립트 공식문서
• 타입스크립트 핸드북
• 드림코딩 엘리님의 TS 및 OPP 강의