[Typescript] 인터페이스(interface)[2]

인터페이스 상속

인터페이스 상속으로 인한 타입 정의를 확장하는 방법.

javascript 에서 클래스로도 상속을 구현할 수 있다

// Class
Class Person {
      constructor(name, age) {
        this.name = name;
        this.age = age;
    }

      logAge() {
        console.log(age);
    }
}

Class Developer extends Person {
    constructor(name, age, skill) {
        super(name, age);
          this.skill = skill;
    }

      logDeveloperInfo() {
        this.logAge();
        console.log(this.name);
        console.log(this.skill);
    }
}

const minki = new Developer("민기", 29, "js");
minki.logDeveloperInfo();

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

interface DeveloperInfo extends Person {
    skill: string;
}

const tom: DeveloperInfo = {
    name: "톰",
    age: 20,
    skill: "거미줄 타기"
}

인터페이스를 이용한 인덱싱 타입 정의

인터페이스로 객체와 배열의 인덱싱 타입을 정의하는 방법

배열의 인덱스는 숫자로 접근 할 수 있기 때문에 아래와 같이 사용한다.

interface StringArray {
  // [index: number] = 어떤 숫자든 속성의 이름이 될 수 있음
    [index: number]: string;
}

const companies: StringArray = ["네이버", "카카오", "토스"];

console.log(companies[0]); // "네이버"

객체의 인덱싱 타입 정의

interface SalaryMap {
    [level: string]: string;
}

const salary: SalaryMap = {
  junior: "2000원"
}

인덱스 시그니처

정확한 속성 이름을 명시하지 않고 속성 이름의 타입과 속성 값의 타입을 정의하는 문법을 인덱스 시그니처(index signature)라고 합니다.
단순히 객체와 배열을 인덱싱할 때 활용될 뿐 아니라 객체의 속성 타입을 유연하게 정의할 때도 사용된다.

interface User {
  	id: string;
  	name: string;
  	[property: string]: string
}