前言

今天繼續typescript的學習，開始ts接口部分的學習。

接口

接口的理解

首先，我們談論一下現實生活中的接口。比如生活中常用的插座接口，有些插頭是三孔插座的，有些是兩孔插座的。插座接口規定了插頭的數目，那么我們的電器使用時就只能是這些數目的插頭，要么是兩孔，要么是三孔。很少見到有電器設備使用五孔、十孔的。因為你不符合規范，沒地方使用。

同理，在編程中接口也是用來定義規范的。我們之前介紹的抽象類，也是一種規范，只不過它是對類的一種規范，它要求所有的子類都必須實現抽象類中的抽象方法。而接口不僅僅是類的規范，它是屬性、類、方法等的規范。

屬性類型接口

屬性類型接口主要是針對對象進行約束。

在沒有使用接口之前，我們定義函數時，或者使用變量時都會對類型進行校驗。

function getInfo(person:{name:string,age:number}):void{

console.log(`姓名:${person.name},年齡是${person.age}`)

}

getInfo({name:'hello',age:24}) // 需要傳入一個對象，對象中包含有string類型的name和number類型的age

getInfo({name:'hello'}) // 報錯 缺少age屬性

getInfo({name:'hello',age:'24'}) // 報錯age屬性為number

上面我們定義了getInfo函數。它要求傳入一個對象，對象中對象中包含有string類型的name屬性和number類型的age屬性。其實這就是一種規范，這里規范了傳入參數的類型。

我們通過接口來實現這個規范：

interface PersonInterface{

name:string; // 這里是分號；

age:number

}

// 這里的傳給person的是一個對象

function getInfo(person:personInterface):void{

console.log(`姓名:${person.name},年齡是${person.age}`)

}

getInfo({name:'劉亦菲',age:30})

接口的可選屬性

接口里的屬性不全都是必需的。 有些是只在某些條件下存在，或者根本不存在。 可選屬性通常應用于函數的可選參數。

interface PersonInterface{

name:string; // 這里是分號；

age:number;

salary?:number;

}

接口的只讀屬性

一些對象屬性只能在對象剛剛創建的時候修改其值。 你可以在屬性名前用 readonly來指定只讀屬性:

interface Point{

readonly x:number;

readonly y:number;

}

function getPoint(point:Point):void{

console.log(`坐標x:${point.x},坐標y:${point.y}`)

}

let point1:Point = {

x:13,

y:14

}

getPoint(point1)

point1.x = 100; // 報錯。readonly的接口在第一次賦值后就無法進行修改了

getPoint(point)

上面定義的Point接口屬性都是只讀的。我們定義了point1實現了Point接口。可以正常進行調用。但是當我們打算修改point1

的值得時候。就會出現報錯。因為readonly的接口在第一次賦值后就無法進行修改了。

函數類型接口

函數類型接口是對方法傳入的參數以及返回值進行約束。

為了使用接口表示函數類型，我們需要給接口定義一個調用簽名。 它就像是一個只有參數列表和返回值類型的函數定義,不需要function關鍵字，也不需要函數體。參數列表里的每個參數都需要名字和類型。

interface BarFunc{

(name:string,age:number):string;

}

定義使用函數接口的函數.其實之前的類型校驗就是一種規范。通過在變量后面使用:類型進行校驗。接口也是規范。

因此通過:接口就相當于對接口進行校驗。

interface BarFunc{

(name:string,age:number):string;

}

// 使用函數類型的接口

let bar:BarFunc = function(name:string,age:number):string{

return `姓名:${name},年齡:${age}`

}

bar('張三',24)

可索引類型接口

可索引類型接口是對數組的約束。對數組的約束主要是對數組中元素類型進行約束。在ts中定義數組時，其實我們已經對數組元素類型進行了約束.

定義數組：對類型進行約束

let myArr:string[] = ['hello','world'];

通過接口來實現對數組元素的約束:

interface Arr {

[index:number]:string;

}

let arr:Arr = ['hello','world']

// let arr:Arr = [1,'world']; 報錯。元素類型必須是strig

上面Arr接口表示索引必須是number類型。數組中元素必須是string類型。

類類型接口

類類型接口是對類的約束。和抽象類有點相似。抽象類是子類的基類，定義了子類必須實現的抽象方法。但是類接口不是針對子類，而是所有的類。類接口中定義了所有的類必須實現的屬性和方法。

interface AnimalClass{

food:string;

ball:string;

eat():void;

play():void;

}

實現接口的類必須有接口中的屬性和接口中的方法。

class MyDog implements AnimalClass{

food:string;

ball:string;

constructor(food:string,ball:string){

this.food = food;

this.ball = ball;

}

eat():void{

console.log('狗吃' + this.food)

}

play():void{

console.log('狗玩' + this.ball)

}

}

let myDog = new MyDog('骨頭','籃球')

myDog.eat()

myDog.play()

總結

以上是生活随笔為你收集整理的typescript 接口 java_Typescript基础(4)——接口的全部內容，希望文章能夠幫你解決所遇到的問題。

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