programing

TypeScript의 인터페이스 및 클래스

elecom 2023. 7. 12. 22:15
반응형

TypeScript의 인터페이스 및 클래스

C#에서는 인터페이스와 클래스 간에 상당히 큰 차이가 있습니다.실제로 클래스는 참조 유형을 나타내므로 실제로 해당 클래스를 모델로 한 개체를 만들 수 있습니다. 반면 인터페이스는 클래스가 특정 동작의 존재를 보장하기 위해 서명하는 계약입니다.특히 인터페이스 인스턴스를 만들 수 없습니다.

인터페이스의 요점은 행동을 노출하는 것입니다.클래스는 해당 동작에 대한 하나의 명시적인 구현을 제공하여 이를 구현합니다.

이 경우 인터페이스에 속성이 포함될 수 있지만 대부분의 경우 동작 문제로 인해 인터페이스에 관심이 있습니다.그래서 대부분의 인터페이스는 단지 행동의 계약일 뿐입니다.

반면에 TypeScript에서는 저를 상당히 불안하게 만드는 것처럼 보였고, 사실 저는 이것을 한 번 이상 본 적이 있습니다. 이것이 이 질문의 이유입니다.

한 튜토리얼에서 본 내용은 다음과 같습니다.

export interface User {
    name: string; // required with minimum 5 chracters
    address?: {
        street?: string; // required
        postcode?: string;
    }
}

하지만 잠시만요. ㅠㅠUser인터페이스입니까?만약 우리가 C#처럼 생각한다면,User인터페이스가 아니어야 합니다. 유형을 하는 것 같습니다.User행동의 계약 대신에.

우리가 C#에서 하는 것처럼 생각하면, 자연스러운 것은 다음과 같습니다.

export class User {
    public name: string;
    public address: Address;
}
export class Address {
    public street: string;
    public postcode: string;
}

그러나 우리가 클래스에서 하는 것처럼 인터페이스를 사용하여 행동 계약을 정의하는 것이 아니라 데이터 유형을 정의하는 것은 TypeScript에서 매우 일반적으로 보입니다.

그렇다면 TypeScript에서는 어떤 인터페이스를 의미합니까?왜 사람들은 우리가 C#의 클래스를 사용하는 것처럼 TypeScript의 인터페이스를 사용합니까?TypeScript에서 인터페이스를 적절하게 사용하는 방법: 동작 계약을 설정하거나 속성과 객체를 정의하기 위해 사용해야 합니다.

Javascript에서 데이터는 종종 JSON을 통해 일반 객체로 교환됩니다.

let data = JSON.parse(someString);

을 이게말하죠라고 data는 의배니다입의 입니다.User " 체고우, " 는그것함수을리그객리함":

data.forEach(user => foo(user))

foo다음과 같이 입력합니다.

function foo(user: User) { ... }

하지만 잠깐, 우리가 한 일은 없었습니다.new User는 수업을 요?User그리고.map 든모의data그것에, 결과가 정확히 같을지라도,Object부동로? 시키기 위해 에 대한 것입니다.아니요, 그것은 단지 형식 시스템을 만족시키기 위한 광기일 뿐, 런타임에 대한 어떤 것도 바꾸지 않습니다. 단한.interface구체적인 객체가 어떻게 보일 것으로 예상되는지 설명하는 것은 여기서 완벽하게 충분합니다.

저도 C# 배경에서 Typescript에 왔는데 같은 것들이 궁금했습니다.저는 POCO의 노선을 따라 생각하고 있었습니다(POTO가 문제인가요?)

그렇다면 TypeScript에서는 어떤 인터페이스를 의미합니까?

Typescript Handbook은 인터페이스가 "당신의 코드 내에서 계약을 정의하기 위한" 것이라고 말하는 것 같습니다.

왜 사람들은 우리가 C#의 클래스를 사용하는 것처럼 TypeScript의 인터페이스를 사용합니까?

