타입스크립트 - 제네릭

carrot·2022년 3월 29일
0

Summary

목록 보기
1/1
post-thumbnail
// Generics를 사용하여 함수 타입을 정의합니다.
// 구현할 함수는 T 타입의 배열과 T 타입의 값을 받아 T타입의 배열을 반환하는 함수입니다.
interface InsertFunc {
    <T>(array: T[], value: T): T[]
}

// 함수 선언식을 사용하여 제네릭이 포함된 함수를 구현할 때는 다음과 같습니다.
function insertAtBeginning<T>(array: T[], value: T): T[] {
    return [value, ...array]
}

// 구현된 함수를 사용할 때는 제네릭을 따로 붙이지 않아도 되지만, 명시적으로 넣어주었습니다.
// <number>와 <string>을 제거해도 에러가 발생하지 않고 타입추론 또한 변화가 없습니다.
const numArray = insertAtBeginning<number>([1, 2, 3], 0);
const strArray = insertAtBeginning<string>(['b', 'c', 'd'], 'a');

// 인터페이스로 선언된 타입을 함수 표현식에 적용하면 다음과 같습니다.
const insertFunc:InsertFunc = (array, value) => [value, ...array]
const booleanArr = insertFunc([true, false, true], false);

// 인터페이스를 사용하지 않고 함수 표현식에 제네릭을 사용하면 다음과 같이 구현할 수 있습니다.
const insertFunc2: <T>(arr: T[], value: T) => T[] = (arr, value) => [value, ...arr];
// 위 구현 방식은 아래와 동일합니다. InsertFunc는 생략해도 무방합니다.
const insertFunc3: InsertFunc = function<T>(arr: T[], val: T): T[] {
    return [val, ...arr]
}

// 인터페이스를 활용하여 함수표현식을 통해 함수를 구현하면 다음과 같습니다.
const resultOfInsertFunc2: InsertFunc = (arr, val) => [val, ...arr];

// 함수 선언문을 통해 구현된 insertAtBeginning 함수를 인터페이스와 함께 함수표현식으로 정의할 수 있습니다.
const result: InsertFunc = insertAtBeginning
const test1 = result([1, 2, 3], 0);
const test2 = result(['b', 'c', 'd'], 'a');
profile
당근같은사람

0개의 댓글