美文网首页
04.interface

04.interface

作者: Jason_Fight | 来源:发表于2023-11-08 16:50 被阅读0次

    接口

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

    相关文章

      网友评论

          本文标题:04.interface

          本文链接:https://www.haomeiwen.com/subject/pamqwdtx.html