저는 여기서 @deceze의 대답에 동의합니다.

John Papa는 자신의 블로그에서 수업과 인터페이스에 대한 주제를 확장합니다.그는 클래스가 "상속을 사용하여 여러 개의 새 인스턴스를 생성하고 [및] 단일 개체를 사용"하는 데 가장 적합하다고 제안합니다.따라서 Typescript 핸드북에 설명된 Typescript 인터페이스의 의도와 한 사람의 의견에 따르면 Typescript에서 계약을 설정하는 데 클래스가 필요하지 않은 것으로 보입니다.대신 인터페이스를 사용해야 합니다.(C# 감각은 여전히 불쾌할 것입니다.

인터페이스는 TypeScript에서 적절하게 사용되어야 합니다: 동작 계약을 설정하거나 속성과 객체를 정의하기 위해 사용되어야 합니까?

제가 질문을 이해한다면, 당신은 인터페이스가 행동 계약을 맺어야 하는지 구조 계약맺어야 하는지 묻는 것입니다.이것에 대해, 저는 대답할 것입니다: 둘 다.Typescript 인터페이스는 C# 또는 Java에서 인터페이스를 사용하는 방식(즉, 클래스의 동작을 설명하는 방식)과 동일하게 사용할 수 있지만 데이터 구조를 설명하는 기능도 제공합니다.

게다가, 제 동료는 인터페이스가 컴파일러에서 코드를 생성하지 않기 때문에 인터페이스 대신 클래스를 사용한다고 저를 꾸짖었습니다.

예:

이 유형 스크립트:

class Car implements ICar {
    foo: string;
    bar(): void {
    }
}

interface ICar {
    foo: string;
    bar(): void;
}

다음 Javascript를 생성합니다.

var Car = (function () {
    function Car() {
    }
    Car.prototype.bar = function () {
    };
    return Car;
}());

시험해 보세요

유형 스크립트의 인터페이스는 둘 다 계약을 제공한다는 점에서 C#의 인터페이스와 유사합니다.그러나 메서드 유형 스크립트 인터페이스만 포함하는 C# 인터페이스와는 반대로 개체가 포함하는 필드나 속성을 설명할 수도 있습니다.따라서 C# 인터페이스에서 직접 사용할 수 없는 경우에도 사용할 수 있습니다.

형식 스크립트에서 인터페이스와 클래스의 주요 차이점은 인터페이스에 런타임 표현이 없고 코드가 출력되지 않는다는 것입니다.인터페이스는 매우 광범위하게 사용할 수 있습니다.예를 들어 객체 리터럴을 사용하여 인터페이스를 만족하는 객체를 구성할 수 있습니다.예:

let user: User = {
  name: 'abc',
  address: {
    street: 'xyz',
  },
};

또는 인터페이스에 모든 데이터 개체(예: JSON 구문 분석을 통해 수신됨)를 할당할 수 있습니다(그러나 사전 검사를 통해 실제로 유효한 데이터임을 확인해야 합니다).따라서 인터페이스는 데이터에 대해 매우 유연합니다.

반면에 클래스에는 런타임에 클래스와 연결된 유형이 있으며 생성된 코드가 있습니다.런타임에 다음을 사용하여 유형을 확인할 수 있습니다.instanceof그리고 프로토타입 체인이 설치되어 있습니다.정의하는 경우User클래스로서 생성자 함수를 호출하지 않으면 유효한 사용자가 될 수 없습니다.그리고 당신은 단지 어떤 종류의 적합한 데이터를 정의할 수 없습니다.User새 인스턴스를 만들고 속성을 복사해야 합니다.

나의 개인적인 경험칙:

  • 다양한 소스의 순수 데이터를 다루는 경우 인터페이스를 사용합니다.
  • 만약 제가 정체성과 상태(그리고 아마도 상태를 수정하기 위해 첨부된 방법)를 가지고 있는 것을 모델링하고 있다면, 저는 수업을 사용하고 있습니다.

TypeScript에서 인터페이스를 적절하게 사용하는 방법: 동작 계약을 설정하거나 속성과 객체를 정의하기 위해 사용해야 합니다.

TypeScript의 인터페이스는 모양 계약으로 객체의 예상 구조를 설명합니다.값에 특정 인터페이스 주석이 있는 경우 해당 값은 인터페이스에 정의된 멤버를 특징으로 하는 개체일 것으로 예상됩니다.멤버는 값 또는 함수(메소드)가 될 수 있습니다.일반적으로, 그들의 행동(기능 주체)은 계약의 일부가 아닙니다.그러나 다음과 같은 경우 지정할 수 있습니다.readonly그렇지 않으면.

그렇다면 TypeScript에서는 어떤 인터페이스를 의미합니까?왜 사람들은 우리가 C#의 클래스를 사용하는 것처럼 TypeScript의 인터페이스를 사용합니까?

TypeScript 클래스에 의해 구현될 것으로 예상되는 경우 Typescript 인터페이스는 C# 인터페이스와 동일한 역할을 수행할 수 있습니다.

그러나 클래스만이 인터페이스를 구현할 수 있는 것은 아닙니다. 모든 종류의 값은 다음과 같습니다.

interface HelloPrinter {
    printHello(): void
}

다음 개체는 클래스가 아니지만 인터페이스를 구현합니다.

{
    printHello: () => console.log("hello")
}

그래서 우리는 할 수 있습니다.

const o: HelloPrinter = {
    printHello: () => console.log("hello")
}

TypeScript 컴파일러는 불평하지 않습니다.

객체는 클래스를 작성하도록 강요하지 않고 인터페이스를 구현합니다.

인터페이스로 작업하는 것이 (인터페이스 및) 클래스로 작업하는 것보다 더 가볍습니다.

그러나 런타임 중에 형식 이름(클래스/인터페이스 이름)을 알아야 하는 경우에는 인터페이스 이름은 컴파일 시에만 알 수 있으므로 클래스를 선택하는 것이 좋습니다.

기본 역직렬화 메커니즘만 사용하면 특정 클래스의 인스턴스를 역직렬화할 수 없습니다.플레인-old-javascript-개체로만 역직렬화할 수 있습니다.이러한 개체는 유형 스크립트 인터페이스에 부착할 수 있지만 클래스의 인스턴스는 될 수 없습니다.웹 서비스에서 예상되는 데이터와 같이 직렬화 경계를 넘는 데이터를 처리해야 하는 경우 인터페이스를 사용합니다.이러한 값의 새 인스턴스를 직접 생성해야 하는 경우 문자 그대로 구성하거나 해당 인터페이스에 부착된 개체인 개체를 반환하는 편리한 함수를 생성합니다.

클래스 자체는 인터페이스를 구현할 수 있지만 로컬로 생성된 클래스 인스턴스와 역직렬화되고 재구성된 일반 개체를 모두 처리해야 하는 경우 혼동을 일으킬 수 있습니다.개체의 클래스 기반에 절대 의존할 수 없기 때문에 개체를 클래스로 정의해도 아무런 이점이 없습니다.

웹 서비스에서 코드를 주고 받는 역할을 하는 ServerProxy 모듈을 만드는 데 성공했습니다. 웹 서비스 호출 및 반환된 결과입니다.녹아웃 모델이나 유사한 모델에 바인딩된 경우 웹 서비스의 인터페이스 전용 계약을 준수하는 반환된 플레인-old-javascript-object를 모델 클래스의 인스턴스로 끌어올리는 방법을 알고 있는 생성자를 사용하여 ui 바인딩된 모델을 캡슐화하는 클래스를 가질 수 있습니다.

언급URL : https://stackoverflow.com/questions/40591413/interface-and-class-in-typescript

반응형