[TypeScript 강의노트] - generic

1. generic을 이용하면 (함수에서 파라미터를 정의하듯이) 타입을 파라미터화 할 수 있다.

- 관용적으로 T, U 알파벳 순서로 타입변수를 지정한다.

 

 

//1. 타입을 제네릭으로 파라미터화 시키기
function createPromise<T>(x: T, timeout: number) {
    return new Promise((resolve: (V: T) => void, reject) => {
        setTimeout(() => {
            resolve(x);
        }, timeout);
    });
}

createPromise("dd", 100).then((v) => console.log(v)); 
//v

//2. 여러개의 타입을 제네릭으로 파라미터화 시키기
function createTuple2<T, U>(v: T, v2: U): [T, U] {
    return [v, v2];
}

const t1 = createTuple2("user1", 1000);
//t1[0] : string, t1[1]:number

 

 

 

 

2. generic - class에서 사용하기

 

class LocalDB {
    constructor(private locaStorageKey: string) {}
    add(v: User) {
        localStorage.setItem(this.locaStorageKey, JSON.stringify(v));
    }
    get(): User {
        const v = localStorage.getItem(this.locaStorageKey);
        return v ? JSON.parse(v) : null;
    }
}

const userDb = new LocalDB("user");
userDb.add({ name: "jay" });
const user1 = userDb.get();

//1. 그냥 name을 뽑을 때, any 타입이 됨
user1.name; //any

//2. interface로 타입을 고정하면
interface User {
    name: string;
}

user1.name; //string

--------------------------------------------

//2. user하나의 타입뿐 아니라 여러 타입에 대해 처리할 때 - user의 타입을 파라미터화 - 제네릭 정의

class LocalDB2<T> {
    constructor(private locaStorageKey: string) {}
    add(v: T) {
        localStorage.setItem(this.locaStorageKey, JSON.stringify(v));
    }
    get(): T {
        const v = localStorage.getItem(this.locaStorageKey);
        return v ? JSON.parse(v) : null;
    }
}

const userDb2 = new LocalDB2<User2>("user");
userDb.add("ss"); //error

userDb.add({ name: "jay" });
const user2 = userDb.get();

interface User2 {
    name: string;
}

user1.name; //string

 

 

3. generic - interface에서 사용하기

 

//3. interface 에서 제네릭 사용하기
interface DB<T> {
    add(v: T): void;
    get(): T;
}

class LocalDB3<T> implements DB<T> {
    constructor(private locaStorageKey: string) {}
    add(v: T) {
        localStorage.setItem(this.locaStorageKey, JSON.stringify(v));
    }
    get(): T {
        const v = localStorage.getItem(this.locaStorageKey);
        return v ? JSON.parse(v) : null;
    }
}

 

 

 

 

4. generic - 조건부 타입

 

//4. 조건부 타입 제네릭에서 사용하기
interface Veigtable {
    v: string;
}

interface Meat {
    m: string;
}

interface Cart2<T> {
    getItem(): T extends Veigtable ? Veigtable : Meat;
}

const cart1: Cart2<Veigtable> = {
    getItem() {
        return {
            v: "",
        };
    },
};

cart1.getItem(); // type: Veigtable

 

 

+) 추가로 공부하면서 찾아본 자료

TypeScript: 제네릭(Generic)