[패캠] 타입스크립트 문법 - 제네릭 클래스 (generic) (16/20)

Fastcampus 프론트엔드 개발 강의

💡 본 타입스크립트 문법 시리즈는,
     패캠의 '프론트엔드 웹 개발의 모든 것 초격차 패키지 Online'에 있는 TS 강의 노트이다.

 

현재 수강 중인 패스트캠퍼스(fastcampus, 이하 패캠) 프론트엔드 패키지 강의가 있다.

강사님은 김영웅(Heropy) 님이다.

이 글을 쓰면서 강사님의 블로그에 '한눈에 보는 타입스크립트' 자료가 있다는 것을 알게 됬다... (바보😅)

 

강의를 듣는데, 강의자료가 없어서 일일이 강사님이 말씀을 따라 적으면서 강의 교안(?), 강의 노트를 작성했다.

혹시나 나처럼 패캠에서 타입스립트(TypeScript)를 수강하는 사람들에게 도움이 되면 좋겠다. 🔥

 

16. 제네릭 - 클래스

---

함수에 적용한 제네릭 문법과 동일한 방식으로 클래스에도 적용해볼 수 있다.

 

클래스 선언 시 제네릭 문법의 적용

속성에 타입 지정도 안되어 있고, 아직 수정하지 않은 상태의 코드이다.

class User {
    public payload
    constructor(payload) {
         this.payload = payload
    }
    constructor(public payload: P) {

    }
    getPayload() {
        return this.payload
    }
}

위의 코드에 제네릭 문법을 적용하고 중복된 코드를 제거해주면 아래와 같이 수정될 수 있다. 중복된 타입 지정과 속성 할당을 위해 4번이나 반복 작성해야 되는 payload을 1번으로 줄였다.

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

대신 축약해서 작성한 내용이 어떤 내용인지 우리가 확실하게 이해하는 것이 필요하다.

 

클래스 사용 시 제네릭 문법의 적용

클래스도 함수 경우와 같이 (생성자) 함수를 호출할 때 제네릭 문법을 사용할 수 있다. 사용 방법은 클래스의 이름 뒤에 꺽쇠 괄호를 열고 닫아서 타입 변수 이름을 작성한다.

User라는 이름의 클래스를 사용할 때마다 다른 타입의 데이터를 만들고 싶다면, 제네릭 문법을 적용해서 타입을 필요에 따라서 유연하게 사용할 수 있다.

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<UserAType>({
    name: 'Heropy',
    age: 85,
    isValid: true,
    // emails: []
})
const neo = new User<UserBType>({
    name: 'Neo',
    age: 102,
    emails: ['neo@gmail.com']
})

직전에 배운 함수에 적용한 제네릭 문법과 같이, 생성자 함수 호출 시에 클래스의 이름 뒤에 꺽쇠 괄호를 열고 닫아서 타입을 제공하거나, 클래스를 선언할 때 타입 변수를 지정하는 코드를 만들어 줄 수 있다.

 

 

Reference

---

김영웅 강사님 블로그 中 TS 파트

https://heropy.blog/2020/01/27/typescript/

한눈에 보는 타입스크립트(updated)

 

김영웅 강사님 유튜브 채널

https://www.youtube.com/channel/UCcjhMpoaNvyy0StN9KgtF6w

HEROPY