3 분 만에 인터페이스와 유형의 차이 이해

타입 스크립트에 대해 어느 정도 이해했다면 인터페이스와 타입이 매우 유사하다는 것을 알 수 있으며 타입 정의 측면에서 두 가지 방식으로 구현할 수있는 경우가 많습니다.

주제에 곧바로 3 분, 문법, 인터페이스 및 유형의 차이 외에도 주로 다릅니다

1 유형 별칭은 다른 유형 (union 유형, 튜플 유형, 기본 유형 (기본 값))에 사용할 수 있으며 인터페이스는 지원하지 않습니다.

type PartialPointX = {
    
     x: number };
type PartialPointY = {
    
     y: number };

// union(联合)
type PartialPoint = PartialPointX | PartialPointY;

// tuple(元祖)
type Data = [PartialPointX, PartialPointY];

//primitive(原始值)
type Name = Number;

// typeof的返回值
let div = document.createElement('div');
type B = typeof div;

2 인터페이스는 여러 번 정의 할 수 있으며 선언 된 모든 멤버의 조합으로 간주됩니다. 유형은 지원되지 않습니다.

interface Point {
    
    
  x: number;
}
interface Point {
    
    
  y: number;
}

const point: Point = {
    
     x: 1, y: 2 };

3 유형은 매핑 유형을 생성하기 위해 키워드를 사용할 수 있지만 인터페이스는 사용할 수 없습니다.

type Keys = 'firstname' | 'surname';

type DudeType = {
    
    
  [key in Keys]: string;
};

const test: DudeType = {
    
    
  firstname: 'Pawel',
  surname: 'Grzybek',
};

4 기본 내보내기 방법이 다릅니다.

// inerface 支持同时声明，默认导出 而type必须先声明后导出
export default interface Config {
    
    
  name: string;
}
// 同一个js模块只能存在一个默认导出哦
 type Config2 = {
    
    name: string}
  export default Config2