TS入门——04.接口

ts接口概念

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都是抽象的，需要由具体的对象去实现，简而言之接口用来定义标准，定义了行为的规范
接口使用interface来定义，如下

interface my_interface { 内容 }

例子：

interface myName {
  firstName: string;
  secondName: string;
}
// myName接口表示应用了该接口的数据都同时满足其中的两个属性的存在
var obj: myName = {
  // firstName: 123 // 报错必须满足接口中的数据类型
  firstName: 'lu',
  secondName: 'cky'
}

console.log(obj.firstName) // lu
console.log(obj.secondName) // cky

接口约束对象和数组

约束对象和数组的接口相似，其实本质上都是约束属性名和键值

// 定义数组约束
interface arrRules {
  [index: number]: string // 表示索引只能是数字类型，元素只能是字符串类型
}
// 定义对象约束
interface objRules {
  [index: string]: number // 表示键名只能是字符串，值只能是数字
}


const arr1: arrRules = ['lucky', 'shuaige']
// const arr2: arrRules = ['lucky', 'shuaige', 1, 4, true] // 报错 包含非字符串元素
const obj1: objRules = {
  max: 120,
  age: 18
}
const obj2: objRules = {
  // name: 'lucky', // 报错 键值为字符串，不符合定义的接口规则
  age: 18
}

接口约束函数

接口约束函数主要是约束函数的参数和函数的返回值，例：

// 定义函数约束接口
interface fnRlue {
  (name: string, age: number): String //表示以此接口定义的函数必须传俩个规则的参数， 返回的类型必须为是字符串类型
}

var fn: fnRlue = function(name: string, age: number): string {
  return name + '你' + age + '岁'
}
console.log(fn('lucky', 18)) // lucky你18岁

接口约束类

使用接口来约束类的属性和方法，例

interface classRules {
  name: string,
  sayHi(age: number): string // 表明类必须要有name属性和sayHi方法，sayHi方法必须传age数字类型参数且返回字符类型数据
}

// 使用implements关键字
class Person implements classRules {
  name: string
  constructor(name: string) {
    this.name = name
  }
  sayHi(age: number) {
    return this.name + age
  }
}

var zhangsan = new Person('lucky')
console.log(zhangsan.name) // lucky
console.log(zhangsan.sayHi(100)) // lucky100

接口的继承

接口也使用extends关键字来实现继承，语法如下

interface 子接口 extends 父接口

子接口会把父接口的约束继承过来，使用子接口来约束的对象必须同时满足父接口和子接口的约束条件，例：

interface father {
  name: string // 必须要有name属性
}
interface son extends father {
  age: number // 必须同时拥有name和age属性
}


var obj1: father = {
  name: 'zhangsan'
}
/*
下面定义的obj2不满足约束，定义语法报错，应该定义好父接口的name属性，如obj3
var obj2: son = {
  age: 18
}
*/
var obj3: son = {
  name: 'wangwu',
  age: 18
}

上面实例中子接口只继承了一个父接口，属于单继承
而子接口继承多个父接口则叫做多继承，同样的，使用该子接口定义的对象必须满足继承的所有父接口和自身里面的约束，例：

interface father {
  name: string // 必须要有name属性
}
interface mother {
  age: number // 必须要有age属性
}

interface son extends father, mother {
  sex: string // 必须同时拥有name,age,sex属性
}

var obj: son = {
  name: 'zhangsan',
  age: 22,
  sex: '男'
}

以上便是ts接口的知识了，loading…