[Typescript] 배열

배열의 선언은 자바스크립트와 동일합니다. new Array를 통한 인스턴스 생성 방식 혹은 []를 이용한 배열 생성 방식. 하지만 타입스크립트 배열의 특징은 배열에 타입이 존재한다는 점 입니다.

---

1. 배열의 선언과 타입

타입스크립트에서 배열에 타입을 주는 방식은 변수때와 동일합니다. 다만 타입 뒤에 대괄호([])가 들어간다는 점이 다릅니다.

let 배열명: 타입[] = [];

배열에 타입을 주게하면서 다음과 같은 아름다운 코드는 불가능해졌습니다.

let arr = [1, '안녕', true, [0, 4], {}];

다음은 몇 가지 타입스크립트 배열 선언의 예시입니다.

let nums: number[] = [1, 2, 3, 4];
let str: string[] = ['Typescript', 'Javascript'];

type IPerson = {name: string, age: number};
let people: IPerson[] = [{name: '순이', age: 4}, {name: '밥풀이', age: 3}];

let nums2: number[][] = [[1, 2], [3, 4]];

 

 

 

2. 배열 제네릭

함수에서 배열을 다룰때에는 타입을 강하게 주어 고정 타입 함수를 만드는 것보다 모든 타입들을 받아들이도록 하는 것이 좋습니다. 그래서 배열의 타입을 줄 떄 string[], number[]와 같은 방식보다는 T[] 등의 배열의 타입을 표현합니다. 이 방식을 제네릭 타입이라고 합니다. 다음과 같은 배열을 다루는 함수를 제네릭을 이용해서 변경해보겠습니다.

const getArrayLength = arr => arr.length;

//변경후
const getArrayLength = <T>(arr: T[]): number => arr.length;

매개변수 앞의 제네릭 <T>을 생략하면 컴파일러가 T[]를 정확하게 알아내지 못합니다. 그래서 제네릭을 이용할 땐 가급적이면 앞에 <T>를 명시하는 과정을 넣어주는 것이 좋습니다.

 

잠깐 배열은 접어두고 위와 같은 제네릭 함수에서 타입 추론과 시그니처는 어떻게 될까요?

기본적으로  제네릭 함수의 호출은 다음과 같이 합니다.

함수명<타입>(매개변수)

const getArrayLength = <T>(arr: T[]): number => arr.length;

let arr: number[] = [1, 2, 3];

getArrayLength<number>(arr);

하지만 이 코드를 다음과 같이 사용하면 컴파일러가 알아서 추론해서 타입을 결정해줍니다.

const getArrayLength = <T>(arr: T[]): number => arr.length;

let arr: number[] = [1, 2, 3];

getArrayLength(arr);

함수 시그니처는 다음과 같이 작성할 수 있습니다.

const getArrayLength = <T>(arr: T[]): number => arr.length;
const gAL: { <T>(arr: T[]): number } = getArrayLength;