ts中接口的用法
程序员文章站
2022-03-07 15:34:24
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
-
接口继承接口
- 接口继承类
上一篇: Vue起步(无cli)的啊教程详解