06_06 제네릭 실습

하위 태스크 1 ~ 3

any vs unknown vs 제네릭

세 가지 방식의 차이와 문제점 확인

제네릭 함수 작성

타입 변수를 사용하는 함수 작성

타입 추론 확인

제네릭 함수 호출 시 타입 자동 추론

• any 타입: 해당 변수에 대한 타입 검사를 중단한다. 타입 신뢰도를 떨어뜨린다.
• unknown 타입: 해당 변수에 대해 타입을 좁힌 후 사용해야 한다. any 타입보다 타입 신뢰도가 높지만, 타입 좁히기를 위한 코드가 필요하다.
• 제네릭 타입: 타입 매개변수를 사용해서 타입을 유연히 사용할 수 있다. 타입 신뢰도가 높고, 타입 유추가 뛰어나다.

src/generic-funcitons.ts:

// any 타입 사용
 
function funcAny(value: any) {
    return value;
}
 
funcAny(1).map((v) => v.toString()); // 런타임 타임 오류 발생
 
// unknown 타입 사용
 
function funcUnknown(value: unknown) {
    return value;
}
 
funcUnknown(1).toString(); // 컴파일 타입 오류 발생
 
function funcGeneric<T>(value: T) {
    return value;
}
 
funcGeneric(1).toString(); // functionGeneric(1)의 반환 값은 1로 유추됨

하위 태스크 4

제네릭 인터페이스

KeyPair 같은 제네릭 인터페이스 정의

src/generic-interface.ts:

interface KeyPair<K, V> {
    key: K;
    value: V;
}
 
const pair: KeyPair<string, number> = {
    key: "cake",
    value: 18000,
};

하위 태스크 5

제네릭 타입 별칭

Map2 같은 제네릭 타입 별칭 정의

src/generic-interface.ts:

type Map2<T> = {
    [key: string]: T
};
 
const mapToNumber: Map2<number> = {
    cake: 18000,
};

하위 태스크 6

Promise 제네릭

Promise, Promise 사용

src/promises.ts:

const maybeReturnNumber = new Promise<number>((resolve) => {
     resolve(100);
});
 
maybeReturnNumber
    .then((response) => { // response의 타입은 number
        console.log(`response는 숫자다: ${typeof response === "number"}`);
    });
 
interface Post {
    title: string;
    description: string;
}
 
const post: Post = {
    title: "푸른 하늘 은하수",
    description: "화성 가자",
};
 
const maybeReturnPost = new Promise<Post>((resolve) => { // maybeReturnPost의 타입은 Promise<Post>
    resolve(post);
});

하위 태스크 7

async 함수 타입

async 함수의 반환 타입 확인

src/promises.ts:

async function loadPost(): Promise<Post> {
    return Promise.resolve(post);
}
 
const postPromise = loadPost(); // postPromise의 타입은 Promise<Post>

하위 태스크 8

제네릭 클래스

Stack 같은 제네릭 클래스 작성

src/generic-classes.ts:

class Stack<T> {
    private items: T[] = [];
 
    push(item: T) {
        this.items.push(item);
    }
 
    pop() {
        return this.items.pop();
    }
}
 
const stackOfNumbers = new Stack<number>();
const stackOfStrings = new Stack<string>();

하위 태스크 9

타입 변수 제약

extends로 타입 변수 제약 추가

src/generic-classes.ts:

// ...
 
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}
 
console.log(getProperty({ name: "홍길동", age: 23 }, "name")); // 홍길동