[ Typescript ]에서 유형과 인터페이스의 차이점은 무엇입니까?

[ Typescript ]에서 유형과 인터페이스의 차이점은 무엇입니까?

다음의 차이점은 무엇입니까?

type Foo = { 
    foo: string 
};
interface Foo {
   foo: string;
}

인터페이스 확장 가능

interface A {
  x: number;
}
interface B extends A {
  y: string;
}

또한 증강된

interface C {
  m: boolean;
}
// ... later ...
interface C {
  n: number;
}

단, 타입 에일리어스는 인터페이스가 나타낼 수 없는 것을 나타낼 수 있습니다.

type NumOrStr = number | string;
type NeatAndCool = Neat & Cool;
type JustSomeOtherName = SomeType;

따라서 일반적으로 질문에서 보듯이 플레인오브젝트 유형만 있는 경우에는 인터페이스가 일반적으로 더 나은 접근법입니다.인터페이스로 쓸 수 없는 것을 쓰거나 다른 이름을 붙이고 싶은 경우는 에일리어스 타입이 좋습니다.

사물을 대국적으로 보다

let myAge = 25;
let totalStatesInMyCountry = 25

두 변수가 같다는 것을 알 수 있습니다. 즉,(myAge === totalStatesInMyCountry)맥락이 전혀 달라요.

이것은 타이프 스크립트의 경우와 유사합니다.types그리고.interfaces.찾다Foo

type Foo = {
    text: string
};
interface Foo {
    text: string;
}

Foo로서type그리고 또interface외관상 동일, 유사(myAge === totalStatesInMyCountry)하지만 이건 특별한 경우일 뿐이야그들의 맥락은 완전히 다르다.

언제가 좋을 때interface대신types?

1. 이 클래스에 이러한 메서드가 있어야 합니다.타입이 아닌 인터페이스를 생각하고 있습니다.

2. 동일한 계약의 여러 구현을 생성하려고 합니다.계약서 같은 것toHumanReadableNumber(number)필요한 다른 구현은 다음과 같습니다.100000 -> 100,000,100000 -> 100K그리고.100000 -> 100 Thousands각 요건에 대해 다른 클래스를 생성하여 이 문제를 해결한다고 가정해 보겠습니다.지금 생각하고 있는 건classes and interfaces가 아니라classes and types

3. 인터페이스는 SOLID 원칙을 구현하는 것처럼 시스템을 느슨하게 결합하기 위해 존재합니다.

4. 인터페이스는 여러 상속을 대신합니다.클래스는 단일 클래스에서만 상속할 수 있지만 여러 인터페이스를 가질 수 있습니다.

5. 의 경우class Point{ x:number,y:number, distanceFromCenter():number}인터페이스 컨텍스트에서만distanceFromCenter():number문제가 있습니다.

-------------------------------

오래된 답변(2022년 12월 31일 이전)

이것들 사이의 차이도 이미 이 스레드에 있습니다.

type Foo = {
    foo: string
};
interface Foo {
    foo: string;
}

여기서type Foo그리고.interface Foo거의 비슷해 보여서 헷갈리네요.

interface다음 속성을 계약하는 것입니다(여기서).foo:string)는 오브젝트에 존재해야 합니다. interface아니다class. 언어가 다중 상속을 지원하지 않을 때 사용합니다.그렇게interface는 다른 클래스 간에 공통 구조일 수 있습니다.

class Bar implements Foo {
    foo: string;
}

let p: Foo = { foo: 'a string' };

그렇지만type그리고.interface매우 다른 맥락에서 사용됩니다.

let foo: Foo;
let today: Date = new Date();

여기서type의foo이Foo그리고.today이Date다른 변수의 유형 정보를 저장하는 변수 편각과 같습니다. type인터페이스, 클래스, 함수 시그니처, 기타 유형 또는 짝수 값의 슈퍼셋과 같습니다(예:type mood = 'Good' | 'Bad'의 끝부분은 )입니다.type에 변수의 가능한 구조 또는 값을 나타냅니다.

타입도 실장할 수 있기 때문에, 「인터페이스는 실장할 수 있다」라고 하는 것은 잘못입니다.

type A = { a: string };


class Test implements A {

    a: string;
}

이렇게 할 수는 있지만, Union of type이라고 하는 타입을 실장할 수는 없습니다.솔직히 이치에 맞습니다.

타입은 인터페이스와 비슷하고 그 반대도 마찬가지입니다.둘 다 클래스로 구현할 수 있습니다.단, 몇 가지 중요한 차이점이 있습니다.1. Type이 클래스에 의해 실장되어 있는 경우 Type에 속하는 속성은 클래스 내에서 초기화해야 하며, Interface에서는 이러한 속성을 선언해야 합니다.2. @ryan이 언급한 바와 같이 인터페이스는 다른 인터페이스를 확장할 수 있습니다.타입은 할 수 없습니다.

type Person = {
    name:string;
    age:number;
}

// must initialize all props - unlike interface
class Manager implements Person {
    name: string = 'John';
    age: number = 55;

    // can add props and methods
    size:string = 'm';
}

const jane : Person = {
    name :'Jane',
    age:46,

    // cannot add more proprs or methods
    //size:'s'
}

type in typescript는 기존 유형을 참조하는 데 사용됩니다.다음과 같이 확장할 수 없습니다.interface 예type과 같습니다

type Money = number;
type FormElem = React.FormEvent<HTMLFormElement>;
type Person = [string, number, number];

휴식 및 스프레드를 다음과 같은 유형으로 사용할 수 있습니다.

type Scores = [string, ...number[]];
let ganeshScore = ["Ganesh", 10, 20, 30]
let binodScore = ["Binod", 10, 20, 30, 40]

한편, 인터페이스에서는, 새로운 타입을 작성할 수 있습니다.

interface Person{
  name: string,
  age: number, 
}

Interface can be extended with extends keyword.
interface Todo{
  text: string;
  complete: boolean;
}

type Tags = [string, string, string]

interface TaggedTodo extends Todo{
 tags: Tags
}

또, 인터페이스를 실장할 수도 있습니다.

언급URL : https://stackoverflow.com/questions/36782896/in-typescript-what-is-the-difference-between-type-and-interface