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

Program / 글쓴이

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

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;

따라서 일반적으로 질문에 표시된 것처럼 일반 객체 유형 만있는 경우 일반적으로 인터페이스가 더 나은 접근 방식입니다. 인터페이스로 쓸 수없는 것을 작성하고 싶거나 다른 이름을 지정하고 싶다면 타입 별칭이 더 좋습니다.

답변

또한 인터페이스를 구현할 수 있습니다 .

답변

유형은 인터페이스와 비슷하며 그 반대도 마찬가지입니다. 둘 다 클래스에 의해 구현 될 수 있습니다. 그러나 몇 가지 중요한 차이점이 있습니다. 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 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;
}

이 작업을 수행 할 수는 있지만 유형 조합 인 유형을 구현할 수는 없습니다.

답변

typescript의 type은 기존 유형 을 참조하는 데 사용됩니다 . 처럼 확장 할 수 없습니다 interface. 예 type:

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

Rest 및 Spread를 사용할 수있는 유형 :

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
}

답변