Typescript에서의 인터페이스와 클래스의 차이

Typescript에서의 인터페이스와 클래스의 차이

타입 스크립트인터페이스와 클래스의 차이점은 무엇입니까?언제 클래스를 사용할 수 있습니까?인터페이스 사용 시기그들의 장점은 무엇입니까?

백엔드 서버에 대한 http-request(Angular 2)에 대한 일종의 유형을 작성해야 합니다.예를 들어 다음과 같습니다.

"fields": {
  "project": {
      "id": "10000"
  },
  "summary": "something's wrong",
  "issuetype": {
      "id": "10000"
  },
  "assignee": {             // not neccesary required
      "name": "homer"
  },
  "reporter": {
      "name": "smithers"
  },
  "priority": {            // not neccesary required
      "id": "20000"
  }
}

이 모델들을 만들려면 무엇을 사용해야 하나요?감사해요!

2019년: 차이점 및 사용법 업데이트

첫째, 분명한 차이가 있습니다. 구문입니다.이것은 간단하지만 차이를 이해하는 데 필요합니다.인터페이스 속성은 쉼표 또는 세미콜론으로 끝날 수 있지만 클래스 속성은 세미콜론으로 끝날 수 있습니다.자, 이제 흥미로운 것들.사용 시기와 사용 안 함에 대한 섹션은 주관적일 수 있습니다.이것은 제가 팀원들에게 제공하는 가이드라인입니다만, 다른 팀에는 타당한 이유로 다른 가이드라인이 있을 가능성이 있습니다.만약 당신의 팀이 다르게 한다면, 저는 그 이유를 알고 싶습니다.

인터페이스:강력한 타이핑을 위해 설계 및 컴파일 시간 동안 사용할 유형을 정의할 때 사용합니다.「실장」 또는 「확장」은 가능하지만, 인스턴스화할 수 없습니다(실장할 수 없습니다).new할 때 시 할 수 에 런타임에 수 JSfoo instanceof bar)의 경우는, 다음의 속성을 체크하는 것을 제외합니다.Typescript에서 인터페이스 유형을 확인합니다.

