[typescrip] Generic(제네릭)

재사용을 목적으로 함수나 클래스의 선언 시점이 아닌 사용 시점에 타입을 선언
타입을 인수로 받아서 사용

타입변수는 사용자가 제공한 타입으로 변환될 식별자이다

음.... 그러니깐

전달받은 타입을 사용하도록 함!!!
사용하는 쪽에서 타입을 결정!!

 

제네릭 사용하는 예시

function getSize(arr:number [] | string [] | boolean [] | object []): number{
	return arr.length;
}
const arr1 = [1,2,3];
getSize(arr1) // 3

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

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

const arr4 = [{},{name:"g"},{},{},{}]
getSize(arr4)

이렇게 타입이 하나씩 추가될때마다 함수 유니언타입으로 하나씩 타입을 추가해줘야함
이렇게 귀찮음을 방지해주는게 제네릭!!!!!!!!!!! 만세~!!!

 

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

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

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

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

const arr4 = [{},{name:"g"},{},{},{}]
getSize<object>(arr4)//5

 

▶ <T>이거는 타입변수라고 부름

 

실습

//Generic
function getSize<T>(arr: T []):number {
    return arr.length;
}
const numArr = [1, 2, 3, 4];
getSize<number>(numArr); // 4

const strArr23 = ['a', 'b', 'c'];
getSize<string>(strArr23); //3

const boolArr2 = [true, false, true, true];
getSize<boolean>(boolArr2); //4

const objArr21 = [{}, {name: "a"}, {}, {age: 30}, {}];

getSize<object>(objArr21); //5

 

제네릭 제약조건

말그대로 타입에 제약조건을 줌

interface Mytype<T> {
	name: string;
	value: T
}

const data: Mytype<number> = {
	name: "A",
	value: 123
}

const data: Mytype<string> = {
	name: "A",
	value: "aaa"
}

const data: Mytype<boolean> = {
	name: "A",
	value: true
}

 

실습

interface Animal<T> {
    name: string;
    color: string;
    option: T;
}

const animal2: Animal<string> = {
    name: "고양이",
    color: "검정",
    option: "특이함"
}
const animal1: Animal<{age: number; hobby: string}> = {
    name: "강아지",
    color: "흰색",
    option: {
        age: 3,
        hobby: "공놀이"
    }
}

 

제네릭 확장

interface에 원하는 타입만 오게하고싶을때 extends 사용

 

interface Student100 {
    name: string;
    age: number;
}

interface Car {
    name: string;
}

interface Fruit {
    color: string;
}

const stu100: Student100 = {
    name: "a",
    age: 19
}
const car1: Car = {
    name: "소나타"
}
const fruit1: Fruit = {
    color: "빨강"
}
function printobjName<T extends {name: string}>(data: T): string {
    return data.name;
}

console.log(printobjName(stu100));
console.log(printobjName(car1));

//printobjName(fruit1); 
에러발생 name  없음

 

방법 2  타입변수에 할당

 

type U = number | string | boolean;


interface MyType<T extends U> {
    name: string;
    value: T
}

const dataA : MyType<string> = {
    name: "하하",
    value: "제네릭"
}

const dataB : MyType<number> = {
    name: "호호호",
    value: 123
}

const dataC: MyType<boolean> = {
    name: "흐흐흐",
    value: true
}

 

실습

새로운 interface 3개 생성
새로은 interface 타입의 객체를 3개 생성
printColor()함수 구현
객체타입을 매개변수로 받아서 객체.color를 콘솔에 출력해줌

interface changmin1 {
    name: string
    color: string
}

interface changmin2 {
    name: string
    color: string
}

interface changmin3 {
    name: string
}

const chang1: changmin1 = {
    name: "창민",
    color: "흰색"
}

const chang2: changmin2 = {
    name: "창민1",
    color: "블루"
   
}

const chang3: changmin3 = {
    name: "창민2",
}


function printColor<T extends {color: String}>(data: T) {
    console.log(data.color)
}

printColor(chang1)
printColor(chang2)
//printColor(chang3) //프로퍼티가 없어서 에러 발생

 

 

함수쪽 이해가 안되서....... 풀어서 적어봄

function printColor<T>(data: T) {    

//여기서 콘솔창에 필요한 값을 주기위해서 아래 함수처럼 수정해야함
    console.log(data.color) // 칼라 데이터 값이 없어서 에러 발생
}

function printColor<T extends {color: String}>(data: T) {  

// 칼라 데이터가 필요하기때 에 extends {color: String} //// String 소문자 쓰면 안됨
    console.log(data.color)
}