[TS] Generics 2️⃣

🍒 [230317 TIL] Understanding TypeScript

Generics 2️⃣

Keyof Constraint

제네릭으로 객체에 대한 제약 조건을 줄 때, 키 값을 필요로 한다면 keyof를 사용한 제약 조건을 쓰면 실수를 방지할 수 있다.

 

function extractAndConvert<T extends object, U extends keyof T>(
    obj: T,
    key: U
) {
    return 'Value: ' + obj[key];
}

extractAndConvert({}, 'name'); // Error occurred

제네릭 T의 제약 조건으로 object를 설정해주었고,

U의 제약 조건으로 T의 key를 설정해주었다.

 

extractAndConvert로 빈 객체({})와 name이라는 문자열을 전달했을 때,

빈 객체에는 name이라는 키 값이 없기 때문에 컴파일 오류가 난다!

 

제네릭으로 U extends keyof T를 설정했기 때문에 발생하는 오류이며,

함수로 name 키를 가진 객체를 전달하면 오류는 사라진다 😃

 

Generic Classes

제네릭으로 클래스를 만들 경우 새로운 인스턴스를 만들 때 유연하게 타입을 변경할 수 있다.

 

class DataStorage<T> {
    private data: T[] = [];
    
    addItem(item: T) {
        this.data.push(item);
    }
    
    removeItem(item: T) {
        this.data.splice(this.data.indexOf(item), 1);
    }
    
    getItems() {
        return [...this.data];
    }
}

const textStorage = new DataStorage<string>();
textStorage.addItem('Apeach');
textStorage.addItem('Rabbit');
textStorage.removeItem('Apeach');
console.log(textStorage.getItems()); // ['Rabbit']

 

만약 위 예제에서 제네릭을 사용하지 않고 class 자체에 타입을 지정했다면 string | number 등등...

필요한 타입을 직접 추가해야하는 번거로움이 있었을 것이다 🤔

 

선언 시점이 아니라 생성 시점에 원하는 타입을 지정할 수 있다는 것은 제네릭의 막강한 장점!

물론 제약 조건을 제네릭에 추가하는 방법도 있다 😅

 

Partial type

Partial 타입은 제네릭으로 전달된 타입이 객체임을 알려주는 역할을 하면서

전달된 타입에 작성된 모든 속성을 선택적 타입으로 변경해준다.

 

interface CourseGoal {
    title: string;
    description: string;
    completeUntil: Date;
}

function createCourseGoal(
    title: string,
    description: string,
    date: Date
): CourseGoal {
    let courseGoal: Partial<CourseGoal> = {};
    courseGoal.title = title;
    courseGoal.description = description;
    courseGoal.completeUntil = date;
    return courseGoal as CourseGoal;
}

 

Readonly type

Readonly 타입은 제네릭으로 전달된 타입이 무조건 읽기만 가능하다고 알려주는 역할을 한다.

Readonly 타입을 사용하면 속성 변경 및 추가가 불가능하다 😵

 

const names: Readonly<string[]> = ['Shou', 'Apeach'];
names.push('Rabbit'); // Error occurred
names.pop(); // Error occurred

 

Utility Types
https://www.typescriptlang.org/docs/handbook/utility-types.html

 

Generics vs Union types

class DataStorage<T> {
    private data: T[] = [];
    
    addItem(item: T) {
        this.data.push(item);
    }
    
    removeItem(item: T) {
        this.data.splice(this.data.indexOf(item), 1);
    }
    
    getItems() {
        return [...this.data];
    }
}

const numberStorage = new DataStorage<number>();

제네릭의 경우 인스턴스를 생성하는 시점에 number 타입의 배열을 타입으로 지정하겠다고 지정이 가능하지만,

class DataStorage {
    private data: (string | number | boolean)[] = [];
    
    addItem(item: string | number | boolean) {
        this.data.push(item);
    }
    
    removeItem(item: string | number | boolean) {
        this.data.splice(this.data.indexOf(item), 1);
    }
    
    getItems() {
        return [...this.data];
    }
}

union 타입은 data라는 배열에 any 타입을 지정해준 것과 다름없는..🫢 (예제가 실제로 any처럼 동작하지는 않지만)

이 경우 data의 타입을 string[] | number[] | boolean[]으로 설정해줄 수 있겠으나

이렇게 되면 data를 어떤 타입의 배열로 설정하느냐에 따라 item의 타입 또한 유동적으로 달라져야 하기 때문에 item의 타입 설정이 어려워진다 😡

 

제네릭은 특정 타입을 고정하거나, 생성한 전체 클래스 인스턴스에 걸쳐 같은 함수를 사용하거나, 전체 함수에 걸쳐 같은 타입을 사용할 때 유용하다.
union 타입은 모든 메소드 호출이나 모든 함수 호출마다 다른 타입을 지정하고자 하는 경우에 유용하다.