[ TypeScript ] Interface

Interface

• 인터페이스란 Type Alias 방식과 동일하게 타입에 이름을 지어주는 또 다른 문법이다.
• 인터페이스는 특히 객체의 타입을 지정하는데 특화 된 문법이다.
• 사용법은 아래와 같다

// 😀 Person이라는 객체 타입을 interface로 만들었다.
interface Person {
  name: string;
  age: number;
}

// 😀 person이라는 객체는 Person이라는 interface를 따른다
const person: Person = {
  name: "한대희",
  age : 31
};

• interface도 선택적 프로퍼티와 읽기 전용 프로퍼티 설정이 가능하다.

// 😀 name은 읽기 전용, age는 선택적 프로퍼티로 적용
interface Person {
  readonly name: string;
  age?: number;
}

// 😀 age는 선택적 프로퍼티 이기 때문에 입력하지 않아도 된다.
const person: Person = {
  name: "한대희",
};

// 😀 name은 읽기 전용이기 때문에 점 표기법으로 접근할 수 없다.
person.name // 🔥 에러 발생

• 객체 안에는 함수도 들어갈 수 있기 때문에 interface는 함수의 타입도 지정이 가능하다.

interface Person {
  readonly name: string;
  age?: number;
  func: () => void;;
}

• 🔥 추가적으로 interface는 union타입과 intersection타입은 지정할 수 없다.

Interface 확장

• 만약 여러 개의 interface가 있는데 각 interface마다 공통 되는 프로퍼티가 있으면 하나하나 입력하지 않고 확장 기능을 사용하면 된다.
• interface에 extends를 붙여 사용 한다.

// 😀 아래의 interface를 살펴 보면 모든 interface가 name과 age 프로퍼티를 가지고 있다.
interface People {
  name: string;
  age: number;
}

interface Person1 {
  name: string;
  age: number;
  height : number;
}

interface Person2 {
  name: string;
  age: number;
  weight: number;
}

interface Person3 {
  name: string;
  age: number;
  gender: string;
}

// 😀 확장 기능을 사용하면 공통된 프로퍼티를 상속 받을 수 있다.
interface People {
  name: string;
  age: number;
}

interface Person1 extends People {
  height : number;
}

interface Person2 extends People {
  weight: number;
}

interface Person3 extends People {
  gender: string;
}

// 😀 여러개의 interface를 상속 받을 수도 있다.
interface Person4 extends Person1, Person2 {
	  name: string;
  	  age: number;
      height : number;
      weight: number;
}