인터페이스

인터페이스란 타입 별칭과 동일하게 타입에 이름을 지어주는 또 다른 문법

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

const person: Person = {
  name: "이정환",
  age : 27
};

➡️ 선택적 프로퍼티

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

const person: Person = {
  name: "이정환",
  // age: 27,
};

➡️ 읽기 전용 프로퍼티

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

const person: Person = {
  name: "이정환",
  // age: 27,
};

person.name = '홍길동' // ❌(오류발생)

➡️ 메서드 타입 정의하기

interface Person {
  readonly name: string;
  age?: number;
  //#1. 함수타입표현식
  sayHi: () => void;
  //#2.호출시그니쳐
  sayHi(): void;
}

➡️ 메서드 오버로딩

interface Person {
  readonly name: string;
  age?: number;
  // 함수 타입 표현식으로 메서드의 타입을 정의하면 메서드의 오버로딩 구현이 불가능합니다.
  sayHi: () => void; // ❌(오류 발생)
  sayHi: (a: number, b: number) => void; // ❌(오류 발생)
  
  //호출 시그니처를 이용해 메서드의 타입을 정의하면 오버로딩 구현이 가능합니다.
  sayHi(): void;
  sayHi(a: number, b: number): void;
}

person.sayHi1();
person.sayHi1(1,2);

➡️ 하이브리드 타입

//인터페이스또한 함수이자 일반 객체인 하이브리드 타입을 정의할 수 있습니다.
interface Func2 {
  (a: number): string;
  b: boolean;
}

const func: Func2 = (a) => "hello";
func.b = true;

➡️ Union이나 Intersection 타입 사용시 주의할 점

• 타입 별칭에서는 Union이나 Intersection 타입을 정의할 수 있었던 반면 인터페이스에서는 할 수 없습니다.

// (오류 발생)
type Type1 = number | string;
type Type2 = number & string;

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

• Union이나 Intersection 타입을 정의 방법
• 인터페이스로 만든 타입을 Union 또는 Intersection으로 이용해야 한다면 다음과 같이 타입 별칭과 함께 사용하거나 타입 주석에서 직접 사용해야 합니다.

type Type1 = number | string | Person;
type Type2 = number & string & Person;

const person: Person & string = {
  name: "이정환",
  age: 27,
};