[TypeScript] 인터페이스

⚡️ 인터페이스

상호간에 약속된 규칙

타입에 이름을 지어주는 또 다른 문법 + 객체의 구조를 정의하는 데 특화된 문법으로 타입 별칭에서는 제공하지 않는 상속, 합침 등의 특수한 기능을 제공한다.

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

const person:Person = {
    name: 'kiji', 
    // age: 28, -> 선택적 프로퍼티
};

person.name = '기지'; // ⚡️❌ -> 읽기전용으로 재할당이 불가능

인터페이스를 정의하고 타입 주석과 함께 사용해 변수의 타입을 정의하며 기본적인 기능을 타입 별칭과 거의 같다.

 

 

 

 

 

 

⚡️ 메소드 타입

함수 타입 표현식을 이용하거나 호출 시그니쳐를 이용해 메소드 타입을 정의한다.

interface Person {
    readonly name: string;
    age?: number;
    // 메소드도 인터페이스에서 타입 정의가 가능
    // 함수 타입 표현식
    // sayHi: ()=> void;
    // 또는 호출 시그니쳐를 이용 -> 메소드 이름이 소괄호 앞에 붙음
    sayHi(): void;
    // 매개변수에 따라 다르게 호출 -> 오버로드 시그니쳐 만들기
    sayHi(a:number, b:number): void;

};

// sayHi를 매개변수에 따라 다르게 정의하는 경우 -> 함수타입 표현식이 아닌 호출 시그니쳐로 정의
person.sayHi();
person.sayHi(1, 2)

하지만 메소드의 오버로딩을 구현하기 위해서는 호출 시그니쳐를 이용해야한다. 함수 타입 표현식을 이용할 시, 동일한 이름의 함수를 두 번 정의하는 것과 같기 때문!!

 

 

 

 

 

⚠️ 인터페이스 이용시 주의할 점 ⚠️

인터페이스에서는 유니온이나 인터섹션 타입을 정의할 수 없다.

인터페이스로 만든 타입을 유니온 또는 인터섹션으로 이용해야 할 경우 타입 별칭과 함께 사용하거나 타입 주석에서 직접 사용해야 한다.

// 인터페이스 객체 타입은 유니온이나 인터섹션 불가능
// -> 타입 별칭 또는 타입 주석에 사용
// 타입 별칭
type Person1 = Person | number;
type Person2 = Person & string & number;

// 타입 주석
const person2: Person | string = {
    name: 'kiji',
    sayHi: function(){
        console.log('Hi');
    }
}

 

 

 

 

---

🔗 타입스크립트 강의

한 입 크기로 잘라먹는 타입스크립트(TypeScript) - 인프런 | 강의