TypeScript에서 인터페이스를 만드는 방법

인터페이스와 클래스는 TypeScript에서 사용자 정의 유형을 만드는 데 사용됩니다. 이것들은 비슷하지만 아래에 언급하고 싶은 중요한 차이점도 있습니다.

인터페이스와 클래스의 차이점

인터페이스
클래스


새 유형 정의
새 유형 정의

속성(서명)
속성(구현 포함)

방법(서명)
방법(구현 포함)

인스턴스화할 수 없음
인스턴스화 가능

인터페이스 생성

interface 키워드는 인터페이스 이름 다음에 인터페이스를 생성하는 데 사용됩니다.

interface Employee {
  name: string;
  title: string;
}

여기서 Employee는 2개의 문자열 속성 'name'과 'title'이 있는 인터페이스 이름을 나타냅니다.
복잡한 예를 살펴보자

interface Manager extends Employee {
  department: string;
  numOfEmployees: number;
  scheduleMeeting: (topic: string) => void;
}

이제 이 Manager 인터페이스는 Employee 인터페이스의 모든 속성을 상속합니다. 즉, Manager 인터페이스에는 이름, 직위, 부서 및 numOfEmployees의 4가지 속성이 있습니다.
위에서 언급했듯이 인터페이스에는 메서드 구현이 없습니다. 따라서 Manager 인터페이스를 상속하는 모든 개체는 이에 따라 scheduleMeeting 메서드를 정의합니다.

인터페이스 구현

위에서 언급한 Employee 인터페이스를 구현하는 모든 개체에는 문자열 유형의 속성이 2개 있어야 합니다.

  let newEmployee1: Employee = {
    name: 'Sarah',
    title: 'Software Engineer',
  }

다른 예를 보자

  let newEmployee2: Employee = {
    name: 'James',
    title: 'Team Lead',
    teamName: 'Alpha squad'
  }

이제 newEmployee2에는 하나의 추가 속성teamName이 있지만 객체에 인터페이스의 모든 필수 속성이 있는 한 인터페이스를 상속/확장할 수 있기 때문에 여전히 Employee 인터페이스를 상속합니다.
이를 구조형 시스템이라고도 합니다.

인터페이스의 선택적 멤버

함수의 선택적 매개변수에서 했던 것처럼 인터페이스의 선택적 멤버를 선언할 수도 있습니다.

interface Person {
  firstName: string;
  lastName: string;
  midName?: string;
}

인터페이스를 구현하는 동안 인터페이스의 선택적 멤버를 건너뛸 수 있으며 컴파일러는 오류를 제공하지 않습니다.

부담없이 접속하세요