typescript 내장 제네릭과 제네릭

예시를 위해 배열을 생성합니다.

초보자가 typescript를 사용하면서 에러를 가장 많이 보는 경우가 제네릭 타입에 대한 에러입니다. (결론.. 중요하다.)

const names: Array<string> = ["max", "mana"]; // string[]과 똑같다.
// names[0].split(" "); 작동하는 코드

const promise: Promise<string> = new Promise((resolve, reject) => {
	// new Promise resolve에서 string을 출력했기 때문에, promise는 Promise<string>을 통해 type 설정이 가능해진다.
    setTimeout(() => {
    	resolve("Hello World");
        // resolve(10); 에러를 발생시킨다. promise: Promise<string> type 때문
    }, 2000)
});

// data를 받아온다고 가정한다.
promise.then(data => {
	data.split(" ");
})

Array<string> === string[]이다.
Array<string | number> 이런식으로도 사용 가능하다.

제네릭 클래스와 함수 만들기

function merge(objA: object, objB: object){
    return Object.assign(objA, objB);
}

console.log(merge({name: "max"}, {age: 30});
// {name: "max", age: 30}

const mergeObj = merge({name: "max"}, {age: 30});
// mergeObj.age; mergeObj 내 존재하지만 에러를 발생시킨다.

ex) 합쳐진 객체의 에러를 막는 방법

// <T>는 한 글자 아무거나 써도 상관없지만 일반적으로 T를 적어준다.
// <T>를 적어준 경우, merge 객체에 대한 type을 작성된 type을 자동으로 인식한다.
function merge<T, U>(objA: T, objB: U){
    return Object.assign(objA, objB);
}

// 그럼 아래 코드에서 T를 string으로 U를 number로 인식한다.
const mergeObj = merge({name: "max"}, {age: 30});

console.log(mergeObj.age); 
// 30을 에러없이 반환한다.

// 만약 객체값에 대해서 구체적 type을 설정하고 싶은 경우,
// 하지만 위에서 T, U를 통해 이미 자동 인식하고 있는 걸 구체화 할 필요는 없어보인다. (특별한 케이스를 제외하고는..
const mergeObj = merge<{name: string}, {age: number}>({name: "max"}, {age: 30});

제약 조건 작업하기

function merge<T, U>(objA: T, objB: U){
    return Object.assign(objA, objB);
}

const mergeObj = merge({name: "max", hobbies: ["sports"]}, {age: 30});
// const mergeObj2 = merge({name: "max", hobbies: ["sports"]}, 30);

console.log(mergeObj2);
// {name: "max", hobbies: ["sports"]} 출력한다.
// 30 빠진 이유는 merge의 경우 객체를 받아오는데 자동으로 objB가 30을 객체가 아닌 number로 인식해 표시되지 않는다.

T, U 제약 조건 설정해보자.

function merge<T extends object, U extends object>(objA: T, objB: U){
    return Object.assign(objA, objB);
}

// const mergeObj2 = merge({name: "max", hobbies: ["sports"]}, 30);
// extends object를 통해 제약 조건을 설정해 30이라는 숫자가 에러를 발생시킨다.

extends를 통해서 object가 와야하고 object 내 type은 상관이 없다.
하지만 무조건 object type 와야하기 때문에 30이라는 숫자는 에러를 발생시킨다.