ts中接口的用法

摘要：属性接口:接口中可定义确定属性、可选属性、任意属性、只读属性;只读属性也是确定属性，在对象变量定义的时候必须有值，此后不能修改、函数接口对方法传入的参数以及返回值进行约束

ts中的接口主要的作用是：

对“对象”进行约束描述
对“类”的一部分行为进行抽象

一、属性接口

接口中可定义确定属性、可选属性、任意属性、只读属性

1、确定属性

interface UserInfo {
  name: string;
  age: number;
}

const myInfo: UserInfo = {
  name: "haha",
  age: 20
};

接口中约束好的确定属性，定义对象变量的时候不能少

2、可选属性

interface UserInfo {
  name: string;
  age: number;
  sex?:string 
}

const myInfo: UserInfo = {
  name: "haha",
  age: 20
};

接口中的可选属性，是表示在对象变量中可以不存在

3、任意属性

interface UserInfo {
  name: string;
  age: number;
  sex?:string ;
  [propName: string]:any;
}

const myInfo: UserInfo = {
  name: "haha",
  age: 20,
  test1: 'lala',
  test2: 'ff',
  test3:123
};

注：一旦定义了任意属性，那么确定属性和可选属性的类型都必须是任意属性类型的子类；

定义了任意属性后，对象变量中的属性个数才可以出现比接口的属性数量多的情况

4、只读属性

interface UserInfo {
  readonly id: number;
  name: string;
  age: number;
  sex?: string;
  [propName: string]: any;
}

const myInfo: UserInfo = {
  id: 1,
  name: "haha",
  age: 20,
  test1: "lala",
  test2: "ff",
  test3: 123
};

只读属性也是确定属性，在对象变量定义的时候必须有值，此后不能修改

二、函数接口

对方法传入的参数以及返回值进行约束

interface Func {
  (param1: string, param2: number): boolean;
}
let myFunc: Func = function(param1, param2){
  return typeof param1 === "string" && typeof param2 === "number";
};
myFunc("22222", 1111);

三、索引接口（不常用）

可对数组或对象进行约束

interface ArrIndex {
    [index:number]: string
}
interface Obj {
　　[index:string]:string
}
let myArr: ArrIndex = ['first','second']
let myObj:Obj = {
　　name: 'kkkk'
}

四、类接口

对类进行约束，和抽象类有点相似

类实现接口implements
接口继承接口
接口继承类

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_7196