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://www.uj5u.com/qiye/157952.html
標籤:JavaScript
下一篇:ts中的類
