TypeScript接口讲解-强制约束-可选属性-任意多个属性-只读属性-接口合并-接口继承-接口定义函数参数和返回类型

接口

接口：可以描述类的一部分抽象行为， 也可以描述数据的结构形状
接口一般首字母大写，

接口中 可以定义为 强制约束 可选属性 只读属性 任意属性

# 强制约束

// 定义接口  
interface Instate {
  name: string;
  zge: number;
}

// obj1 满足接口所描述的数据结构的类型
// 并且里面的字段是不能够少的哈。否则会报错的哟
var obj1: Instate;

// 接口数据
obj1 = {
  name: "张三",
  zge: 4
};

console.log(obj1);

可选属性

// 定义接口
interface Instate {
  name: string;
  zge?: number; //这个字段可有可无
}

// obj1 满足接口所描述的数据结构的类型
// 并且里面的字段是不能够少的哈。否则会报错的哟
var obj1: Instate;

// 接口数据
obj1 = {
  name: "张三"
};

console.log(obj1);

任意属性

// 定义接口 可以有任意多个字段 方便后面动态添加属性
ps==》 属性个数不确定的时候， any 必须是任意的类型。 [propN:string]:any,

interface Instate {
  name: string,
  zge?: number,
  [propN:string]:any,
}

// obj1 满足接口所描述的数据结构的类型

var obj1: Instate;

// 接口数据
obj1 = {
  name: "张三"
};

console.log(obj1);

只读属性

// 定义接口 可以有任意多个字段 方便后面动态添加属性
interface Instate {
  readonly name: string; //只读属性
  zge?: number; //这个属性可以有 可以没有
  [propN: string]: any; //动态添加字段哈
}

// obj1 满足接口所描述的数据结构的类型
var obj1: Instate;

// 接口数据
obj1 = {
  name: "张三"
};

obj1.name = "张四"; //你修改了 所以会在这里报错的哈
obj1.zge = 10;

console.log(obj1);

使用接口声明一个这样的数据结构

interface backData{
    name: string,
    age: number
}

interface backResult{
    code: number,
    data: backData[], //数组里面的对象类型
    message:string
}

let obj: backResult = {
    code: 200,
    data: [
        { name: '张三', age: 123 }
    ],
    message: '操作成功'
}

还可以这样声明操作

interface backResult{
    code: number,
    data: { name: string, age: number}[]  
    message:string
}

let obj: backResult = {
    code: 200,
    data: [
        { name: '张三', age: 123 }
    ],
    message: '操作成功'
}

接口重合会进行合并

如果出现了2个或者多个完全相同的接口；会出现接口合并；
类似于 object.assign;
但是在实际的开发中，不要出现接口合并这样的操作

interface Person{
  name: string
  sex: '男' | '女'
}
// 这里又出现了一个接口，此时会进行合并
interface Person {
  weight: string,
  like: string[]
}

// 我们必须写出接口合并后的结构
let obj:Person = {
  name:'lis',
  sex:'男',
  weight:'1.8m',
  like:['唱歌']
}
【特别提醒】在开发的过程中不建议这样使用，我们推荐继承

接口可以继承 通过 extends

有些时候，我们看见项目中别人已经写了一个接口；
可是这个接口现在不缺少几个字段
此时，我们可以使用继承的方式来解决
继承的继承语法：interface PersonA extends PersonB {} 继承一个接口
如果继承多个接口使用英文逗号隔间开
interface PersonA extends PersonB, PersonC

// 别人的接口
interface Person{
  name: string
  sex: '男' | '女'
}
// 继承
interface Person1 extends Person{
  like:string[]
  lang:string
} 
// 这下就符合我们的要求了
let obj:Person1 = {
  name:'李四',
  sex:'男',
  like:['看美女'],
  lang:'中文'
}

接口定义函数参数和返回类型

我们现在需要定义一个接口；满足函数的返回值是数字类型的数组；
函数接受的参数分别是字符串，和布尔

interface Fn{
  // 左侧的是函数接受参数的限制； 右侧是返回值的限制
  (str:string, b:boolean): number[]
}
let b:Fn = function say(str:string, b:boolean){
  return [1]
}

// 提示：类型“string”的参数不能赋给类型“boolean”的参数。
b('hello', '李四') // 调用函数报错；

接口中声明一个没有返回值的函数

interface Person{
  user:number[],
  add:()=>void // 是一个没有返回值的函数
}
let obj:Person = {
  user: [1,3],
  add:function(){
    console.log(this.user)
  }
}
obj.add()