建站
咨詢(xún)
售后
建站咨詢(xún)
新聞中心
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 = "分娩";
小結(jié)
interface接口的定義其實(shí)很簡(jiǎn)單，和定義對(duì)象一樣的形式。接口對(duì)象的基本屬性包括：默認(rèn)屬性、可選屬性以及只讀屬性，其可索引類(lèi)型的定義只有string和number兩種形式，類(lèi)接口進(jìn)行繼承的形式和類(lèi)的繼承大同小異。
參考文章
- 阿寶哥的《重學(xué)TS》
- 《ts中文文檔》
- 《大話 Typescript 接口》
本文轉(zhuǎn)載自微信公眾號(hào)「前端萬(wàn)有引力」，可以通過(guò)以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系前端萬(wàn)有引力公眾號(hào)。
新聞名稱(chēng)：【前端】你好，我叫TypeScript 02──變量和接口
分享網(wǎng)址：http://www.dlmjj.cn/article/djheheg.html
