本文小編為大家詳細(xì)介紹“TypeScript中變量和接口的作用是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“TypeScript中變量和接口的作用是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

創(chuàng)新互聯(lián)建站長(zhǎng)期為上千家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為隴南企業(yè)提供專(zhuān)業(yè)的成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)，隴南網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

TS變量與接口

變量聲明

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

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

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

接口對(duì)象的聲明方式

接口對(duì)象的聲明方式很簡(jiǎn)單，就是在接口名前加上interface即可。

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

接口對(duì)象的基本屬性

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

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

• 可選屬性：表示該屬性可有可無(wú)、可讀可改，只需要在屬性名后加上?符號(hào)即可，如：name?:string;。可以對(duì)可能存在的屬性進(jìn)行預(yù)定義，捕獲引用了不存在屬性時(shí)的錯(cuò)誤。

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

interface LabelValue{   readonly id: number;//只讀屬性，表示該屬性只能讀取、不可修改   name?: string;//可選屬性，表示該屬性可有可無(wú)   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;// 報(bào)錯(cuò): 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}'. // 報(bào)錯(cuò): 缺少 label 屬性

接口對(duì)象的函數(shù)類(lèi)型

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

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

interface myFun{   (name:string, age:number): void;//()中的是函數(shù)類(lèi)型，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)建了一個(gè)函數(shù)類(lèi)型的接口myFun，再創(chuàng)建了一個(gè)函數(shù)類(lèi)型的變量iFun，并將同類(lèi)型的函數(shù)賦值給這個(gè)變量。

對(duì)于函數(shù)類(lèi)型檢查而言，函數(shù)的參數(shù)名不需要與接口定義的名字匹配。類(lèi)型檢查器會(huì)對(duì)函數(shù)參數(shù)進(jìn)行逐個(gè)檢查，判斷對(duì)應(yīng)位置的參數(shù)類(lèi)型是否匹配。當(dāng)然，如果你在函數(shù)中沒(méi)有指定參數(shù)類(lèi)型，那么TS類(lèi)型系統(tǒng)會(huì)根據(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

接口對(duì)象的可索引類(lèi)型

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

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

可索引接口的類(lèi)型只可以使用string和number進(jìn)行定義索引簽名。可以同時(shí)使用兩種類(lèi)型的索引，但是數(shù)字索引的返回值必須是字符串索引返回值類(lèi)型的子類(lèi)型。當(dāng)使用  number來(lái)索引時(shí)，JavaScript會(huì)將它轉(zhuǎn)換成string然后再去索引對(duì)象。

• 字符串定義索引簽名

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

• 混合類(lèi)型定義索引簽名

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

字符串索引簽名能夠很好的描述dictionary模式，并且它們也會(huì)確保所有屬性與其返回值類(lèi)型相匹配。因?yàn)樽址饕暶髁薿bj.property和obj["property"]兩種形式都可以。

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

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

類(lèi)接口

TS中可以對(duì)類(lèi)設(shè)置強(qiáng)制執(zhí)行的類(lèi)型約定，即類(lèi)接口。

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

注意：

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

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

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

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

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

繼承接口

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

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

同樣的，接口也可以實(shí)現(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.type = "dog"; erha.name = "bobo"; erha.age = 2; erha.foal = "分娩";

讀到這里，這篇“TypeScript中變量和接口的作用是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。