TypeScript 공부 #7

☘️제네릭(Generics)

제네릭을 사용하면 클래스 or 함수 or 인터페이스를 다양한 타입으로 재사용할 수 있다.

 

만약 배열을 입력받아 길이를 반환하는 함수를 만들었을 때,

아래처럼 유니온 타입으로 입력받는 배열의 타입을 매번 추가하면 번거로움이 있다.

function getSize(arr: number[] | string[] | boolean[] | object[] ): number {
    return arr.length;
}

const arr1 = [1,2,3];
getSize(arr1);

const arr2 = ["a","b","c"];
getSize(arr2);

const arr3 = [false, true, false]
getSize(arr3);

const arr4 = [{name: "짱잼"},{}];
getSize(arr4);

제네릭 - 함수

이러한 번거로움을 없애기 위해 제네릭을 사용한다.

// 제네릭
function getSize<T>(arr: T[]): number {
    return arr.length;
}

const arr1 = [1,2,3];
getSize<number>(arr1);

const arr2 = ["a","b","c"];
getSize<string>(arr2);

const arr3 = [false, true, false]
getSize<boolean>(arr3);

const arr4 = [{name: "짱잼"},{}];
getSize<object>(arr4);

마우스를 올려다 보면 number 배열로 입력받는 것을 볼 수 있다.

제네릭 - 인터페이스

제네릭은 함수뿐만 아니라 인터페이스에서도 사용할 수 있다.

하나의 인터페이스에서 제네릭을 사용해 다양한 타입의 값을 입력할 수 있다.

interface User<T> {
    name: string;
    age: number;
    option: T;
}

const u1: User<string> = {
    name: "철수",
    age: 20,
    option: "옵션 없음",
}

const u2: User<object> = {
    name: "영희",
    age: 25,
    option: {
        job: "student",
    }
}

---

☘️참고 자료

[유튜브]TypeScript 강좌 - 코딩앙마

---

☘️마무리 하며...

공부하면 공부할수록 타입스크립트를 잘 알면 유용하고 편리하게 개발을 할 수 있을 거 같은 좋은 언어라고 생각이 든다.