[TypeScript] Interface(인터페이스)

✅ Interface란?

인터페이스는 object(객체) 모양을 특정해주기 위한 것

 

interface Player {
    nickname: string,
    team: Team,
    health: Health
}

type Player = {
    nickname: string,
    team: Team,
    health: Health
}

 

타입과 같이 인터페이스는 객체의 형태를 특정해주는 역할을 합니다.

 

 

✏️ 타입과의 차이점

type(타입)은 모든 타입의 모양을 설명하는 역할을 할 수 있지만
interface(인터페이스)는 object(객체)의 모양만을 설명하는 역할만 할 수 있습니다.

 

 

// 에러
interface Hello = string;

 

위와 같은 코드는 사용할 수 없습니다.

 

 

✅ interface 상속

interface User {
    name: string
}

interface Player extends User {
}

const nico: Player = {
    name: "gildong"
}

 

클래스와 동일하게 인터페이스에 인터페이스를 상속하여 사용할 수 있습니다.

extends를 사용하여 User 인터페이스를 Player에게 상속해줍니다.

 

 

✅ interface를 type으로

type User = {
    name: string
}

type Player = User & {
}

const nico: Player = {
    name: "gildong"
}

 

상속에서 작성한 예시를 바탕으로 interface를 type으로 변환한 코드 예시입니다.

 

type에서는 extends 대신 & 기호를 사용하여 상속합니다.

 

객체를 설명할 때는 type보다는 interface를 선호하는데

이는 문법 구조가 더 객체지향 프로그래밍처럼 보이기 때문입니다.

 

 

✅ interface readonly

interface User {
    readonly name: string
}

 

readonly 키워드를 붙여 읽기 전용 속성으로 만들 수도 있습니다.

 

 

✅ interface property 축적

interface User {
    name: string
}

interface User {
    lastName: string
}

interface User {
    health: number
}

const nico: User = {
    name: "gildong",
    lastName: "hong",
    health: 10
}

 

같은 이름을 가진 interface를 반복해서 사용하면 다른 이름을 가진 property들을 누적시킬 수 있습니다.

이는 type에서는 불가능한 문법입니다.

 

 

✅ abstract class에서 interface로 변환

✏️ abstract class(추상 클래스)

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()}`
    }
}

 

위는 Player 클래스가 추상 클래스인 User 클래스를 상속받는 예시입니다.

이 예시를 기준으로 추상 클래스를 인터페이스로 바꿔보도록 합시다.

 

✏️ interface(인터페이스)

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()}`
    }
}

 

인터페이스는 객체의 형태만을 지정해주는 것이 아닌 클래스의 형태를 지정해줄 수 있습니다.

 

• 인터페이스로 변환한다면 우선 extends 대신 implements로 상속합니다.
• 인터페이스에서는 추상 클래스와 달리 constructor 메소드가 없기 때문에 상속받은 Player 클래스에서 constructor 메소드를 작성해야 합니다.
• 인터페이스를 상속한다면 요소들을 private이나 protected 키워드로 선언하지 못하고 public으로만 선언해야 합니다.

 

인터페이스를 사용하는 가장 큰 이유는 자바스크립트로 컴파일할 경우 인터페이스는 컴파일 되지 않아

자바스크립트 파일의 크기가 줄어든다는 장점이 있기 때문입니다.

 

 

✏️ class에 type 상속

type 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()}`
    }
}

 

interface와 같이 type도 implements를 통해 class에 상속시킬 수 있습니다.

 

 

✅ interface 중복 상속

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

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

 

하나의 클래스에서 여러 개의 인터페이스를 상속받을 수 있습니다.

이 때, 변경된 요소를 상속받은 클래스의 constructor 메소드에 요소를 포함시켜주어야 합니다.

 

 

✅ interface를 type처럼 사용

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

function makeUser(user: User) {
    return "hi"
}

makeUser({
    firstName: "gildong",
    lastName: "hong",
    fullName: () => "xx",
    sayHi: (name) => "string"
})

 

makeUser라는 함수에서 인자로 User 인터페이스를 사용하므로써 객체의 형태를 지정해줄 수 있습니다.

 

 

✅ return 타입으로 interface 사용

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

function makeUser(user: User): User {
    return {
        firstName: "gildong",
        lastName: "hong",
        fullName: () => "xx",
        sayHi: (name) => "string"
    }
}

makeUser({
    firstName: "gildong",
    lastName: "hong",
    fullName: () => "xx",
    sayHi: (name) => "string"
})

 

위의 예시를 확장하여 return 타입에도 인터페이스를 사용할 수 있습니다.

 

new User와 같이 인스턴스를 만들 필요 없이

내용물인 객체만 인자로 넣으면 함수를 사용할 수 있고 객체 형태인 return 값이 나오게 됩니다.