(TypeScript) - 인터페이스

■ 인터페이스

: 상호간에 약속된 규칙

 

객체 구조 정의하는데 특화된 문법 (상속, 합침 등)

interface Person {
    readonly name: string;
    age?: number;
    sayHi: () => void;
}

const person: Person = {
    name: '송송송',
    sayHi: function () {
        console.log('hi');
    },
};

 

인터페이스는 타입별칭과 타입 정의하는 것은 비슷하다.

 

? 를 사용하여 선택적 프로퍼티도 받을 수 있으며,

함수형으로 sayHi: () => void; 처럼 화살표 함수로 받거나

또는 sayHi(): void; 처럼 호출 시그니처로 받을 수 있다.

 

인터페이스로 받을때는 기본적인 호출 시그니처와 다르게 메서드 이름이 sayHi() 처럼 변수 앞에 붙는다.

 

그렇다면 왜 다를까?

type Func = {
    (): void;
};

const func: Func = () => {
    console.log('func');
};

 

이전에 우리가 배운 호출 시그니처는 다음과 같이

함수 매개변수와 반환값을 정해주는 말 그대로 함수 타입을 정의하는 타입이다.

 

즉 () 매개변수 아무것도 안받고, 반환값이 void 아무것도 반환하지 않은 것이다. 

 

interface Person {
    readonly name: string;
    age?: number;
    (): void;
}

const person: Person = {
    name: '송송송',
    sayHi: function () {
        console.log('hi');
    },
};

 

근데 만약 여기 코드를 ():void 로 받아서 호출 시그니처 처럼 () 만 사용하면

두 번째 Person 자체가 함수값을 정의하는 것이 된다.

 

따라서 해당 person은 함수가 아니라 오류가 난다.

즉, 인터페이스 프로퍼티를 정의할 때는 앞에 함수에 해당하는 변수명을 적어주면 된다.

 

person.sayHi();
person.sayHi(1, 2);

    sayHi(): void;
    sayHi(a:number, b:number): void;

 

다음과 같이 인터페이스에 오버로드 프로퍼티 설정을 위해서는

함수 타입 표현식이 아니라 호출 시그니처를 사용해주면 된다.

 

함수 타입 표현식은 두 개의 프로퍼티 작성하면 동일 변수명으로 오류가 뜨기 때문이다.

 

type Type1 = number | string;
type Type2 = number & string

const person: Person | number = {
    name: '송송송',
    sayHi: function () {
        console.log('hi');
    },
};

 

인터페이스는 기존 객체 정의와는 다르게

유니온 타입(합집합)과 인터섹션(교집합)이 불가능하다.

 

따라서 type 으로 유니온, 인터섹션을 이용하거나

Person | number 와 같이 인터페이스 말고 타입 자체를 유니온 또는 인터섹션 타입으로 받아야 한다. 

 

※ 참고

• 인터페이스를 정할 때 변수명에 I를 붙이는 경우도 종종 있다. = 헝가리안 표기법 (팀 표기법을 따르는 걸 추천!)
• JavaScript 는 _ 를 쓰는 스네이크 표기법이나,
  userName 과 같은 카멜 표기법,
  UserName 모두 대문자 표시인 파스칼 표기법을 한다.