[TypeScript] Array, Tuple

Joah·2022년 9월 30일

TypeScript

목록 보기

10/16

배열 타입을 지정하는 방법에는 2가지가 있다.

1. const animals: string[] = ["dog", "cat"]
   const months: number[] = [1,2,3,4,5,6,7,8,9,10,11,12]

2. const animals: Array<string> = ["goat", "cow"]
   const months: Array<number> = [1,2,3,4,5,6,7,8,9,10,11,12]

이 두 코드에서 어떤 것이 더 좋고 나쁘다는 없다.

readonly

하지만 함수에 readonly를 작성하면 1번 방법만 허용된다.

function printAnimals(animals: readonly string[]) {
	animals.push //error
}

//fucntion printMonths(months: readonly Array<number>){}
//허용이 불가한 사용법

readonly는 읽기 전용이며 받아오는 데이터를 출력할 수는 있지만 업데이트 하거나 변경할 수 없다. 즉, 전달된 인자를 함수 내부에서 변경하지 않도록 타입으로 보장하기 위해서 readonly를 사용한다.

따라서 객체의 불변성을 유지할 수 있다.

하나의 배열에 서로 다른 데이터 타입을 담을 수 있다.

let student: [string, number];
// student라는 배열에는 문자도 담을 수 있고 숫자도 담을 수 있다.

student = ["Joah", 23];
//이런식으로 값을 할당할 수 있다.

Tuple 사용을 권장하지 않는 이유

요소에 접근하기 위해서는 결국 인덱스 번호로 접근해야 하는데 가독성에 좋지 않다.

student[0] //Joah
student[1] //23

//굳이 데이터에 어떤 값이 담겨 있는지 또 보러가야 함...

student.name
student.age

//이것도 굳이....

따라서 Tuple은
Interface, type alias, class라는 아이들로 대체된다.

동적으로 데이터를 관리하는데 위의 대체 키워드로는 묶기가 애매할 때 사용된다.
참고로 React의 useState가 Tuple로 정의되었다.

const [name, age] = student;
const [state, setState] = useState();

하나의 배열에 state는 그 어떤 데이터 타입이 될 수 있고 setState는 함수이니깐 여러 데이터들이 한 배열에 들어올 수 있게 Tuple을 사용해서 만들어졌다.

Front-end Developer