클래스와 인터페이스

📋 클래스와 인터페이스

클래스를 사용할 때 추상클래스를 상속받는 경우 컴파일 이후에 브라우저에 추상클래스에 관한 코드도 남게 되어 런타임 성능에 영향을 끼칠 수 있다.

그러므로 컴파일 이후 브라우저에 남지 않는 interface와 implements를 사용해 최적화를 할 수 있다.

클래스에서 인터페이스를 상속받을 때에는 인터페이스의 속성값을 클래스의 프로퍼티로 명시해주어야 한다.

단 프로퍼티를 명시할 때 private, protected 접근제어자는 사용할 수 없으며 반드시 public으로 지정해주어야 한다.

• 인터페이스 기본 상속법

interface Info {
    name : string,
    age : number
    sayHi() : string
}

class User implements Info {
    constructor(
        public name : string,
        public age : number
    ) {}
    sayHi() {
        return `hello my name is ${this.name}, ${this.age} years old`;
    }
}

여러개의 인터페이스를 상속하고자 할때에는 인터페이스를 쉼표로 구분해 상속해주면 된다.

상속하고자 하는 인터페이스의 속성은 모두 프로퍼티로 명시해주어야 한다.

• 여러개의 인터페이스 상속받기

interface Info {
    name : string,
    age : number
    sayHi() : string
}

interface ExtraInfo {
    health : number,
    location : string
    isStrong() : string
}

class User implements Info, ExtraInfo {
    constructor(
        public name : string,
        public age : number,
        public health : number,
        public location : string
    ) {}
    sayHi() {
        return `hello my name is ${this.name}, ${this.age} years old`;
    }
    isStrong() {
        if(this.health > 10) {
            return `you are strong`;
        }
        else {
            return `you are weak`;
        }
    }
}

클래스와 인터페이스의 공통점?

클래스, 인터페이스는 모두 어떠한 값의 타입으로 사용할 수 있다.

아래 예시에서 매개변수의 타입으로 사용한 것처럼 리턴 값으로도 사용할 수 있다.

매개변수, 리턴값으로 사용하더라고 인터페이스의 내용만 채워주면 되는 것이다.

// 인터페이스를 매개변수의 타입으로 사용하기
interface Info {
    name : string,
    age : number
    sayHi() : string
}

function ts(user : Info) {
    return "Hi";
}

ts({
    name : "lee",
    age : 20,
    sayHi : () => "hello"
})

// 인터페이스를 리턴값으로 사용하기
interface Info {
    name : string,
    age : number
    sayHi() : string
}

function ts() : Info {
    return {
        name : "Lee",
        age : 20,
        sayHi : () => "hello"
    };
}

참고

노마드코더