제네릭(Generic) -클래스

@2023/09/20

안녕하세요 lika-7입니다

이번 시간에는 TypeScript의클레스 문법에서 제네릭을 사용하는 방법에 대해 정리하겠습니다

일반형 함수를 축약형 함수로

일반형

class User<P>{
    public payload: P
    constructor(payload: P){
        this.payload= payload
    }
    getPayload(){
        return this.payload
    }
}

축약형

class User<P>{
    constructor(public payload: P){
    }
    getPayload(){
        return this.payload
    }
}

일반형에서 payload가 4번이나 사용됩니다.

생성자 함수를 통해서 할당하는 내용의 함수라면 위와 같은 축약형을 사용할 수 있습니다

클래스에서 제네릭 문법

클래스를 만들 때 제네릭 문법

//TypeScript

class User<P>{
    public payload: P
    constructor(payload: P){
        this.payload= payload
    }
    getPayload(){
        return this.payload
    }
}

class User<P>{
}

✅

1. 클래스 이름 옆에다 <P> 를 선언합니다 P의 의미는 payload

class User<P>{
	public payload: P
    constructor(payload: P){
        this.payload= payload
    }
    getPayload(){
        return this.payload
    }
}

✅

1. 변수의 타입에도 “P”를 넣어줍니다 2. 생성자 매개변수에도 마찬가지

클래스를 사용할 때 제네릭 문법

//TypeScript

class User<P>{
    constructor( public payload: P){
    }
    getPayload(){
        return this.payload
    }
}

interface UserAType{
    name: string
    age: number
    isValid:boolean
}
interface UserBType{
    name: string
    age: number
    emails:string[]
}
const heropy = new User({ //인스턴스 부분
    name: 'Heropy',
    age: 85,
    isValid: true
})
const neo = new User<UserBType>({ ///인스턴스 부분
    name: 'neo',
    age: 15,
    emails: ['eno@gmail.com']
})

위와 같이 코드가 선언되어 있을 때 인스턴스를 생성하는 문법을

제네릭을 통해서 타입을 지정할 수 있습니다

const heropy = new User({ //인스턴스 부분
    name: 'Heropy',
    age: 85,
    isValid: true
})

위의 코드를 아래와 같이 수정 합니다

const heropy = new User<UserAType>({ //인스턴스 부분
    name: 'Heropy',
    age: 85,
    isValid: true
})

✅

1. User 인스턴스 이름 옆에다 <UserAType>제네릭 변수를 통해서 타입을 지정합니다 2. 이로써 heropy 인스턴스는 객체를 초기화 할 때 UserAType 인터페이스를 따르도록 하였습니다

const neo = new User<UserBType>({ ///인스턴스 부분
    name: 'neo',
    age: 15,
    emails: ['eno@gmail.com']
})

✅

neo 인스턴스 또한 <UserBType>제네릭 변수를 통해서 타입이 지정되었음으로 객체를 초기화 할 때 UserBType 인터페이스를 따라 초기화 합니다

정리

💡

User라는 클래스를 사용할 때마다 UserAType, UserBType의 타입같이 내용이 다른 타입을 만들고 싶다면 제네릭 문법을 이용해 선언한다면 타입을 유연하게 사용할수 있습니다.