typeScript-对象类型-接口

对象类型-接口

在typeScript中，我们需要用接口(Interface)来定义对象类型

什么是接口

在面向对象编程的语言中，接口(interfact)是一个很重要的概念，它是对行为的抽象，二具体如何行动，需要由类去实现、

TypeScript 中的接口是一个非常灵活的概念，除了可用于对类的一部分行为进行抽象以外，也常用于对「对象的形状（Shape）」进行描述。

简单的例子

 interface Person {
    name:string,
    age:number
  }
  let tom:Person = {
    name:'Tom',
    age:18
  }

上面例子中我们定义了一个Person接口，接着定义了一个变量，它是Person类型，这样我们就约束了tom的形状必须和类型Person一样

定义接口，首字母需要大写

定义的变量规定好了接口类型，多属性少属性都是不允许的，都会报错

  interface aim {
    name:string,
    age:number
  }
  let dd :aim = {
    name:'skks'
  }
//  ERROR in   TS2741: Property 'age' is missing in type '{ name: string; }' but required in type 'aim'.

  let dd :aim = {
    name:'skks',
    age:12,
    sjd:'kdk'
  }
//  ERROR in   TS2322: Type '{ name: string; age: number; sjd: string; }' is not assignable to type 'aim'.
 //  Object literal may only specify known properties, and 'sjd' does not exist in type 'aim'.

可见，变量的形状必须和接口的形状一致

可选属性

有时，我们希望不要完全匹配一个形状，那么可以用可选属性

interface Person1 {
    name:string,
    age?:number
  }
  let lily:Person1 = {
    name:'Lily',
  }

可选属性的含义是属性可以不存在

这时，仍然不允许添加未定义的属性

interface Person1 {
    name:string,
    age?:number
  }
  let lily:Person1 = {
    name:'Lily',
    gender:'male'
  }
//  TS2322: Type '{ name: string; gender: string; }' is not assignable to type 'Person1'.
  // Object literal may only specify known properties, and 'gender' does not exist in type 'Person1'.

任意值

有时候我们希望一个接口允许有任一值，可以这样做

interface Person2 {
    name:string,
    age?:number,
    [propName:string]:any
  }
  let tui:Person2 = {
    name:'Tui',
    age:14,
    gender:'female'
  }

使用[propName:string]定义了任意属性取string类型的值

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性都必须是它类型的子集，否则会报错

interface Person2 {
    name:string,
    age?:number,
    [propName:string]:string
  }
  let tui:Person2 = {
    name:'Tui',
    age:14,
  }
//  ERROR in
// TS2322: Type '{ name: string; age: number; }' is not assignable to type 'Person2'.
//  Property 'age' is incompatible with index signature.
  //  Type 'number' is not assignable to type 'string'.

上面代码中，可选属性age的值是number类型，number类型不是string类型的子集，所以报错了

一个接口中值允许定义一个任意属性，如果接口中有多个类型的属性，则可以使用联合类型去定义它

  // 任意属性
  interface Person2 {
    name:string,
    age?:number,
    [propName:string]:string|number
  }
  let tui:Person2 = {
    name:'Tui',
    age:14,
  }

只读属性

有时候，我们希望对象的字段在创建的时候被赋值，那么可以用readonly来定义只读属性

interface Person3 {
    readonly id:number;
    name:string,
    [propName:string]:any
  }
  let niu:Person3 = {
    id:999,
    name:'niu',
    gender:'male'
  }
  niu.id = 9000
 // ERROR in 
   //   TS2540: Cannot assign to 'id' because it is a read-only property.

这个例子中使用readonly定义了id，在给id赋值的时候就会报错

注意，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候：

 interface Person4 {
    readonly id: number,
    name :string,
    [propName:string]:any
  }
  let didi:Person4 = {
    name:'didi',
    gender:'male'
  }
didi.id = 10034
 // ERROR in 
// TS2741: Property 'id' is missing in type '{ name: string; gender: string; }' but required in type 'Person4'.
// ERROR in 
//  TS2540: Cannot assign to 'id' because it is a read-only property.

上面代码报了两个错误，在声明didi的时候没有声明属性id，在给它赋值的时候，由于是只读属性，所以又报错了，这说明了，只读的约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候。