TS之interface与type区别 | 前端进阶之旅 - 前端求职面试刷题宝典

# 相同之处

interface

interface User {
  name: string
  age: number
}

interface SetUser {
  (name: string, age: number): void;
}

@前端进阶之旅: 代码已经复制到剪贴板

type

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

type SetUser = (name: string, age: number)=> void;

@前端进阶之旅: 代码已经复制到剪贴板

interface 和 type 都可以拓展，并且两者并不是相互独立的，也就是说 interface 可以 extends type, type 也可以 extends interface 。虽然效果差不多，但是两者语法不同

interface extends interface

interface Name { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}

@前端进阶之旅: 代码已经复制到剪贴板

type extends type

type Name = { 
  name: string; 
}
type User = Name & { age: number  };

@前端进阶之旅: 代码已经复制到剪贴板

interface extends type

type Name = { 
  name: string; 
}
interface User extends Name { 
  age: number; 
}