TS之接口：①属性接口

接口：

　　在面向对象编程中，接口是一种规范的定义，它定义了行为和动作的规范，在程序设计里面，接口起到一种限制和规范的作用。接口定义了某一批类所需要遵守的规范，接口不关心这些类的内部状态数据，也不关心这些类里方法的实现细节，它只规定这批类里必须提供某些方法，提供这些方法的类就可以满足实际需要，typescript中的接口类似于Java，同时还增加了更灵活的接口类型，包括属性、函数、可索引和类。

分类：

• 属性类接口
• 函数类型接口
• 可索引接口
• 类类型接口
• 接口扩展

1.属性接口基本使用

// 对对象进行约束
function printLabel(labelInfo: { label: string }): void {
  console.log(labelInfo.label);
}
// 传入对象类型参数
printLabel({ label: 'xlx' });　　

对批量方法传入参数进行约束

interface FullName {
  firstName: string
  secondName: string
}

// 就是传入对象的约束，属性接口
function printName(name: FullName) {
  // 必须传入对象，包含 firstName  secondName
  console.log(name.firstName + '======' + name.secondName);
}

printName({
  firstName: '张',
  secondName: '三',
});

这时如果参数中包含另外一个参数，则会报错

 

 这时的要求是，对象内必须只有firstName和secondName

解决方法：将参数用外部对象的方式传入

interface FullName {
  firstName: string
  secondName: string
}

function printName(name:FullName) {
  // 必须传入对象，包含 firstName  secondName
  console.log(name.firstName+'======'+name.secondName);
}

let obj = {
  firstName: '张',
  secondName: '三',
  age: 20
}

printName(obj);

 此时的要求是只需要obj对象内包含firstName和secondName属性即可

 （4）属性接口中属性的类型

（1）可选属性

interface Person {
  name: string;
  id?:number
}

let viking:Person = {
  name: "张三",
  id:1
}

上面的Person接口的id属性后面跟的?表示这个id属性是可选的，可以定义也可以不定义 

（2）只读属性

有些对象属性只能再对象刚刚创建的时候修改其值。

interface Person {
  name: string;
  readonly id:number
}

let viking:Person = {
  name: "张三",
  id:1
}

viking.id = 9527

 

属性前面的readonly字段就是约束当前属性的可读的，创建了viking实例以后再手动修改只读属性id的值，则会报错：Cannot assign to 'id' because it is a read-only property

typescript具有ReadonlyArray<T>类型，它与Array<T>相似，只是把所有可变方法去掉了，因此可以确保数组创建以后再也不能被修改。

let a: number[] = [1,2,3,4]
let ro: ReadonlyArray<number> = a

ro[0] = 100 // error
ro.push(5) // error
ro.length = 100  // error
a = ro // error