TypeScript 02中的變量和接口有什么作用

這篇文章主要介紹“TypeScript 02中的變量和接口有什么作用”，在日常操作中，相信很多人在TypeScript 02中的變量和接口有什么作用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”TypeScript 02中的變量和接口有什么作用”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！

TS變量與接口

變量聲明

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

接口在面向?qū)ο笳Z言中，接口是個比較核心的概念，其作用就是對類型命名和代碼定義契約，其實就是對行為的抽象，對對象的形狀進(jìn)行描述。在TS中就是對值所具有的結(jié)構(gòu)進(jìn)行類型檢查。

// 原始方法 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屬性。而傳入的對象參數(shù)實際會包含很多屬性，但是編譯器智慧檢查那些必須的屬性是否存在、類型是否匹配。printLabel2接口其實就是對printLabel中傳入對象類型的抽象，定義它的參數(shù)行為，類型檢查器不會關(guān)注屬性的順序。

接口對象的聲明方式

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

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

接口對象的基本屬性

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

• 默認(rèn)屬性：表示該屬性必須存在，可讀可改

• 可選屬性：表示該屬性可有可無、可讀可改，只需要在屬性名后加上?符號即可，如：name?:string;?？梢詫赡艽嬖诘膶傩赃M(jìn)行預(yù)定義，捕獲引用了不存在屬性時的錯誤。

• 只讀屬性：表示該屬性只能讀取、不可修改，只需要在對象創(chuàng)建時對指定屬性名前加上readonly即可，可以確保創(chuàng)建后不被修改。

interface LabelValue{   readonly id: number;//只讀屬性，表示該屬性只能讀取、不可修改   name?: string;//可選屬性，表示該屬性可有可無   label: string;//默認(rèn)屬性，表示該屬性必須存在 } 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 屬性

接口對象的函數(shù)類型

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

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

interface myFun{   (name:string, age:number): void;//()中的是函數(shù)類型，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

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

對于函數(shù)類型檢查而言，函數(shù)的參數(shù)名不需要與接口定義的名字匹配。類型檢查器會對函數(shù)參數(shù)進(jìn)行逐個檢查，判斷對應(yīng)位置的參數(shù)類型是否匹配。當(dāng)然，如果你在函數(shù)中沒有指定參數(shù)類型，那么TS類型系統(tǒng)會根據(jù)接口進(jìn)行推斷，并執(zhí)行檢查是否匹配。

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

接口對象的可索引類型

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

//定義一個學(xué)生列表接口 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進(jìn)行定義索引簽名。可以同時使用兩種類型的索引，但是數(shù)字索引的返回值必須是字符串索引返回值類型的子類型。當(dāng)使用  number來索引時，JavaScript會將它轉(zhuǎn)換成string然后再去索引對象。

• 字符串定義索引簽名

• 數(shù)字定義索引簽名

• 混合類型定義索引簽名

class Animal {     name: string; } class Dog extends Animal {     breed: string; }  // 錯誤：使用數(shù)值型的字符串索引，有時會得到完全不同的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中可以對類設(shè)置強(qiáng)制執(zhí)行的類型約定，即類接口。

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

注意：

• 接口只描述類的公共部分，而不是公共和私有兩部分。它不會幫你檢查類是否具有某些私有成員。

• 類實現(xiàn)接口時，必須實現(xiàn)接口所有的屬性

• 接口無法約束類的構(gòu)造函數(shù)，類型檢查器只會對實例部分進(jìn)行檢查

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

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

繼承接口

和類一樣，接口也可以相互繼承?？梢詫⒁粋€接口成員復(fù)制到另一個接口，靈活地分割接口到可復(fù)用模塊中。

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

同樣的，接口也可以實現(xiàn)多繼承。

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 = "分娩";

小結(jié)

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

到此，關(guān)于“TypeScript 02中的變量和接口有什么作用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>