TS - typescript 介面(interface)
阿新 • • 發佈:2021-01-21
技術標籤:Typescripttypescriptts介面interface
介面
TypeScript 的核心原則之一是對值所具有的結構進行型別檢查。我們使用介面(Interfaces)來定義物件的型別。
介面是物件的狀態(屬性)和行為(方法)的抽象(描述)
介面型別的物件: 多了或者少了屬性是不允許的
可選屬性: ?
只讀屬性: readonly
// 定義人的介面
interface IPerson {
readonly id: number // 只讀屬性:一旦賦值後再也不能被改變了。
name?: string // 可選屬性
age: number
sex: string
}
const person1: IPerson = {
id: 1,
name: 'tom',
age: 20,
sex: '男'
}
const person2: IPerson = {
id: 2,
// name: 'jilyz',
age: 18,
sex: '男'
}
// person1.id = 3 // error
可選屬性的好處:
- 對可能存在的屬性進行預定義;
- 捕獲引用了不存在的屬性時的錯誤.
函式型別
介面能夠描述 JavaScript 中物件擁有的各種各樣的外形。 除了描述帶有屬性的普通物件外,介面也可以描述
函式型別
。
為了使用介面表示函式型別,我們需要給介面定義一個呼叫簽名。它就像是一個只有引數列表和返回值型別的函式定義。引數列表裡的每個引數都需要名字和型別。
interface SearchFunc {
// 定義一個呼叫簽名: 像是一個只有引數列表和返回值型別的函式定義
(source: string, subString: string): boolean
}
// 建立一個函式型別的變數,並將一個同類型的函式賦值給這個變數。
const mySearch: SearchFunc = function (source: string, sub: string): boolean {
return source.search(sub) > -1 // search 返回子串的索引
}
console.log(mySearch ('abcd', 'bc')) // true
類型別
類實現介面。
- 一個類可以實現多個介面
- 一個介面可以繼承多個介面
interface Alarm {
alert(): any;
}
interface Light {
lightOn(): void;
lightOff(): void;
}
class Car implements Alarm {
alert() {
console.log('Car alert');
return `I'm car alert`
}
}
class Car2 implements Alarm, Light {
alert() {
console.log('Car alert');
}
lightOn() {
console.log('Car light on');
}
lightOff() {
console.log('Car light off');
}
}
// let c1 = new Car()
console.log(new Car().alert());
console.log(new Car2().alert());
new Car2().lightOff()
// 介面繼承介面:從一個接口裡複製成員到另一個接口裡,可以更靈活地將介面分割到可重用的模組裡。
interface LightableAlarm extends Alarm, Light { }
class Lta implements LightableAlarm{ // 必須實現介面所有方法
alert(){}
lightOff(){}
lightOn(){}
}