type 和 interface 的区别
❤️

type 和 interface 的区别

😗

 
官网对于两者的区别说明如下:
Type aliases and interfaces are very similar, and in many cases you can choose between them freely. Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.

type

type,全称是 type aliases 是为了定义一个类型别名,这样就不需要重复写复杂的类型定义了
type Point = {
  x: number;
  y: number;
};

function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });
// 定义了一个类型 Second,它只是 number 类型的一个别名,并非一个新的类型
type Second = number;

// a 本质上还是 number 类型
let a: Second = 10;
  • Typescript 的 type 关键字表示的是类型别名(type aliases)
  • 被 type 关键词声明的变量表示的还是 Types
type 也可定义联合类型
type b = number | string

interface

这里只讲与 type 有关的部分。其他的部分可以看这偏文章 interface
同样,使用 interface 也可以实现上面的的代码
interface Point = {
  x: number;
  y: number;
};

function printCoord(pt: Point) {
  console.log("The coordinate's x value is " + pt.x);
  console.log("The coordinate's y value is " + pt.y);
}
 
printCoord({ x: 100, y: 100 });

difference

  • interface 通过 extends 来扩展;type 通过 & 符号来扩展
    • // interface 的扩展
      interface Animal {
      	name: string
      }
      
      interface Dog extends Animal {
      	eat: boolean
      }
      
      // type 的扩展
      type Animal = {
      	name: string
      }
      
      type Dog = Animal & {
      	eat: boolean
      }
  • interface 可以自动合并;type 不行
    • interface Window {
        title: string
      }
      
      interface Window {
        ts: TypeScriptAPI
      }
      
      const src = 'const a = "Hello World"';
      window.ts.transpileModule(src, {});
      
      
      type Window = {
        title: string
      }
      
      type Window = {
        ts: TypeScriptAPI
      }
      
       // Error: Duplicate identifier 'Window'.

使用

按照官网的说明,能用 interface 的地方就用 interface;当定义一个 function 的时候,用 type
notion image