04.interface

2023-11-08  本文已影响0人  Jason_Fight

接口

使用接口来定义对象的类型,接口是对象的状态(属性)和行为(方法)的抽象(描述)
简单理解就是为代码提供一中约定
声明接口的关键字是interface

interface Person {
  name: string,
  age: number
}
let jason:Person = {
  name: 'jason',
  age: 31
}

上面的代码中,定义了一个接口Person,然后定义了一个变量jason, 他的类型是Person,这样就约束了jason的结构, 必须和接口Person一致.

接口一般是首字母大写(也有人习惯用大写字母I开头,用来表示这是一个接口)

1 设置可选/只读属性

interface Person2 {
  readonly name: string,
  age?: number
}
let jason_2:Person2 = {
  name: 'jason_2',
  age: 31, // 该属性可填可不填
}
console.log(jason_2);

// jason_2.name = 'hello' // 此处会报错,name属性是只读属性, 赋值之后不能再次修改.

可选属性,我们最常见的使用情况是,不确定这个参数是否会传,或者存在。
只读属性用于限制只能在对象刚刚创建的时候修改其值

2 索引签名

有时候希望接口中有一个任意的属性,这是使用索引签名的形式来实现.
需要注意,易丹定义了任意属性,name确定属性和可选属性的类型都必须是她类型的子集,例如下方的接口


interface Person3 {
  name: string,
  [prop: string]: number
}

上面的接口,name属性是string类型,而任意属性prop是number类型,string不是number的子集,所以会报错.此时需要修改name的类型为string, 或者是将prop的属性改为包含string的类型, 比如any或者 string | number

接口和类型别名的区别

大多数情况下,接口和类型别名效果等价,只有在某些特定场景下存在区别

TS的核心原则之一, 是对值所具有的结构进行类型检查,而接口的作用就是为这些类型命名,为代码定义数据类型

type(类型别名)是给一个类型起一个新名字,和interface很像,但是可以作用于原始值(基本类型),联合类型,元组以及其他任何需要手写的类型,起别名不会新建立一个类型,他创建了一个新名字来引用那个类型,给基本类型起别名,通常没什么意义.

相同点
  1. interface和type都可以描述对象或者函数的类型, 只是语法不同
type MyType = {
  name: string,
  sayHi(): void
}

interface MyInterface {
  name: string,
  sayHi():void
}
  1. 都可以扩展, interface用extends扩展, type用&进行扩展

interface MyInterface {
  name: string,
  sayHi():void
}
interface Interface2 extends MyInterface {
  age: number
}

type MyType = {
  name: string,
  sayHi(): void
}

type Type2 = MyType & {
  age: number
}
不同点
  1. type可以声明基本数据类型别名/联合类型/元组等,interface不行
type MyNumber = nunmber
type MyString  = string
type stringOrNumber = string | number

type List = [string, number]
  1. interface 能合并声明, type不行
interface MyPerson1{
  name: string 
}

interface MyPerson1{
  age: number 
}

上面两个会自动合并, myPerson1 会拥有name age两个属性

上一篇 下一篇

猜你喜欢

热点阅读