TypeScript - interface

index signature

Index Signature은 객체의 속성 이름과 타입이 미리 정의되어 있지 않을 때, 객체에 동적으로 속성을 추가할 수 있는 방법을 제공한다.

기본형태

interface Obj{
    [key : T] : U
}

// T : 인덱스의 타입 (대부분 string 이나 number)
// U : 값의 타입

사용 예시

type Score = "A" | "B" | "C"

interface User {
    name: string
    age: number
    [grade: number]: Score
}


let user: User = {
    name: "xx",
    age: 30,
    1: "A",
    2: "B",
}

index signature를 사용하면 타입 체크 시 유연성이 증가하지만, 해당 객체의 명확한 구조를 판단할 수 없기 때문에 주의해서 사용해야 한다.

implements

클래스가 특정 인터페이스를 충족시키도록 강제하는 데 사용한다. 인터페이스는 메서드와 속성의 이름 및 타입을 정의할 수 있는 구조적 타이핑 시스템의 일부이다.

클래스가 인터페이스를 구현할 때, 그 클래스는 인터페이스에 정의된 모든 속성과 메서드를 구현해야 한다.
이를 통해서 typescript는 타입 안정성을 제공하며, 객체 지향 디자인 원칙을 따르는 코드를 작성하는데 도움이 된다.

사용 예시

interface Animal {
    speak() : string;
}

class Dog implements Animal{
    speak(){
        return '멍!'
    }
}

Dog 클래스는 Animal 인터페이스를 구현하기 때문에 speak 메서드가 포함되어야 한다.

만약 Dog 클래스에서 speak 메서드가 없다면 오류가 발생할 것이다.

핵심

• 클래스는 여러 인터페이스를 구현할 수 있으며 각 인터페이스는 쉼표로 구분된다.

class A implements a,b,c {}

• 'implements'는 클래스가 인터페이스의 구조적 계약을 준수하도록 강제하여, 타입 안정성과 예측 가능한 코드 구조를 제공한다.
• 인터페이스 내의 속성이 선택적(optional) 일 때, 클래스는 그 속성을 반드시 구현할 필요가 없다.

interface Employee {
    id:number;
    name:string;
    email?:string;
}


class PartTimeEmployee implements Employee {
    id:number
    name:string

    constructor(id:number, name:string){
        this.id = id;
        this.name = name;
    }
}

class FullTimeEmployee implements Employee {
    id:number
    name:string
    email:string

    constructor(id:number, name:string, email:string) {
        this.id = id;
        this.name = name;
        this.email = email;
    }
}

PartTimeEmployee와 FullTimeEmployee 모두 Employee 인터페이스를 이용하여 구현했지만, email은 선택적 요소로 필요한 클래스에서만 포함하여 구현할 수 있다.

extends

인터페이스를 확장할 때 사용할 수 있다.

interface Car {
    color:string;
    wheel:number;
    start():void;
}

interface Bmw extends Car{
    door:number;
    stop():void;
}

interface Toy {
    type : string
}

const bmw :Bmw = {
    door: 4,
    wheel: 4,
    color: 'blue',
    stop : () => {
        console.log("stop!!")
    },
    start: ()=>{
        console.log('start!!')
    }
}

interface BmwToyCar extends Bmw, Toy {
    price : number
}

const bmwtoycar : BmwToyCar = {
    price: 0,    
    door: 0,    
    stop: ()=>{},    
    color: "",    
    wheel: 0,    
    start: ()=>{},    
    material: ""
}

Bmw 인터페이스를 이용하게 되면 Bmw 내부에서 쓴 것뿐만 아니라 Car 안에 포함되어 있는 속성도 다 작성해야 한다.

implements와 마찬가지로 여러 인터페이스를 이용해서 확장할 때 쉼표로 구분한다.

 

 

[코딩앙마 : https://youtu.be/OIMPLNICzoc?si=xi9nbAoIzi_76lcg]