김민태의 데브캠프 2기 - generic

이번시간에는 generic에 대해 알아보자.

 

우선, 하나에 선언된 배열에 숫자, 문자열, bool 등 다양한 자료형을 넣어 값을 반환받고자 한다면 

다음과 같이 union 타입으로 선언하여 각 자료형에 맞게 값을 반환할 것이다.

 

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

const array1 = [1, 2, 3];
const array2 = ["a", "b", "c"];
const array3 = [true, false, true];
getArrayLength(array1);
getArrayLength(array2);
getArrayLength(array3);

 

하지만 위의 코드와 같이 작성한다면, 새로운 자료형이 생길 때 마다 union의 값으로 추가해줘야 한다.

generic으로 더 깔끔하고, 효율적이게 바꿔보자

<> 안에 값을 설정해주면 되는데 보통 T를 사용하고, 예시는 다음과 같다.

 

function getArrayLength<T>(arr: T[]): number{
    return arr.length;
}
const array1 = [1, 2, 3];
const array2 = ["a", "b", "c"];
const array3 = [true, false, true];
getArrayLength<number>(array1);
getArrayLength<string>(array2);
getArrayLength<boolean>(array3);

 

다음은, option에서, any를 사용하는 대신, typescript답게 generic을 사용하는 방법이다.

 

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

const car: Vehice<{ price: number}> = {
    name: 'Car',
    color: 'red',
    option: {
        price: 1000
    }
}

const bike: Vehice<boolean> = {
    name: 'Bike',
    color: 'green',
    option: true
}

 

 

더 다양한 예시이다.

 

const makeArr = <T, Y> (x: T, y : Y): [T, Y] => {
    return [x,y];
}

const array = makeArr<number, number>(4, 5);
const array = makeArr<string, string>("a", "b");

const makeArr1 = <T, Y = string> (x: T, y : Y): [T, Y] => {
    return [x,y];
}
const array = makeArr1<string>("a", "b");

const makeFullName = <T extends {firstName: string, lastName: string}> (obj: T) => {
    return {
        ...obj,
        fullName: obj.firstName + " "+ obj.lastName
    }
}

makeFullName({firstName: "john", lastName : "Doe", location: 'Seoul'})
makeFullName({firstName: "john", lastName : "Doe", hello: 'world'})

 

 

마지막으로  React에서 Generic을 사용하는 방법이다

 

interface Props {
    name: string;
}

const REactComponent: RecordingState.FC<Props> = ({ name}) => {
    return <div> {name}</div>
}

// useState에서의 방법 
const [state] = useSatate<{name: string | null}>({name: ""});