Zhang Qing

Hi, 我是张庆。一名前端程序员, 这是我记录工作中的笔记📒, 主要为前端技术问题。不求精品, 只求实用

主页

我的命令行

js13

react12

css7

npm7

git5

web3

vpn2

CI1

SEO1

aura1

...

Talk is cheap, show my work 👇

typescript type vs interface

November 19, 2021约2分钟阅读

typescript

背景

ts 中type和interface都是常用类型，在实际开发中经常混用，顺着双休总结下 2 者的区别

interface 只能描述 object

基础数据类型，只能用 type 声明, 比如 number, string, null

type info = string  // ✅
interface info = string // ❌

interface 可以重名, type 不可以

实际运行时，重名的 interface 会自动合并, interface 不像 type 可以使用 & 合并功能

interface IPerson {
  age: number
}

interface IPerson {
  name: string
}

// 上方等效于 type: type Person = { age: number } & { name: string }

const person: IPerson = {
  name: 'zhang',
  age: 10,
}

// 相当于如下
interface IPerson {
  age: number
  name: string
}

interface 可以继承， type 不行

interface Shape {
  name?: string
  getArea: () => number
}

interface ISquare extends Shape {
  width: string
  height: string
}

const squre: ISquare = {
  width: 10,
  height: 10,
  getArea: () => squre.width * squre.height,
}

type 能使用计算属性

type Keys = 'firstname' | 'surname'

interface IKeys {
  firstname: number
  surname: string
}

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

// 或者

type DudeType2 = {
  [key in keyof IKeys]: IKeys[key]
}

总结

type 相对来说类型固定，支持原始类型，无法拓展, interface 更适合类库，可以被继承拓展。组件内部更适合type, 对外保留方法更适合 interface

未经许可, 不可转载