인터페이스를 사용하는 경우:코드의 두 곳 이상, 특히 두 개 이상의 파일 또는 함수에 사용되는 객체의 속성 및 함수에 대한 계약을 작성해야 할 때 사용합니다.또한 다른 개체를 이 기본 속성 집합(예:Vehicle(예: 「」등)Car,Truck,Boatclass Car implements Vehicle를 참조해 주세요.

인터페이스를 사용하지 않는 경우:기본값, 구현, 컨스트럭터 또는 함수(시그니처뿐 아니라)를 사용하는 경우.

클래스:또한 강력한 타이핑을 위해 설계 및 컴파일 시간 동안 사용할 유형을 정의할 수 있으며, 런타임에도 사용할 수 있습니다.이는 코드가 컴파일되지 않았으므로 공간을 차지한다는 의미이기도 합니다.이것은 @Sakuto가 언급한 중요한 차이점 중 하나이지만, 공간뿐만 아니라 더 많은 의미를 가지고 있습니다.즉, 클래스는 체크된 상태로 입력할 수 있으며, 변환된 JS 코드에서도 "누구"인지 파악할 수 있습니다.또 다른 차이점은 다음과 같습니다.클래스는 다음을 사용하여 인스턴스화할 수 있습니다.new확장할 수는 있지만 구현할 수는 없습니다.클래스에는 기본값과 함께 생성자 및 실제 함수 코드를 포함할 수 있습니다.

클래스를 사용하는 경우:실제 함수 코드를 포함하는 개체를 만드는 경우 초기화를 위한 생성자가 있거나 또는 다음 중 하나를 사용하여 이러한 개체의 인스턴스를 만듭니다.new또한 단순 데이터 개체의 경우 클래스를 사용하여 기본값을 설정할 수 있습니다.필요에 따라 인터페이스의 회피책이 있습니다만, 타입 체크를 실시하는 경우도 있습니다(「인터페이스」섹션 「OS 링크」를 참조해 주세요.

클래스를 사용하지 않는 경우:단순한 데이터 인터페이스가 있는 경우, 다른 오브젝트에 의해 구현되고 싶은 경우, 단순히 기존 오브젝트에 인터페이스를 배치하고 싶은 경우(think type definition file) 또는 점유하는 공간이 너무 많거나 보증되지 않은 경우)에는 데이터 인터페이스를 인스턴스화할 필요가 없습니다.참고로 .d.ts 파일을 보면 인터페이스와 유형만 사용되므로 TS로 변환하면 완전히 제거됩니다.

마지막으로 클래스와 인터페이스 외에도 두 가지 옵션이 있습니다. 첫 번째 옵션은 인터페이스와 거의 유사한 "타입"입니다. 그러나 이 SO 게시물, 특히 2019 Update 답변을 확인하십시오.타이프스크립트: 인터페이스와 타입마지막 옵션은 (OOP가 아닌) 기능 프로그래밍 스타일로 TS를 사용하는 것입니다.

예시와 함께 전체 스토리와 예시와 함께 클래스 대 상속에 대한 더 좋은 내용을 보려면 PassionForDev.com를 방문하십시오. https://https:/https-https-https-https-vs-interfaces/

Angular 2 스타일가이드에 따르면 사용 권장Class에 걸쳐서Interface타이핑에 대해서.가장 큰 차이점은 이다.class됩니다.Interface이치노

에 걸쳐 하고 스타일 을 선호합니다.class는 ' 날'을 할 것 methodyour models.

상세한 것에 대하여는, https://stackoverflow.com/a/55505227/5463904 를 참조해 주세요.

Simply Class는 객체를 작성하는 것으로, 인터페이스는 이러한 객체가 포함해야 하는 내용을 지원합니다.

클래스는 객체를 만들 수 있는 Blueprint/템플릿과 같습니다.인터페이스는 클래스가 해당 인터페이스를 구현하거나 이 Blueprint에 포함할 내용을 정의하기 위해 동의해야 하는 계약과 같습니다.

심플 클래스:

class Car {
    engine: string; // 'var' is not used;

    constructor(engine: string) { // This is how we create constructor
        this.engine = engine;
    }

    display(): void { // 'function' keyword is not used here.
        console.log(`Engine is ${this.engine}`); // just a log.
    }
}

var objCar = new Car('V8'); // creates new onject
objCar.display(); // output: Engine is V8
console.log(objCar.engine); // output: V8 (accessing member here)

심플한 인터페이스:

    interface IPerson { // This is how we create an interface.
        firstName: string, // use commas to separate.
        lastName: string, // In classes we use semi-colon to separate.
        displayDetails: (number) => string
    }

    // We are going to store 'interface object' in a variable.
    // i.e. we are implementing interface with variable(not class!!)
    var customer: IPerson = {

        firstName: 'jose jithin', // 'implements' variables
        lastName: 'stanly',

        // Now method implementation.
        // Note: the syntax of 'displayDetails' maybe a bit confusing (given below)
        // as two colons are used.
        // It specifies a return type(string) here for this method. 
        displayDetails: (rank): string => { return `This person has rank ${rank}. ` }  

        // It can be rewritten as following too.
        displayDetails: (rank) => { return `This person has rank ${rank}. ` };
        // i.e. return type need not be specified, just like a normal method definition syntax.
    }

    console.log(customer.firstName); // output: jose jithin

    console.log(customer.lastName);  // output: stanly

    console.log(customer.displayDetails(1)); // output: This person has rank 

나는 내 기사에 대한 클래스와 인터페이스에 대해 자세히 설명했습니다.이게 이해하는데 도움이 될 수도 있어요.

인터페이스

• 오브젝트의 외관 설명
• 형식 확인만을 목적으로 컴파일 시간만 존재합니다.

반

• 오브젝트를 인스턴스화/생성하기 위한 청사진으로 사용
• 인터페이스를 구현할 수 있습니다.즉, 인터페이스에서 적어도 모든 속성/메서드를 구현해야 합니다.

예:

interface Person {
    name: string;
    id: number;
    doStuff: () => void;
}

// implements Person says: You have to at least implement these things
// which are located on the person interface 
class employee implements Person {
    constructor(public name: string, public id: number){}

    doStuff () {console.log('Doing stuff')}
}

// interfaces can also describe variables and parameters
const p1: Person = {
    name: 'foo',
    id: 34,
    doStuff () {console.log('Doing stuff')}
}

컴파일러가 실행 시 인터페이스에 대응하는 JavaScript 코드를 생성하지 않기 때문에 클래스 대신 데이터 모델을 만들기 위해 typescript를 사용합니다.데이터 모델을 만드는 데만 클래스를 사용하면 컴파일러는 대응하는 JS 코드를 생성하므로 메모리를 소비합니다.

Angular 스타일 가이드의 일부: https://angular.io/guide/styleguide#interfaces

"서비스 및 선언 가능(컴포넌트, 지시어 및 파이프)에 인터페이스 대신 클래스를 사용하는 것을 고려해 보십시오."

"데이터 모델에 인터페이스를 사용하는 것을 고려하십시오."

각진 과거 2년을 사용하고 있으며, 간단한 말로 오브젝트에 동작을 추가하고 싶을 때 예를 들어 처리된 데이터를 반환하는 get 메서드를 추가하고 싶을 때 오브젝트에 동작을 추가하지 않고 오브젝트에 직접 액세스하고 싶을 때 인터페이스를 사용합니다.생성자를 정의하는 경우 클래스를 사용하면 개체를 생성하기 전에 사용자가 특정 변수를 초기화할 수 있도록 제한할 수 있습니다.

때 않다는 되었습니다.class가 interface 특히 React, 「React」는 「React」라고 합니다.

따라서 클래스 및 인터페이스에는 여러 가지 차이가 있습니다.

그 중 몇 가지는 다음과 같습니다.

(Definition)
TypeScript 클래스는 메서드, 변수 및 객체에 대한 골격을 유지하는 템플릿입니다.TypeScript Interface는 TypeScript Interface를 사용합니다.

실용적인 사용법

: 하려면 : 모듈 기능 스켈레톤을 설계합니다.
interface : 및 로직인터페이스을 숨기려면 : " " " " " " " " " " " " " " " " " " " " " " " " " " " " 。 "

인스턴스화 가능

할 수 .
인터페이스를 할 수 .

자세한 것은, https://codetopology.com/scripts/typescript/typescript-interface-vs-class/ 를 참조해 주세요.

TypeScript 의 인터페이스는, 다음의 2 개의 목적을 실현합니다.

1. ★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★」class Foo implements IFoo)
2. 객체 " 객체")let foo: IFoo = { … })

#1은 Java, C# 등에서 볼 수 있는 "클래식" 목적입니다.: 인터페이스는 클래스가 어떻게 생겼는지만 기술합니다.그것은 직접적으로 인스턴스화 되거나 하는 것이 아니다.

#2는 적어도 TypeScript에서만 볼 수 있는 것입니다.기본적으로 컴파일 시간 체크 사전입니다.

제 경험으로는 #2는 유지보수의 문제로 이어집니다.오늘날 작성한 간단한 사전은 결국 모든 발신자를 변경해야 하기 때문에 테스트 범위가 넓어집니다.

나는 수업을 선호하는 공공적인 것에는 패턴 #2를 피하는 것을 추천한다.내부 컴파일 시간 체크로 괜찮지만 메서드를 쉽게 추가할 수 있으므로 향후 코드 유지보수에 도움이 됩니다.물론 그런 방법은 필요 없을지도 모르지만, 그렇게 되면 스스로 선택권을 남겨두고 기뻐하게 될 것입니다.

언급URL : https://stackoverflow.com/questions/40973074/difference-between-interfaces-and-classes-in-typescript