ts中接口的用法

ts中的接口主要的做用是:數組

  • 對「對象」進行約束描述
  • 對「類」的一部分行爲進行抽象

1、屬性接口

接口中可定義 肯定屬性、可選屬性、任意屬性、只讀屬性函數

一、肯定屬性
interface UserInfo {
  name: string; age: number;
}

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

接口中約束好的肯定屬性,定義對象變量的時候 不能少spa

二、可選屬性code

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

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

接口中的可選屬性,是表示在對象變量中能夠不存在對象

三、任意屬性blog

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

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

注:一旦定義了任意屬性,那麼肯定屬性和可選屬性的類型都必須是任意屬性類型的子類;繼承

定義了任意屬性後,對象變量中的屬性個數才能夠出現比接口的屬性數量多的狀況索引

四、只讀屬性接口

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
};

只讀屬性也是肯定屬性,在對象變量定義的時候必須有值,此後不能修改string

 2、函數接口

對方法傳入的參數以及返回值進行約束

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

3、索引接口(不經常使用)

可對數組或對象進行約束

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

 4、類接口

對類進行約束,和抽象類有點類似

  •  類實現接口implements
  • 接口繼承接口
  • 接口繼承類
相關文章
相關標籤/搜索