TypeScript에서 인터페이스와 클래스를 사용하는 시기 및 방법

저자: Gapur Kassym✏️
인터페이스와 클래스는 OOP(Object Program)의 기본 구성 요소입니다.TypeScript은 대상을 대상으로 하는 자바스크립트 언어로 ES6와 더 높은 버전부터 인터페이스, 클래스, 봉인 등 OOP 기능을 지원한다.
그러나 언제 우리는 인터페이스, 클래스 또는 둘을 동시에 사용해야 합니까?만약 당신이 풋내기이거나 인터페이스와 유형을 사용하는 것에 대해 곤혹스러움을 느낀다면, 이 글은 당신에게 적합합니다.
이 문서에서 인터페이스와 클래스가 무엇인지, TypeScript에서 둘 중 하나를 사용하는 시기를 보여 드리겠습니다.

TypeScript의 클래스는 무엇입니까?

시작하기 전에 TypeScript 클래스가 무엇인지 알아야 합니다.대상 프로그래밍에서 클래스는 청사진이나 템플릿으로 특정한 속성과 방법을 가진 대상을 만들 수 있습니다.
Typescript는 유형 검사에 대한 추가 구문을 제공하고 모든 플랫폼과 브라우저에서 실행되는 깨끗한 JavaScript로 코드를 변환합니다.코드와 관련된 모든 단계입니다.TypeScript 코드를 JavaScript 파일로 변환하면 최종 파일에서 찾을 수 있습니다.
이 클래스는 대상의 템플릿을 정의하거나, 그것이 무엇인지, 그리고 그 작용을 정의한다.속성과 방법으로 간단한 클래스를 만듭니다. 그러면 그 클래스의 행동을 볼 수 있습니다.
우선, 나는 다음 코드 줄을 통해 Developer 클래스를 만들 것이다.

class Developer {
  name?: string; // string or undefined
  position?: string; // string or undefined
}

우리는 속성 name과 position으로 이 종류를 묘사한다.그것들은 string과 undefined 등의 유형을 포함한다.
다음은 Developer 키워드를 사용하여 new 클래스를 통해 객체를 만듭니다.

const developer = new Developer();
developer.name // it outputs undefined
developer.position // it outputs undefined

우리가 developer.name을 호출했을 때, 그것은 undefined을 되돌려줍니다. 왜냐하면 우리는 초기 값을 분배하지 않았기 때문입니다.TypeScript에서 값이 있는 객체를 만들기 위해 constructor 메서드를 사용할 수 있습니다.구조 함수 방법은 초기화와 창설 대상에 사용됩니다.
이제 Developer 클래스를 다음 코드로 업데이트합니다.

class Developer {
  name: string; // only string
  position: string; // only string

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

위 코드에서 우리는 값으로 속성을 초기화하는 constructor 방법을 추가했다.
이제 name을 Gapur, position을 Frontend Developer으로 설정할 수 있습니다.

const developer = new Developer("Gapur", "Frontend Developer");
developer.name // it outputs Gapur
developer.position // it outputs Frontend Developer

마지막으로 앞에서 언급한 바와 같이 이 종류는 대상이 어떻게 조작해야 하는지를 설명하는 방법이 있다.이 경우 개발자라면 누구나 앱을 개발할 수 있기 때문에 Developer류의 방법은 develop이다.
따라서 developer 객체는 다음과 같은 개발 작업을 수행할 수 있습니다.

class Developer {
  name: string;
  position: string;

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

  develop(): void {
    console.log('develop an app');
  }
}

develop 메서드를 실행하면 다음 console.log 문이 실행됩니다.

developer.develop() // it outputs develop an app

TypeScript의 인터페이스는 무엇입니까?

인터페이스는 응용 프로그램에서 계약의 역할을 하거나 클래스가 따르는 문법의 구조이다.이 인터페이스는 Duck printing 또는subtyping이라고도 부른다.
이 인터페이스는 only 방법과 필드 설명을 포함하지만 실현되지 않았다.우리는 그것으로 어떤 것도 창조할 수 없다.인터페이스를 실현하는 클래스는 모든 필드와 방법을 가져야 합니다.따라서 우리는 그것들을 사용하여 유형 검사를 진행한다.
TypeScript에서 모든 코드를 JavaScript로 변환하면 인터페이스가 JavaScript 파일에서 사라집니다.따라서 개발 단계에서 유용한 도구다.
다음 항목에 대한 인터페이스를 사용해야 합니다.

부동산의 특정 구조 검증

대상을 매개 변수로

함수

에서 반환된 대상
이제 다음 코드 행을 통해 인터페이스를 설명합니다.

interface InterfaceName {
  // variables;
  // methods;
}

우리는 인터페이스에 변수와 방법을 포함하는 성명만 포함할 수 있다.이전 IDeveloper 클래스의 Developer 인터페이스를 만듭니다.

interface IDeveloper {
  name: string
  position: string
  develop: () => void
}

class Developer implements IDeveloper {
  name: string;
  position: string;

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

