새롭게 작성된 포스트가 있습니다. 해당 링크를 참조해주세요.

배열의 선언과 타입

타입스크립트의 배열 선언은 자바스크립트와 동일합니다. 배열 리터럴을 이용하거나, Array 객체 생성자를 통해 생성합니다. 자바스크립트 포스트에서 언급했듯이 배열의 선언은 배열 리터럴 방식을 이용해서 선언하게 됩니다.

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

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]];

배열 제네릭

함수에서 배열을 다룰때에는 타입을 강하게 주어 고정 타입 함수를 만드는 것보다 모든 타입들을 받아들이도록 하는 것이 좋습니다. 그래서 배열의 타입을 줄 때 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;