[[400318]]

TS變量與接口

變量聲明

其實TS中的變量聲明和JS中是一樣的，所以你會JS就會TS，無外乎var、let和const，記住以下的表格內容就能解決絕大多數場景問題。

接口在面向對象語言中，接口是個比較核心的概念，其作用就是對類型命名和代碼定義契約，其實就是對行為的抽象，對對象的形狀進行描述。在TS中就是對值所具有的結構進行類型檢查。

// 原始方法 
function printLabel(labelObj: {label:string}){ 
  console.log(labelObj.label); 
} 
let myObj = {name:"wenbo",label:"size 110"}; 
printLabel(myObj); 
 
// 接口方法 
interface LabelValue { 
  label: string; 
} 
 
function printLabel2(labelValue:LabelValue){ 
  console.log(labelValue.label); 
   
} 
printLabel2(myObj); 

上述代碼表明，printLabel中傳入對象labelObj有string類型的label屬性。而傳入的對象參數實際會包含很多屬性，但是編譯器智慧檢查那些必須的屬性是否存在、類型是否匹配。printLabel2接口其實就是對printLabel中傳入對象類型的抽象，定義它的參數行為，類型檢查器不會關注屬性的順序。

接口對象的聲明方式

接口對象的聲明方式很簡單，就是在接口名前加上interface即可。

interface myObj { 
  name:string; 
  label:string; 
} 

接口對象的基本屬性

接口對象的屬性無外乎默認屬性、可選屬性和只讀屬性等。

• 默認屬性：表示該屬性必須存在，可讀可改
• 可選屬性：表示該屬性可有可無、可讀可改，只需要在屬性名后加上?符號即可，如：name?:string;。可以對可能存在的屬性進行預定義，捕獲引用了不存在屬性時的錯誤。
• 只讀屬性：表示該屬性只能讀取、不可修改，只需要在對象創建時對指定屬性名前加上readonly即可，可以確保創建后不被修改。

interface LabelValue{ 
  readonly id: number;//只讀屬性，表示該屬性只能讀取、不可修改 
  name?: string;//可選屬性，表示該屬性可有可無 
  label: string;//默認屬性，表示該屬性必須存在 
} 
function printLabel(labelValue:LabelValue){ 
  console.log(labelValue); 
} 
 
let myObj: LabelValue = {name:"yichuan",id:100,label:"size 110"}; 
printLabel(myObj);//{ name: 'yichuan', id: 100, label: 'size 110' } 
 
myObj.id = 200;// 報錯: Cannot assign to 'id' because it is a constant or a read-only property. 
 
let myObj2: LabelValue ={id:100}; 
// Type '{ id: number}' is not assignable to type 'LabelValue'. 
// Property 'label' is missing in type '{ id: number}'. 
// 報錯: 缺少 label 屬性 

接口對象的函數類型

接口能夠描述JavaScript中對象擁有的各種各樣的外形。 除了描述帶有屬性的普通對象外，接口也可以描述函數類型。

使用接口表示函數類型，需要給接口定義一個調用簽名，是一個只有參數列表和返回值類型的函數，其中參數列表的每個參數都得有屬性名和類型。

interface myFun{ 
  (name:string, age:number): void;//()中的是函數類型，void是否有返回值 
} 
 
let iFun: myFun; 
 
iFun = function (name:string,age:number){ 
  console.log(`my name is ${name}, my age is ${age}`) 
} 
 
iFun("yichuan",18);//my name is yichuan, my age is 18 

我們可以看到：首先創建了一個函數類型的接口myFun，再創建了一個函數類型的變量iFun，并將同類型的函數賦值給這個變量。

對于函數類型檢查而言，函數的參數名不需要與接口定義的名字匹配。類型檢查器會對函數參數進行逐個檢查，判斷對應位置的參數類型是否匹配。當然，如果你在函數中沒有指定參數類型，那么TS類型系統會根據接口進行推斷，并執行檢查是否匹配。

interface myFun{ 
  (name:string, age:number): void; 
} 
 
let iFun: myFun; 
 
iFun = function (name,age){ 
  console.log(`my name is ${name}, my age is ${age}`) 
} 
 
iFun("yichuan",18);////my name is yichuan, my age is 18 

接口對象的可索引類型

