[TypeScript] 인터페이스 (Interface)

인터페이스 (Interface)

  - 객체의 구조를 정의하는 문법

  - 객체의 형태를 사전에 정의함으로써, 예상치 못한 에러를 방지할 수 있음

 

# 객체 구조 정의

interface Person {
    name: string;
    age?: number; // ?를 붙이면 옵션 속성이 됨
}

--------------------

// 정상 작동
const person: Person = {
    name: "John",
    age: 30
};

// gender 속성은 정의되어 있지 않기 때문에 에러 발생
const person: Person = {
    name: "John",
    age: 30,
    gender: 'M'
};

 

# 함수 파라미터 타입 정의

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

// string 타입의 name과 number 타입의 age 속성을 갖는 객체만 인자로 받을 수 있음
function getName(person: Person) {
	return person.name;
}

 

# 함수 반환 타입 정의

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

// Person 타입의 객체를 반환하지 않으면 에러 발생
function getPerson(person: Person): Person {
    return person;
}

 

---

인터페이스 상속

  - 인터페이스는 다른 인터페이스를 상속받아 확장할 수 있음

     → 인터페이스 간의 중복 감소

  - 반드시 부모 인터페이스에 정의된 속성들을 자식 인터페이스에서 모두 보장해주어야 함

     ex) 부모 인터페이스에서 name 속성을 string으로 정의했을 때,

           자식 인터페이스가 name 속성을 number로 재정의하려고 하면 에러 발생

interface Animal {
    name: string;
}

interface Dog extends Animal {
    breed: string;
}

const myDog: Dog = {
    name: "Buddy",
    breed: "Golden Retriever"
};

 

# 계층적으로 확장 가능

interface Animal {
    hasLife: boolean;
}

interface Mammal extends Animal {
    hasFur: boolean;
}

interface Human extends Mammal {
    name: string;
    age: number;
}

const person: Human = {
    hasLife: true,  // Animal에서 상속된 속성
    hasFur: false,  // Mammal에서 상속된 속성
    name: "Alice",  // Human에서 추가된 속성
    age: 30         // Human에서 추가된 속성
};

 

# 다중 상속 가능

interface Flyer {
    fly(): void;
}

interface Swimmer {
    swim(): void;
}

interface FlyingFish extends Flyer, Swimmer {}

const flyingFish: FlyingFish = {
    fly() {
        console.log("Flying through the air!");
    },
    swim() {
        console.log("Swimming in the water!");
    }
};