[Typescript] Class, Abstract class, Interface

 

Class

Typescript를 통해 Javascript의 객체지향 코드를 더 안전하고 좋은 코드로 만들 수 있다.

• 파라미터만 써주면 constructor가 알아서 컴파일된다.
• 접근제어자를 통해 접근 가능한 범위를 설정해줄 수 있다.

class Player {
    constructor (      
        private firstName: string, // class 내부에서만 사용 가능
        public lastName: string, // 모두 사용 가능
    ){}
}

const jessie = new Player('jessie', 'Y') // 인스턴스 생성
jessie.firstName // 🚨 접근불가
jessie.lastName // 👍🏻 접근가능

 

 

Abstract Class

추상클래스는 다른 클래스가 상속받아 사용할 수 있는 클래스이다.

추상클래스로 직접 인스턴스를 만들수는 없으며, JS에서는 그냥 class로서 컴파일된다.

내부에 직접 메소드를 구현할수도 있고, 추상메소드는 경우 타입만 정의해 자식 클래스에서 각각 구현내용을 정의하도록 할수도 있다.

abstract class Player {
    constructor (
        private firstName: string, // 해당 클래스에서만 접근 가능
        protected lastName: string, // 자식 클래스까지 접근 가능
        public nickName: string // 모두 접근 가능
    ){}
    getNickname() {
        console.log(this.firstName) // 메소드 직접 구현
    }
    abstract getLastname(): void // 추상메소드로 타입만 정의
}

class User extends Player {
    getLastname() {
        console.log(this.lastName)
        // 추상메소드 구현내용은 자식클래스에서 작성 (구현하지 않으면 에러)
    }
}

const jessie = new User('jessie', 'Y', 'yojessie') // 인스턴스 생성

 

 

 

Interface

인터페이스는 타입과 비슷하지만, 몇가지 다른점이 있다.

 

Type

- 오브젝트의 타입을 정해줄 수 있다.

- 타입을 다른타입에 활용하는 등 사용자 지정 타입을 만들어줄 수 있다. (alias type)

- 타입이 특정 '값'을 가지도록 제한할 수 있다.

 

Interface

- 오브젝트의 타입을 특정하는 용도로만 사용할 수 있다.

 

type Player = {
    name: string,
    health: number
}

// 약간의 표기법이 다를 뿐, 둘은 같은 역할을 한다.

interface Player2 {
    name: string,
    health: number
}

 

 

 

Interface를 사용하는 이유 1

하지만 인터페이스는 class와 비슷한 문법구조로 사용할 수 있어 OOP에 잘 맞으므로 더 선호된다.

interface Player {
    name: string,
    health: number
}

interface Player2 extends Player {
    // 다른 인터페이스를 extends로 받아 사용할 수 있다.
}

const jessie: Player2 = {
    name: 'jessie',
    health: 10
}

 

 

Interface를 사용하는 이유 2

인터페이스를 중첩해서 선언해도 알아서 하나의 인터페이스로 합해진다.

interface Player {
    name: string
}
interface Player {
    health: number
}

const jessie: Player = {
    name: 'jessie',
    health: 10
}

 

 

Interface를 사용하는 이유 3

인터페이스는 컴파일된 코드가 더욱 가벼워질 수 있게 한다.

 

추상클래스를 사용하는 경우를 생각해보자.

추상클래스는 여러 클래스의 타입을 표준화 시켜주기 위해 사용하는데,

직접 인스턴스를 만들지도 못하는 추상클래스가, JS로 컴파일 되었을때 일반 클래스의 형태로 변환되어 남게된다.

 

이때 인터페이스를 사용하면, TS에서는 클래스가 상속할 수 있는 타입을 정의해 보호하면서도

JS에서는 인터페이스로 정의된 부분이 컴파일 되지 않고 사라진다. (가벼워진다.)

interface User {
    userName: string
    sayHi(name: string): void
} // JS로 컴파일되면 사라지는 부분

class Player implements User {
    constructor (
        public userName: string
    ){}
    sayHi(name: string) {
        console.log(`Hello ${name}. I am ${this.userName}`)
    }
}

const jessie = new Player('jessie')
jessie.sayHi('Tom')