TypeScript 기본 개념 공부 #5

 

2023.04.08 - [Language/TypeScript] - TypeScript 기본 개념 공부 #4

TypeScript 기본 개념 공부 #4

Interface

인터페이스는 타입과 비슷하지만 다른 부분이 있다.

type User = {
    name: string,
    age: number,
    gender: string
}

const me: User = {
    name: "jun",
    age: 25,
    gender: "M"
}

위와 같이 User라는 타입을 만들고 me 변수의 타입으로 User를 지정해 주었다.

여기서 타입이 아닌 인터페이스를 이용해 object를 설정할 수 있다.

interface User {
    name: string,
    age: number,
    gender: string
}

const me: User = {
    name: "jun",
    age: 25,
    gender: "M"
}

이렇게 작성해도 정상적으로 작동할 것이다.

가장 먼저 이해해야 할 것은 type은 string 배열이나 object나 원하는 모든 것이 될 수 있다.

type 키워드는 interface 키워드에 비해 좀 더 활용할 수 있는 게 많다는 것이 첫 번째 차이이다.

interface User {
    name: string
}

interface Player extends User {

}
const me: Player = {
    name: "jun"
}

상속을 할 때에는 interface의 경우에는 클래스의 상속처럼 문법을 사용할 수 있다. 이것이 두 번째 차이이다.

type User = {
    name: string
}

type Player = User & {

}
const me: Player = {
    name: "jun"
}

type을 이용해서 상속을 구현할 수도 있다. 위와 같이 &(and) 연산자를 이용해 구현하면 된다.

또한 interface는 동일한 이름으로 여러 개를 만들 수 있다. 예를 들어보면

interface User {
    name: string
}

interface User {
    age: number
}

interface Player extends User {

}
const me: Player = {
    name: "jun",
    age: 25
}

세 번째 차이로는 이렇게 각각 name과 age 프로퍼티를 가지고 있는 User 인터페이스가 있다고 하면 타입스크립트는 이것을 합쳐준다.

type User = {
    name: string
}

type User = {
    age: number
}

type Player = User & {

}
const me: Player = {
    name: "jun",
    age: 25
}

type을 이용하면 User가 중복된다고 동작되지 않을 것이다.

abstract class User {
    constructor(
        protected firstName: string,
        protected lastName: string
    ) {}
    abstract sayHi(name: string): string
    abstract fullName(): string
}

class Player extends User {
    fullName(){
        return `${this.firstName} ${this.lastName}`
    }
    sayHi(name: string){
        return `Hello ${name}. My name is ${this.fullName}`
    }
}

이 코드는 추상 클래스(User)를 만들고 클래스(Player)가 추상 클래스를 상속받는다.

표준화된 프로퍼티와 메서드를 갖도록 해주는 청사진(설계도면, 틀)을 만들기 위해 추상 클래스를 사용한다.

추상 클래스는 말 그대로 틀이기 때문에 자바스크립트로 컴파일될 때 필요가 없다.

하지만 타입스크립트에서 만든 추상 클래스는 자바스크립트로 컴파일되면서 일반 클래스로 바뀐다.

인터페이스는 컴파일하면 자바스크립트로 바뀌지 않고 없어진다.

그래서 추상 클래스를 인터페이스로 바꾸는 것이 좋다.

위의 추상 클래스를 인터페이스로 바꾸면 이렇게 된다.

interface User {
    firstName: string,
    lastName: string
    sayHi(name: string): string
    fullName(): string
}

class Player implements User {
    constructor(
        protected firstName: string,
        protected lastName: string
    ) {}
    fullName(){
        return `${this.firstName} ${this.lastName}`
    }
    sayHi(name: string){
        return `Hello ${name}. My name is ${this.fullName}`
    }
}

인터페이스에는 constructor가 없다. 오브젝트나 클래스 모양으로 바꿔줘야한다.

그리고 Player 클래스가 인터페이스를 상속하도록 해주면 되는데 기존에 사용하던 extends 키워드를 사용하면 자바스크립트로 바뀐다.

그렇다면 implements 키워드를 사용해서 인터페이스를 상속하도록 해주면 된다.

이제 Player 클래스에 constructor를 생성하고 프로퍼티를 넣는다. 이외에 메서드도 만들어 주면 된다.

하지만 지금 이 상태의 코드를 보면 동작하지 않을 것이다.

interface User {
    firstName: string,
    lastName: string
    sayHi(name: string): string
    fullName(): string
}

class Player implements User {
    constructor(
        public firstName: string,
        public lastName: string
    ) {}
    fullName(){
        return `${this.firstName} ${this.lastName}`
    }
    sayHi(name: string){
        return `Hello ${name}. My name is ${this.fullName}`
    }
}

지금 프로퍼티들이 protected로 되어 있어 그렇다. User 인터페이스에서 public으로 되어 있어 public으로 지정해줘야 한다.

이렇게 하고 자바스크립트를 보면 더 이상 추상 클래스를 사용하지 않는다.