TypeScript의 인터페이스를 사용하여 클래스 구현 메서드 및 속성을 만드는 방법은 무엇입니까?

Originally posted here!

class 이 특정 메서드나 속성을 구현하도록 만들거나 강제하려면 interface를 사용하여 필요한 메서드와 속성을 구현하도록 할 수 있습니다.

이를 위해 먼저 클래스 이름을 쓰고 implements 키워드를 쓰고 그 다음에 사용해야 하는 interface의 이름을 쓰고 클래스 본문을 쓸 수 있습니다.

TL;DR

// a simple car structure interface
interface CarStructure {
  name: string;
  yearMade: number;
  startEngine: () => void;
}

// a class that satisfies the `CarStructure` interface
// using the `implements` keyword
class Car implements CarStructure {
  name: string;
  yearMade: number;

  constructor(name: string, yearMade: number) {
    this.name = name;
    this.yearMade = yearMade;
  }

  startEngine() {
    console.log("Car started...");
  }
}

예를 들어 먼저 해당 유형과 하나의 메서드 시그니처가 있는 2개의 속성이 있는 단순interface을 생성해 보겠습니다.

다음과 같이 할 수 있습니다.

// a simple car structure interface
interface CarStructure {
  name: string;
  yearMade: number;
  startEngine: () => void;
}

위의 코드에서 볼 수 있듯이 name 및 yearMade라는 2개의 속성을 각각 string 및 number로 정의했습니다. 또한 매개 변수가 필요하지 않고 값을 반환하지 않는 메서드 시그니처startEngine도 정의했습니다.

이제 class를 생성한 다음 클래스가 CarStructure 키워드를 사용하여 implements 인터페이스를 사용하여 이러한 속성과 메서드를 구현하도록 할 수 있습니다.

다음과 같이 할 수 있습니다.

// a simple car structure interface
interface CarStructure {
  name: string;
  yearMade: number;
  startEngine: () => void;
}

// a class that satisfies the `CarStructure` interface
// using the `implements` keyword
class Car implements CarStructure {}

이제 implements CarStructure를 작성하자마자 TypeScript 컴파일러에서 Type 'Car' is missing the following properties from type 'CarStructure': name, yearMade, startEngine라는 오류가 발생합니다. 간단히 말해서 CarStructure 인터페이스에 있는 메서드와 속성을 만들어야 한다는 것입니다. 이렇게 하면 올바른 유형으로 클래스의 메서드와 속성을 구현하는 데 도움이 됩니다.

따라서 name , age 및 startEngine 속성 및 메서드를 구현해 보겠습니다.

다음과 같이 할 수 있습니다.

// a simple car structure interface
interface CarStructure {
  name: string;
  yearMade: number;
  startEngine: () => void;
}

// a class that satisfies the `CarStructure` interface
// using the `implements` keyword
class Car implements CarStructure {
  name: string;
  yearMade: number;

  constructor(name: string, yearMade: number) {
    this.name = name;
    this.yearMade = yearMade;
  }

  startEngine() {
    console.log("Car started...");
  }
}

Car 클래스의 속성과 메서드를 구현하는 즉시 오류가 사라지고 CarStructure 인터페이스 구조가 충족됩니다.

TypeScript의 인터페이스를 사용하여 메서드와 속성을 구현하는 클래스를 성공적으로 만들었습니다. 예이 🥳!

codesandbox에 있는 위의 코드를 참조하십시오.

그게 다야 😃!

이 정보가 유용하다고 생각되면 자유롭게 공유하세요 😃.