  develop(): void {
    console.log('develop an app');
  }
}

위 코드에서 우리의 IDeveloper 인터페이스는 변수 name과 position을 포함한다.develop 방법도 포함되어 있습니다.이에 따라 Developer류는 IDeveloper인터페이스를 실현했다.따라서 두 변수와 한 가지 방법을 정의해야 한다.Developer 클래스에 변수가 없으면 TypeScript에 오류가 표시됩니다.

class Developer implements IDeveloper {
  // error Class 'Developer' incorrectly implements interface 'IDeveloper'.
  name: string;

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

  develop(): void {
    console.log('develop an app');
  }
}

인터페이스 및 클래스

그러면 우리는 언제 종류를 사용해야 하고, 언제 인터페이스를 사용해야 합니까?
시작하기 전에 강력한 TypeScript static 속성을 여러분과 공유하고 싶습니다. 클래스 실례를 만들지 않고 클래스의 필드와 방법을 사용할 수 있도록 합니다.
나는 이전의 Developer 클래스를 사용하여 정적 방법으로 클래스를 만들 것이다.

class Developer {
  static develop(app: { name: string, type: string }) {
    return { name: app.name, type: app.type };
  }
}

이제 우리는 Developer.develop() 방법만 호출할 수 있고 이런 종류를 실례화할 필요가 없다.

Developer.develop({ name: 'whatsapp', type: 'mobile' })
// outputs: { "name": "whatsapp", "type": "mobile" } 

위대하다
또한 TypeScript에서 클래스를 사용하여 유형 검사를 수행할 수도 있습니다.다음 코드를 사용하여 App 클래스를 만듭니다.

class App {
  name: string;
  type: string;

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

Developer 클래스를 수정하겠습니다.

class Developer {
  static develop(app: App) {
    return { name: app.name, type: app.type }; // output the same
  }
}

현재, 나는 App의 실례를 만들고, 매개 변수의 대상을 사용하여 Developer.develop()을 호출할 것이다.

const app = new App('whatsapp', 'mobile');
Developer.develop(app);
// outputs the same: { "name": "whatsapp", "type": "mobile" } 

Developer.develop(app)과 Developer.develop({ name: 'whatsapp', type: 'mobile' })은 같은 내용을 출력한다.이것은 매우 훌륭하지만, 두 번째 방법은 더욱 가독성과 유연성을 갖추고 있다.
또한 우리는 파라미터의 유형을 검사할 수 있다.불행하게도, 이 점을 하려면, 우리는 대상을 만들어야 한다.그러면 우리는 어떻게 그것을 개선해야 합니까?이것이 바로 인터페이스의 용무의 땅이다!
먼저 App 클래스를 다음 코드가 있는 인터페이스로 변경합니다.

interface App {
  name: string
  type: string
}

class Developer {
  static develop(app: App) {
    return { name: app.name, type: app.type }; // output the same
  }
}

위의 코드에서 우리는 Developer류의 주체를 바꾸지 않았고 App류의 실례를 만들지 않았지만 결과는 같다.이런 상황에서 우리는 대량의 시간과 코드 입력을 절약했다.

결론

우리는 언제 종류와 인터페이스를 사용해야 합니까?유형 체크된 클래스 객체를 만들고 전달하려면 TypeScript 클래스를 사용해야 합니다.대상을 만들지 않은 상태에서 작업을 하려면 인터페이스가 가장 적합합니다.
결국 우리는 두 가지 유용한 방법을 열었다. 그것은 청사진과 계약이었다.너는 그것들을 동시에 사용할 수도 있고, 하나만 사용할 수도 있다.이것은 너에게 달려 있다.
읽어 주셔서 감사합니다. 나는 네가 이 문장이 매우 유용하다고 생각하기를 바란다.즐거운 코딩!

타자 원고를 많이 쓴다고요?최근 TypeScript 회의 기록을 보면서 더 읽을 수 있는 코드를 작성하는 방법을 알아보십시오.