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
• 接口繼承接口
• 接口繼承類