TypeScript / 제네릭

Generics(제네릭)

함수, 클래스, 인터페이스 등 타입을 매개변수 처럼 사용할 수 있게 한다.

다양한 타입의 데이터를 처리할 수 있는 범용적인 패턴을 제공해 유사한 기능을 하는 함수, 클래스 등을 하나로 통합할 수 있다.

 

• 장점 : 코드 재사용성 • 유연성 • 확장성 증가 (라이브러리, 툴 개발 시 더욱 유용) , 명시적인 타입 표현
• 단점 : 러닝 커브(초보자에겐 어려움) , 복잡성 • 컴파일 시간 증가

function genericFunction<T>(arg:T):T{
    return arg;
}

interface GenericInterface<T> {}
class GenericClass<T> {}

 

 

타입 변수(Type Variable)

타입 자리에 대체될 타입을 나타내는 변수

실제 사용시에는 구체적인 타입으로 대체됨

function 함수이름<Type>(arg:Type):Type{}
// Type이나 T를 주로 사용하지만 아무거나 해도 상관없음

 

다음과 같이 사용할 수 있다.

let numbers: Array<number> = [1, 2, 3, 4, 5]
let strings: Array<string> = ['1', '2', '3', '4', '5']

let div = document.querySelector<HTMLDivElement>('#myDiv1')
let btn = document.querySelector<HTMLButtonElement>('#myBtn1')

// 제너릭으로 정의해줬기 때문에 버튼의 속성에 접근할 수 있다
// btn에 오류가 남 -> 해당 요소가 없어서 에러가 나는 것이니 ?를 붙여 조건부 판단을 해줌 
btn?.click()

 

 

제네릭 함수

사용하지 않은 경우

function getFirstElement (arr:number[]) {
    if(!arr.length) {
        return undefined
    }
    return arr[0]
}

const firstNumber = getFirstElement(numbers)

function getFirstStringElement (arr:string[]) {
    if(!arr.length) {
        return undefined
    }
    return arr[0]
}

const firstString = getFirstStringElement(strings)

 

 

제네릭을 사용한 경우

function getFirstElement<T>(arr: T[]): T | undefined {
    if (!arr.length) {
        return undefined
    }
    return arr[0]
}

const firstNumber = getFirstElement(numbers)
const firstString = getFirstElement(strings)

 

 

제네릭 인터페이스

사용하지 않은 경우

interface strDict {
    [key: string]: string
}

let strObj: strDict = {
    name: "Elliot"
}

interface numDict {
    [key: string]: number
}

let numObj: numDict = {
    age: 23
}

 

 

제네릭을 사용한 경우

interface Dict<T> {
    [key: string]: T
}

let strObj: Dict<string> = {
    name: "Elliot"
}

let numObj: Dict<number> = {
    age: 23
}

 

 

여러 개의 타입 변수를 지정할 수도 있다.

이런식으로 딕셔너리, 맵 구조 사용시 타입에 관해 유연하게 처리가 가능하다.

interface Entry<K, V> {
    key: K;
    value: V;
}

let entry1: Entry<string, number> = {
    key: "age",
    value: 25
}

let entry2: Entry<number, string[]> = {
    key: 1,
    value: ['red', 'green', 'blue']
}

 

 

---

 

 

제네릭 클래스

클래스를 정의할 때는 타입을 고정하지 않고,

클래스가 사용할 타입을 인스턴스화 시점에서 지정할 수 있게 해준다.

 

예제 1

class Item<T> {
    #content: T | null;
    constructor() {
        this.#content = null;
    }

    setItem(value: T) {
        this.#content = value;
    }

    getItem(): T | null {
        return this.#content;
    }
}

const numberItem = new Item<number>();
numberItem.setItem(100);
numberItem.getItem(); // 100

const stringItem = new Item<string>();
stringItem.setItem("Hello");
stringItem.getItem(); // Hello 반환

 

 

예제 2-1

interface User {
    id: number;
    name: string;
}

interface Store<T> {
    findById(id: number): T | undefined;
    save(item: T): void;
}

class UserRepository implements Store<User> {
    #users: User[] = []; // 빈 배열로 초기화
    findById(id: number): User | undefined {
        return this.#users.find(user => user.id === id);
    }
    save(user: User): void {
        this.#users.push(user)
    }
}

// 사용
const userRepo = new UserRepository();

userRepo.save({
    id: 1,
    name: "Java"
})

userRepo.save({
    id: 2,
    name: "C#"
})

console.log(userRepo.findById(2))

 

 

예제 2-2

위에서 생성한 Store 인터페이스를 사용해 새로운 클래스를 생성했다.

class ProductRepository implements Store<Product> {
    #products: Product[] = [];

    findById(id: number): Product | undefined {
        return this.#products.find(product => product.id === id)
    }

    save(product: Product): void {
        this.#products.push(product)
    }
}

// 사용
const productRepo = new ProductRepository();

productRepo.save({
    id: 10,
    price: 100,
    name: "keyboard"
})
productRepo.save({
    id: 12,
    price: 400,
    name: "mouse"
})

console.log(productRepo.findById(12))

 

 

제네릭의 제약조건

 

위 예제들을 기반으로 새로운 인터페이스를 추가했다.

interface User {
    id: number; // id 값을 정의하지 않으면 User를 사용하는 클래스에서 id property를 찾을 수 없다고 에러가 난다.
    name: string;
}

// 새로 추가!! 
interface WithId {
    id: number;
}

// extends 키워드로 제약 조건을 걸어줌
interface Store<T extends WithId> {
    findById(id: number): T | undefined;
    save(item: T): void;
}

// User에 id값이 없다면 에러가 발생하게 됨
class UserRepository implements Store<User> {
    #users: User[] = []; // 빈 배열로 초기화
    findById(id: number): User | undefined {
        return this.#users.find(user => user.id === id);
    }
    save(user: User): void {
        this.#users.push(user)
    }
}

 

 

이런 식으로 제약 조건으로 부여해 타입을 구체적으로 정의할 수 있다.