TS入門筆記——TS接口進階詳解

一、為什么需要接口？

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

二、什么是接口類型?

和number,string,boolean,enum這些數據類型一樣,接口也是一種類型, 也是用來約束使用者的，他的作用是進一步定義對象內的各種屬性。

三、基本用法

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

四、屬性數量不確定時的定義方法

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

但是開發中我們往往可能會遇到少一個或者多一個的場景。

（1）少一個，用可選屬性

可選屬性意如其名，用法也簡單，只需要在屬性名字后面加一個？即可。

// 需求: 如果傳遞了middleName就輸出完整名稱, 如果沒有傳遞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）多一個，用索引簽名

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

意思有點抽象，可以大概理解為是在定義對象中key（propName）和value的數據結構，后續對象中的屬性，只要key和value滿足索引簽名的限定即可, 無論有多少個都無所謂。

interface FullName {[propName:string]:string } let obj:FullName = {// 注意點: 只要key和value滿足索引簽名的限定即可, 無論有多少個都無所謂firstName:'Jonathan',lastName:'Lee',// middleName:false // 報錯// 無論key是什么類型最終都會自動轉換成字符串類型, 所以沒有報錯// 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中的類一樣是可以繼承的

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'}

六、函數接口

函數本質上是一個特殊的對象，我們也可以用接口來定義函數的參數和返回值。

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

ts入門筆記目錄：

TS入門筆記1——TS的類型聲明

TS入門筆記2——TS接口進階詳解

TS入門筆記3——TS中的函數聲明

TS入門筆記4——TS的類型斷言（解釋型類型轉換）

TS入門筆記5——TS的泛型

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

記錄知識，傳遞快樂~
如果我的總結對你有幫助，請給我點個贊，你的鼓勵是我持續記錄的一大動力~
如果文章中有錯誤，請多包涵，歡迎在評論中指出~

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。