[Typescript] 인터페이스(2)

3️⃣ 인터페이스 확장

TypeScript는 인터페이스가 다른 인터페이스의 모든 멤버를 복사해서 선언할 수 있는 확장된 인터페이스를 허용한다.

interface Book {
    page : number;
}
interface Novel extends Book {
    title : string
}

let myBook : Novel = {
    page : 100,
    title : "hello world"
}

console.log(myBook.page, myBook.title);

3️⃣ - 1. 재정의된 속성

파생 인터페이스는 다른 타입으로 속성을 다시 선언해 기본 인터페이스의 속성을 재정의하거나 대체할 수 있다.

interface TsPractice{
    name : string | null;
}
interface TsPracticeOne extends TsPractice{
    name : string;
}
interface WrongTsPractice extends TsPracticeOne{
    name: number | string;
    /*
        Error: Interface WrongTsPractice incorrectly extends interface TsPracticeOne
        Types of property name are incompatible.
        Type string | number is not assignable to type string
        Type number is not assignable to type string
     */
}

TypeScript의 타입 검사기는 재정의된 속성이 기본 속성에 할당되어있도록 강요한다.
🗝️즉, 자식 인터페이스의 키:값 타입은 항상 부모 인터페이스 키:값 타입안에서 존재해야한다.🗝️

3️⃣ - 2. 다중 인터페이스 확장

TypeScript의 인터페이스는 여러개의 다른 인터페이스를 확장해서 선언할 수 있다.

interface TsPracticeOne{
    givesNumber() : number;
}
interface TsPracticeTwo{
    givesString() : string;
}
interface TsPracticeThree extends TsPracticeOne,TsPracticeTwo{
    givesEither() : number | string;
}

function printTsPractice(practice: TsPracticeThree){
    practice.givesNumber();
    practice.givesString();
    practice.givesEither();
}

---

4️⃣ 인터페이스 병합

🌠인터페이스의 중요한 특징 중 하나는 서로 병합하는 능력이다.

두개의 인터페이스가

① 동일한 이름

② 동일한 스코프

에 선언된 경우에 선언된 모든 필드를 포함하는 더 큰 인터페이스가 코드에 추가된다.

interface Merged{
    one : number
}
interface Merged {
    two : number
}
/*
Result
interface Merged{
    one: number;
    two: number
}
 */

허나 개발을 할때에 동일한 이름을 가진 인터페이스를 한번더 선언하는 것은 코드의 가독성을 해친다.

❓그럼 언제쓰냐...?

인터페이스 병합은 외부 패키지 또는 Window 같은 내장된 전역 인터페이스를 보강하는데 특히 유용하다.

아래의 코드를 보자..

interface Window{
    myEnvironmentVariable : string;
}
window.myEnvironmentVariable = "myEnvironmentVariable";

이 코드는 기본 TypeScript 컴파일러 옵션을 사용할 때 파일에서 myEnvironmentVariable 속성이 있는 Window 인터페이스를 선언하며 사용하고 있는 모습이다.

4️⃣ - 1. 이름이 충돌되는 멤버

속성과 메서드

속성

병합한 인터페이스는 타입이 다른 동일한 이름의 속성을 여러 번 선언할 수 있다.

이 때 속성이 이미 인터페이스에 선언되어 있다면 병합된 인터페이스에서도 동일한 타입을 사용해야한다. 

interface MergedProperties{
    same : (input:boolean) => string;
    different : (input:string) => string;
}
interface MergedProperties{
    same : (input:boolean) => string;
    different : (input:number) => string;
    /*
        Error: Subsequent property declarations must have the same type. 
        Property different must be of type (input: string) => string, 
        but here has type (input: number) => string
        index.ts(3, 5): different was also declared here.
     */
}

 

메서드

병합된 인터페이스는 동일한이름과 다른 시그니처를 가진 메서드는 정의할 수 있다.

interface MergedProperties{
    different(input:string) : string;
}
interface MergedProperties{
    different(input:number) : string;
}

 

사용할때는 객체를 interface로 정의할때 메서드의 인자로 들어갈 속성의 값을 유니언 타입으로 만들어주어야한다.

interface MergedProperties{
    different(input:string) : string;
}
interface MergedProperties{
    different(input:number) : string;
}
let obj : MergedProperties= {
    different(input:number|string){
        return "I'm different";
    }
}
console.log(obj.different(1));