TS入門(mén)筆記——TS接口進(jìn)階詳解

一、為什么需要接口？

let obj:object; // 定義了一個(gè)只能保存對(duì)象的變量 // obj = 1; // obj = "123"; // obj = true; obj = {name:'lnj', age:33}; console.log(obj);之前我們已經(jīng)介紹了用這種方式定義一個(gè)ts的對(duì)象，但是這樣定義內(nèi)部的屬性并沒(méi)有被限制，意義是不大的。
為了進(jìn)一步定義對(duì)象內(nèi)的各種屬性，就產(chǎn)生了接口。

二、什么是接口類(lèi)型?

和number,string,boolean,enum這些數(shù)據(jù)類(lèi)型一樣,接口也是一種類(lèi)型, 也是用來(lái)約束使用者的，他的作用是進(jìn)一步定義對(duì)象內(nèi)的各種屬性。

三、基本用法

// 需求: 要求定義一個(gè)函數(shù)輸出一個(gè)人完整的姓名, 這個(gè)人的姓必須是字符串, 這個(gè)人的名也必須是一個(gè)字符interface FullName{firstName:stringlastName:string }let obj = {firstName:'Jonathan',lastName:'Lee'// lastName:18 會(huì)報(bào)錯(cuò) };//{firstName, lastName}使用了解構(gòu)賦值 function say({firstName, lastName}:FullName):void {console.log(`我的姓名是:${firstName}_${lastName}`); } say(obj);

四、屬性數(shù)量不確定時(shí)的定義方法

如果使用接口來(lái)限定了變量或者形參, 那么在給變量或者形參賦值的時(shí)候, 賦予的值就必須和接口限定的一模一樣才可以, 多一個(gè)或者少一個(gè)都不行。

但是開(kāi)發(fā)中我們往往可能會(huì)遇到少一個(gè)或者多一個(gè)的場(chǎng)景。

（1）少一個(gè)，用可選屬性

可選屬性意如其名，用法也簡(jiǎn)單，只需要在屬性名字后面加一個(gè)？即可。

// 需求: 如果傳遞了middleName就輸出完整名稱(chēng), 如果沒(méi)有傳遞middleName, 那么就輸出firstName和lastName interface FullName{firstName:stringlastName:stringmiddleName?:string[propName:string]:any }function say({firstName, lastName, middleName}:FullName):void {// console.log(`我的姓名是:${firstName}_${lastName}`);if(middleName){console.log(`我的姓名是:${firstName}_${middleName}_${lastName}`);}else{console.log(`我的姓名是:${firstName}_${lastName}`);} }say({firstName:'Jonathan', lastName:'Lee', middleName:"666"}); say({firstName:'Jonathan', lastName:'Lee'});

（2）多一個(gè)，用索引簽名

用于描述那些“通過(guò)索引得到”的類(lèi)型，比如arr[10]或obj["key"]。

意思有點(diǎn)抽象，可以大概理解為是在定義對(duì)象中key（propName）和value的數(shù)據(jù)結(jié)構(gòu)，后續(xù)對(duì)象中的屬性，只要key和value滿(mǎn)足索引簽名的限定即可, 無(wú)論有多少個(gè)都無(wú)所謂。

interface FullName {[propName:string]:string } let obj:FullName = {// 注意點(diǎn): 只要key和value滿(mǎn)足索引簽名的限定即可, 無(wú)論有多少個(gè)都無(wú)所謂firstName:'Jonathan',lastName:'Lee',// middleName:false // 報(bào)錯(cuò)// 無(wú)論key是什么類(lèi)型最終都會(huì)自動(dòng)轉(zhuǎn)換成字符串類(lèi)型, 所以沒(méi)有報(bào)錯(cuò)// false: '666' }interface stringArray {[propName:number]:string }let arr:stringArray = {0:'a',1:'b',2:'c' };// let arr:stringArray = ['a', 'b', 'c']; console.log(arr[0]); console.log(arr[1]); console.log(arr[2]);

五、接口的繼承

TS中的接口和JS中的類(lèi)一樣是可以繼承的

interface LengthInterface {length:number}interface WidthInterface {width:number}interface HeightInterface {height:number}interface RectInterface extends LengthInterface,WidthInterface,HeightInterface {// length:number// width:number// height:numbercolor:string}let rect:RectInterface = {length:10,width:20,height:30,color:'red'}

六、函數(shù)接口

函數(shù)本質(zhì)上是一個(gè)特殊的對(duì)象，我們也可以用接口來(lái)定義函數(shù)的參數(shù)和返回值。

interface SumInterface {(a:number, b:number):number }// 建議使用這種寫(xiě)法 let sum:SumInterface= function(x,y) {return x + y; }let res = sum(10, 20);console.log(res);

ts入門(mén)筆記目錄：

TS入門(mén)筆記1——TS的類(lèi)型聲明

TS入門(mén)筆記2——TS接口進(jìn)階詳解

TS入門(mén)筆記3——TS中的函數(shù)聲明

TS入門(mén)筆記4——TS的類(lèi)型斷言（解釋型類(lèi)型轉(zhuǎn)換）

TS入門(mén)筆記5——TS的泛型

TS入門(mén)筆記6——ts中的聲明文件、模塊、命名空間

記錄知識(shí)，傳遞快樂(lè)~
如果我的總結(jié)對(duì)你有幫助，請(qǐng)給我點(diǎn)個(gè)贊，你的鼓勵(lì)是我持續(xù)記錄的一大動(dòng)力~
如果文章中有錯(cuò)誤，請(qǐng)多包涵，歡迎在評(píng)論中指出~

總結(jié)

以上是生活随笔為你收集整理的2接口详解_TS入门笔记2——TS接口进阶详解的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。