接口与类型

任意类型

interface Person {
  name: string,
  age?: number, //报错,number类型不能赋值给任意类型(string)
  [propName: string]: string
}
任意类型只能定义一个,如果有多个类型可以使用联合类型
interface Person {
  age?: number,
  [propName: string]: number | string
}

鸭子辨型(只要有部分鸭子特征就是鸭子)

只要有类型的某些属性就是这个类型

interface Person {
  name: string
}
function getName(p: Person): string {
  return p.name
}
getName({ name: '111', age: 11 }) 报错
let p = { name: '111', age: 11 }  通过定义一个对象传入参数的方式,可以绕开多余类型检查
getName(p) 不报错

绕开类型检查

不推荐

interface Person {
  name: string
}
function getName(p: Person): string {
  return p.name
}
getName({ name: 'aaa', age: 11 } as Person)  通过断言绕来类型检查

interface Person {
  name: string,
  [propName: string]: any
}
function getName(p: Person): string {
  return p.name
}
getName({ name: 'aaa', age: 11 })   通过索引签名绕开类型检查

接口与类型的区别

Object/Function

interface Person {
  name: string,
  age: number
}
type Person = {
  name: string,
  age: number
}
interface getName {
  (name: string): string
}
type getName = (name: string) => string

与接口不同，类型别名还可以用于其他类型，如基本类型（原始值）、联合类型、元组。

// primitive
type Name = string;
// object
type PartialPointX = { x: number; };
type PartialPointY = { y: number; };
// union
type PartialPoint = PartialPointX | PartialPointY;
// tuple
type Data = [number, string];
// dom
let div = document.createElement('div');
type B = typeof div;

接口可以定义多次(这其实也算是扩展的一种),类型别名不可以

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

扩展方式不同

interface Person {
  name: string
}
interface Student extends Person {
  age: number
}
type Person = {
  name: string
}
type Student = Person & {
  age: number
}
接口扩展类型别名
type Person = {
  name: string
}
interface Student extends Person {
  age: number
}
类型别名扩展接口
interface Person {
  name: string
}
type Student = Person & {
  age: number
}

类型别名可以为基本类型、联合类型或元组类型定义别名，而接口不行

type MyNumber = number;
type StringOrNumber = string | number;
type Point = [number, number];

同名接口会自动合并，而类型别名不会

好处就是在使用第三方库的时候,自己可以定义一个一样名字的接口,添加自己的属性来扩展

interface User {
  name: string;
}
​
interface User {
  id: number;
}
​
let user: User = { id: 666, name: "阿宝哥" };
user.id; // 666
user.name; // "阿宝哥"

type场景

定义基本类型的别名

定义函数类型

定义元组类型

定义联合类型

定义映射类型

interface场景

需要用到接口的自动合并特性

定义对象类型,且无需使用type时