前言

今天繼續(xù)typescript的學(xué)習(xí)，開始ts接口部分的學(xué)習(xí)。

接口

接口的理解

首先，我們談?wù)撘幌卢F(xiàn)實(shí)生活中的接口。比如生活中常用的插座接口，有些插頭是三孔插座的，有些是兩孔插座的。插座接口規(guī)定了插頭的數(shù)目，那么我們的電器使用時(shí)就只能是這些數(shù)目的插頭，要么是兩孔，要么是三孔。很少見到有電器設(shè)備使用五孔、十孔的。因?yàn)槟悴环弦?guī)范，沒地方使用。

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

屬性類型接口

屬性類型接口主要是針對對象進(jìn)行約束。

在沒有使用接口之前，我們定義函數(shù)時(shí)，或者使用變量時(shí)都會(huì)對類型進(jìn)行校驗(yàn)。

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

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

}

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

getInfo({name:'hello'}) // 報(bào)錯(cuò) 缺少age屬性

getInfo({name:'hello',age:'24'}) // 報(bào)錯(cuò)age屬性為number

上面我們定義了getInfo函數(shù)。它要求傳入一個(gè)對象，對象中對象中包含有string類型的name屬性和number類型的age屬性。其實(shí)這就是一種規(guī)范，這里規(guī)范了傳入?yún)?shù)的類型。

我們通過接口來實(shí)現(xiàn)這個(gè)規(guī)范：

interface PersonInterface{

name:string; // 這里是分號(hào)；

age:number

}

// 這里的傳給person的是一個(gè)對象

function getInfo(person:personInterface):void{

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

}

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

接口的可選屬性

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

interface PersonInterface{

name:string; // 這里是分號(hào)；

age:number;

salary?:number;

}

接口的只讀屬性

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

interface Point{

readonly x:number;

readonly y:number;

}

function getPoint(point:Point):void{

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

}

let point1:Point = {

x:13,

y:14

}

getPoint(point1)

point1.x = 100; // 報(bào)錯(cuò)。readonly的接口在第一次賦值后就無法進(jìn)行修改了

getPoint(point)

上面定義的Point接口屬性都是只讀的。我們定義了point1實(shí)現(xiàn)了Point接口。可以正常進(jìn)行調(diào)用。但是當(dāng)我們打算修改point1

的值得時(shí)候。就會(huì)出現(xiàn)報(bào)錯(cuò)。因?yàn)閞eadonly的接口在第一次賦值后就無法進(jìn)行修改了。

函數(shù)類型接口

函數(shù)類型接口是對方法傳入的參數(shù)以及返回值進(jìn)行約束。

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

interface BarFunc{

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

}

定義使用函數(shù)接口的函數(shù).其實(shí)之前的類型校驗(yàn)就是一種規(guī)范。通過在變量后面使用:類型進(jìn)行校驗(yàn)。接口也是規(guī)范。

因此通過:接口就相當(dāng)于對接口進(jìn)行校驗(yàn)。

interface BarFunc{

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

}

// 使用函數(shù)類型的接口

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

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

}

bar('張三',24)

可索引類型接口

可索引類型接口是對數(shù)組的約束。對數(shù)組的約束主要是對數(shù)組中元素類型進(jìn)行約束。在ts中定義數(shù)組時(shí)，其實(shí)我們已經(jīng)對數(shù)組元素類型進(jìn)行了約束.

定義數(shù)組：對類型進(jìn)行約束

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

通過接口來實(shí)現(xiàn)對數(shù)組元素的約束:

interface Arr {

[index:number]:string;

}

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

// let arr:Arr = [1,'world']; 報(bào)錯(cuò)。元素類型必須是strig

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

類類型接口

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

interface AnimalClass{

food:string;

ball:string;

eat():void;

play():void;

}

實(shí)現(xiàn)接口的類必須有接口中的屬性和接口中的方法。

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()

總結(jié)

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

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