與使用接口描述函數類型差不多，只不過可索引類型時通過描述對象索引類型和索引返回值類型的「索引簽名」。

//定義一個學生列表接口 
interface StudentList{ 
  id: number; 
  name: string; 
} 
 
// 定義一個班級接口 
interface ClassList{ 
  classname: string; 
  students: StudentList[]; 
  [index: string]: any;//可以用任意的string類型去索引聲明的對象, 值是any類型 
} 
 
function printLabel(data:ClassList){ 
  return data; 
} 
 
printLabel({ 
  classname:"class 1", 
  numbers:30, 
  students:[{ 
    id:2001, 
    name:"yichuan" 
  }] 
}) 

可索引接口的類型只可以使用string和number進行定義索引簽名。可以同時使用兩種類型的索引，但是數字索引的返回值必須是字符串索引返回值類型的子類型。當使用 number來索引時，JavaScript會將它轉換成string然后再去索引對象。

• 字符串定義索引簽名
• 數字定義索引簽名
• 混合類型定義索引簽名

class Animal { 
    name: string; 
} 
class Dog extends Animal { 
    breed: string; 
} 
 
// 錯誤：使用數值型的字符串索引，有時會得到完全不同的Animal! 
interface NotOkay { 
    [x: number]: Animal; 
    [x: string]: Dog; 
} 

字符串索引簽名能夠很好的描述dictionary模式，并且它們也會確保所有屬性與其返回值類型相匹配。因為字符串索引聲明了obj.property和obj["property"]兩種形式都可以。

為防止給索引賦值，可以將其索引簽名定義為只讀類型。

interface ReadonlyStringArray { 
    readonly [index: number]: string; 
} 
let myArray: ReadonlyStringArray = ["Alice", "Bob"]; 
myArray[2] = "Mallory"; // error! 

類接口

TS中可以對類設置強制執行的類型約定，即類接口。

interface FatherInterface{ 
  firstName: string; 
} 
 
class Son implements FatherInterface{ 
  firstName!: String; 
  constructor(lastName:string,age:number){}; 
} 

注意：

• 接口只描述類的公共部分，而不是公共和私有兩部分。它不會幫你檢查類是否具有某些私有成員。
• 類實現接口時，必須實現接口所有的屬性
• 接口無法約束類的構造函數，類型檢查器只會對實例部分進行檢查

我們知道類具有兩種類型：靜態部分的類型和實例的類型。當你用構造器簽名去定義一個接口并試圖定義一個類去實現這個接口時會得到一個錯誤：只對其實例部分進行類型檢查，而constructor存在于類的靜態部分，所以不在檢查的范圍內。

interface FatherInterface{ 
  new (firstName:string); 
} 
 
class Son implements FatherInterface{ 
  constructor(firstName:string,lastName:string,age:number){}; 
} 

繼承接口

和類一樣，接口也可以相互繼承。可以將一個接口成員復制到另一個接口，靈活地分割接口到可復用模塊中。

interface DogInterface{ 
  type:string; 
} 
 
interface Erha extends DogInterface{ 
  name:string; 
  age:number; 
} 
 
let erha = <Erha>{}; 
erha.type = "dog"; 
erha.name = "bobo"; 
erha.age = 2; 

同樣的，接口也可以實現多繼承。

class Son implements FatherInterface{ 
  constructor(firstName:string,lastName:string,age:number){}; 
} 
 
interface AnimalInterface{ 
  foal:string; 
} 
 
interface DogInterface{ 
  type:string; 
} 
 
interface Erha extends DogInterface, AnimalInterface{ 
  name:string; 
  age:number; 
} 
 
let erha = <Erha>{}; 
erha.type = "dog"; 
erha.name = "bobo"; 
erha.age = 2; 
erha.foal = "分娩"; 

小結

interface接口的定義其實很簡單，和定義對象一樣的形式。接口對象的基本屬性包括：默認屬性、可選屬性以及只讀屬性，其可索引類型的定義只有string和number兩種形式，類接口進行繼承的形式和類的繼承大同小異。

參考文章

• 阿寶哥的《重學TS》
• 《ts中文文檔》
• 《大話 Typescript 接口》

本文轉載自微信公眾號「前端萬有引力」，可以通過以下二維碼關注。轉載本文請聯系前端萬有引力公眾號。