欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

ts中接口的用法

程序员文章站 2022-06-23 22:31:36
ts中的接口主要的作用是: 对“对象”进行约束描述 对“类”的一部分行为进行抽象 一、属性接口 接口中可定义 确定属性、可选属性、任意属性、只读属性 1、确定属性 interface UserInfo { name: string; age: number; } const myInfo: User ......

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
  • 接口继承接口
  • 接口继承类