一、對象類型

object表示非原始類型，也就是除number，string，boolean，symbol，null或undefined之外的類型。對象類型可以有幾種形式：

• 對象類型
• 數組類型
• 類類型
• 函數類型

這幾種形式我們在TypeScript里叫做對象類型。

1.對象類型:

比如我們寫一個表示商品基本信息的對象:

const KFC = {name: "漢堡炸雞",price: 38.5,sell() {return `單品是:${this.name},售價是:{this.price},送可樂一杯!`} }//可以給這個對象加一個類型注解 const KFC:{name: string;price: number;sell:() => string }={name: "漢堡炸雞",price: 38.5,sell() {return `單品是:${this.name},售價是:${this.price},送可樂一杯!`} } console.log(KFC.sell())

（1）對象注解

之前我們說過類型注解，現在我們也可以對對象做一個類型注解。

在使用對象前，就可以根據需求，提前設計好對象的結構，也即是我們在定義對象之前，建立一種契約，約束對象的結構。

比如，我們創建一個商品包含商品名字和價格的對象。我們可以對對象進行約束：

//對象的結構化類型 對該對象值的結構進行類型約束。 var milkTea:{name: string;price:number;sell: () => string }milkTea= {name: "雪頂茉莉奶茶",price: 27,sell: function () {return `品類:${this.name},價格:${this.price},買一杯送一杯!`} }console.log(milkTea.sell()); //對象類型注解的語法類似于對象自身的語法。 //注意：多個鍵值對之間使用分號（;）分隔，并且分號可省略。

問題：如何給對象中的方法，添加類型注解？

let people: {sayHi: () => voidsing: (name: string) => voidsum: (num1: number, num2: number) => number}

方法類型注解的關鍵點：1 參數 2 返回值。
箭頭（=>）左邊小括號中的內容：表示方法的參數類型。
箭頭（=>）右邊的內容：表示方法的返回值類型。

直接在對象名稱后面寫類型注解的壞處：1. 代碼結構不簡潔 2. 無法復用類型注解。

二、ts中的接口

接口：為對象的類型注解命名，并為你的代碼建立契約來約束對象的結構。

語法：

interface goodsFood {name: string;price: number;like: string;sell:()=>string }const coffe: goodsFood={name:"生椰拿鐵",price:38,like:"半糖,溫熱",sell:function(){return `你想要的商品是:${this.name},當前價格是:${this.price},喜好是:${this.like}`} } console.log(coffe.sell());

接口的作用：在面向對象的編程中，接口是一種規范的定義，它定義了行為和動作的規范，在程序設計里面，接口起到一種限制和規范的作用。接口定義了某一批類所需要遵守的規范，接口不關心這些類的內部狀態數據，也不關心這些類里方法的實現細節，它只規定這批類里必須提供某些方法，提供這些方法的類就可以滿足實際需要。 typescrip中的接口類似于java，同時還增加了更靈活的接口類型，包括屬性、函數、可索引和類等。

（2）屬性接口

現在我們定義一個方法printPerson 自定義方法傳入參數,對json進行約束.

function student(name:{ name: string }) {return `this is ${name.name}` }console.log(student({ name: "劉德華" })) function teacher(params: {name:string}) { return `This is a teacher whose name is ${params.name}`}console.log(teacher({ name: "lemo" }));

這時我們發現兩個方法對參數的約束幾乎是一樣的，這樣每次都要重復寫一遍很繁瑣。我們可以使用接口對批量方法傳入參數進行約束。

這時，我們可以改寫成如下的代碼：

interface label {name:string } function student(name:label) {return `this is ${name.name}` }console.log(student({ name: "劉德華" })) function teacher(params: label) { return `This is a teacher whose name is ${params.name}`}console.log(teacher({ name: "lemo" }));

對傳入對象的屬性約束 就是 屬性接口

可選屬性：

在傳遞參數的時候，如果當前參數不是必選項，可以當作可選參數使用，使用？表示

interface mobile{name: string; //注意;結束price: number;color?: string; 可選屬性，在傳遞參數的時候可以不傳遞size:string; }const iphone: mobile = {name: "iphone13pro",price: 7899,size: "4.7英寸",color:"red"}console.log(iphone);

（3）函數類型接口

對方法傳入的參數 以及返回值進行約束

interface fullName {(firstName:string,lastName:string):string }var person: fullName = (firstName: string, lastName: string) => `我的名字是${firstName + lastName}`;console.log(person("拼","多多"))

（4）可索引接口

數組，對象的約束

/*** 使用接口來對數組進行約束*/interface arr {//數組索引為number類型 值為string類型[index: number]: string; }const menu: arr = ["紅燒排骨", "魚香肉絲", "蔥爆鮑魚"]; console.log(menu);/*** 使用接口來對對象進行約束*/interface fruit {[index: string]: string; }const mango = {name: "新鮮大芒果",color: "yellow" }

（5）類類型接口

對類的約束 和 抽象類有點相似

/*** 類類型接口* 對類的約束*/interface Animal {name: string;age: number;eat(food:string):void }class Dog implements Animal {name: string;age: number;constructor(name: string, age: number) {this.name = name;this.age = age;}eat(food: string): void {console.log(`這個小狗是${this.name},年齡:${this.age}歲,正在吃${food}`)} }const dog1 = new Dog("翠花", 2); dog1.eat("狗糧!!");

（6）接口拓展

接口可以繼承接口

/*** 接口拓展* 接口的繼承*/interface Animal{eat():void }interface Play extends Animal{play():void; }class Dogs implements Play{name:string;constructor(name:string){this.name = name;}eat(){console.log(this.name + '喜歡吃骨頭')}play(){console.log(this.name + '喜歡拆東西')} }var alpha = new Dogs('二哈')alpha.eat(); alpha.play();

總結

以上是生活随笔為你收集整理的03ts中的接口的全部內容，希望文章能夠幫你解決所遇到的問題。

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