TypeScript 기본 개념 공부 #3

2023.04.06 - [Language/TypeScript] - TypeScript 기본 개념 공부 #2

TypeScript 기본 개념 공부 #2

이번 포스트에서는 다형성(polymorphism)에 대해서 다룰 것이다.

다형성(Polymorphism)

다형성(polymorphism)이란 무엇인가?

그리스어로 poly가 무슨 뜻인지 보자.

poly라는 뜻은 many, several, much, multi이다. polygon(다각형) 같은 단어를 생각하면 된다.

Poly는 '많은', '다수의'라는 뜻이고 있으면 된다. 이제 morphos 또는 morphic에 대해서 알아보자.

morphos는 form(형태), structure(구조)라는 뜻을 가지고 있다.

이것들을 조합해보면 many(poly) structure(morphos)가 된다.

기본적으로 함수는 여러가지 다른 형태를 가지고 있다. 이전에서 했던 것처럼 타입스크립트에서 함수는 다른 2~3개의 파라미터를 가질 수 있다.

또는 타입스크립트에서 함수는 string이나 object를 첫 번째 파라미터로 가질 수 있다.

그러므로 우리는 이미 약간의 여러가지 모양의 다형성을 해본 것이다.

제네릭(Generic)

말로 설명하는 것보다 코드를 짜보면서 하는게 더 이해가 잘 될 것 같다.

type Hello = {
    (arr: number[]): void
}

const hello: Hello = (arr) => {
    arr.forEach(i => console.log(i))
}

이러한 call signature를 만들었다. 지금은 배열을 number로 받고 있지만 배열을 boolean이나 object로 받을 수도 있다.

그러면 boolean으로 배열을 받게 된다면 어떻게 해야 하는가?

type Hello = {
    (arr: number[]): void
    (arr: boolean[]): void
}

const hello: Hello = (arr) => {
    arr.forEach(i => console.log(i))
}

hello([1, 2, 3, 4])
hello([true, false, true, false])

배열이 number를 받게 하는 것과 마찬가지로 boolean을 받게 하면 된다.

여기에 hello 함수에 string을 받게 되면 어떻게 될까?

동작하지 않을 것이다. 그러면 boolean을 추가한 것처럼 string을 추가하면 될까?

되기는 하지만 이게 좋은 방법은 아니다.

여기서 타입스크립트에게 generic 타입을 받을 것이라고 알려줄 것이다.

generic이 무엇인가? 타입의 placeholder 같은 것이라고 보면 된다.

우리가 타입을 지정하는 것 대신에 placeholder를 작성할 수 있고 그게 뭔지 추론해서 함수를 사용하는 것이다.

함수의 파라미터로 어떤 타입이라도 동작하게 하려면 이렇게 하면 된다.

type Hello = {
    <TypeHello>(arr: TypeHello[]): void
}

const hello: Hello = (arr) => {
    arr.forEach(i => console.log(i))
}

hello([1, 2, 3, 4])
hello([1, false, 'hi', true])

꺽쇠로 Generic의 이름을 적어주고 arr 배열이 제네릭을 받게 해준다.

이렇게 하면 함수의 파라미터에 어떤 타입의 배열을 줘도 정상적으로 동작할 것이다.

타입스크립트는 함수의 파라미터 값을 보고 타입을 유추하고 그 유추한 타입을 call signature로 보여준다.

type Hello = {
    <T>(arr: T[]): void
}

const hello: Hello = (arr) => {
    arr.forEach(i => console.log(i))
}

hello([1, 2, 3, 4])
hello([1, false, 'hi', true])

TypeHello는 너무 길기 때문에 보편적으로 사용되고 있는 T를 사용하면 된다.

만약 Generic을 2개 사용하고 싶다면 이렇게 하면 된다.

type Hello = {
    <T, V>(a: T[], b: V): void
}

const hello: Hello = (arr) => {
    arr.forEach(i => console.log(i))
}

hello([1, 2, 3, 4], 'hi')
hello([1, false, 'hi', true], 3)

마찬가지로 Generic의 이름은 아무거나 써도 된다.

이렇게는 Generic을 연습하기 위해 사용하고 일반적으로는 이렇게 사용한다.

function hello<T>(arr: T[]) {
 return arr[0]
}

hello([1, 2, 3, 4])
hello([1, false, 'hi', true])