Typescript 學習筆記六:介面
阿新 • • 發佈:2018-12-31
目錄:
- Typescript 學習筆記一:介紹、安裝、編譯
- Typescript 學習筆記二:資料型別
- Typescript 學習筆記三:函式
- Typescript 學習筆記四:回憶Es5 中的類
- Typescript 學習筆記五:類
- Typescript 學習筆記六:介面
- Typescript 學習筆記七:泛型
Typescript 中的介面
介面的作用:在面向物件的程式設計中,介面是一種規範的定義,它定義了行為和動作的規範,在程式設計裡面,介面起到一種限制和規範的作用。介面定義了某一批類所需要遵守的規範,介面不關心這些類的內部狀態資料,也不關心這些類裡方法的實現細節,它只規定這批類裡必須提供某些方法,提供這些方法的類就可以滿足實際需要。
Typescrip 中的介面類似於 java,同時還增加了更靈活的介面型別,包括屬性、函式、可索引和類等。
定義標準。
屬性類介面
對 物件屬性 的約束。
ts 中屬性物件傳參,對方法傳入的物件及屬性進行約束。
function printLabel (label: {label:string}):void { console.log(`print label:${label.label}`); } printLabel({label: '標籤'}); // 必須傳入帶有label屬性,且屬性值是字串的物件 // printLabel({label: '標籤', name: 'text'}); // 錯誤 // printLabel({name: '標籤'}); // 錯誤 // printLabel('標籤'); // 錯誤
介面:行為和動作的規範,對批量方法傳入引數進行約束。
用關鍵字interface
定義,用分號結束。約定介面名首字母大寫。
interface FullName { firstName:string; // 注意,用分號結束 secondName:string; } function printName (name:FullName):void { // 必須傳入物件,且帶有屬性:firstName,secondName,且屬性值都是字串 console.log(`${name.firstName} -- ${name.secondName}`); } printName({firstName:'張', secondName: '三'}); // 必須帶有 firstName,secondName // printName({firstName:'張', secondName: '三', name: '張三'}); // 錯誤 只能帶有 firstName,secondName const nameObj = {firstName:'張', secondName: '三', name: '張三', age: 20}; printName(nameObj); // 正確,這種方式,可以傳額外的,但是 firstName、secondName 必須有 printName({ // 引數的順序可以不一樣 secondName: '四', firstName: '李' }) function getName (name:FullName):string { return `${name.firstName} -- ${name.secondName}`; } getName({firstName:'張', secondName: '三'});
介面,可選屬性
interface FullName {
firstName:string;
secondName?:string; // ? 代表可選
}
printName({firstName:'張'});
函式型別介面
對方法傳入的引數以及返回值進行約束,批量約束。
interface Encrytp {
(key:string, val:string):string;
}
let md5:Encrytp = function (key:string, val:string):string {
// 具體加密省略
return key + val;
}
console.log(md5('name', 'Jane')); // nameJane
let hash:Encrytp = function (key:string, val:string):string {
// 具體加密省略
return key + ' ---- ' + val;
}
console.log(hash('name', 'Jane')); // name ---- Jane
可索引介面
對陣列、物件的約束(不常用)
ts 中陣列的兩種定義方式:
let arr1:Array<number> = [1, 2];
let arr2:string[] = ['12', '23'];
ts 中可索引介面,對陣列的約束
interface userArr {
[index:number]:string;
}
let arr3:userArr = ['a', 'b'];
console.log(arr3[0]);
// let arr4:userArr = [12, 34]; // 錯誤
ts 中可索引介面,對物件的約束
interface userObj {
[index:string]:string;
}
let obj1:userObj = {name: 'Jane'};
// let obj2:userObj = {age: 12}; // 錯誤
類型別介面
對類的約束,和抽象類有點相似。類型別介面實現用關鍵字implements
interface Animal {
name:string;
eat (food:string):void;
}
class Dog implements Animal { // 類型別介面實現用關鍵字 implements
name:string;
constructor (name:string) {
this.name = name;
}
eat (food:string):void {
console.log(`${this.name}喜歡吃${food}`);
}
}
let d = new Dog('小黑');
d.eat('骨頭'); // 小黑喜歡吃骨頭
class Cat implements Animal {
name:string;
constructor (name:string) {
this.name = name;
}
eat (food:string):void {
console.log(`${this.name}喜歡吃${food}`);
}
}
let c = new Cat('小白');
c.eat('老鼠'); // 小白喜歡吃老鼠
介面擴充套件
介面可以繼承介面
interface Animal {
eat ():void;
}
interface Person extends Animal {
work ():void;
}
class Web implements Person {
name:string;
constructor (name:string) {
this.name = name;
}
// 介面 Animal 中的方法必須實現
eat ():void {
console.log(`${this.name}喜歡吃甜點`);
}
// 介面 Person 中的方法必須實現
work ():void {
console.log(`${this.name}在運動`);
}
}
let w = new Web('小李');
w.eat();
w.work();
繼承類並實現介面
interface Animal {
eat ():void;
}
interface Person extends Animal {
work ():void;
}
class Programmer {
name:string;
constructor (name:string) {
this.name = name;
}
coding () {
console.log(`${this.name}在寫程式碼`);
}
}
class Web extends Programmer implements Person {
constructor (name:string) {
super(name);
}
// 介面 Animal 中的方法必須實現
eat ():void {
console.log(`${this.name}喜歡吃甜點`);
}
// 介面 Person 中的方法必須實現
work ():void {
console.log(`${this.name}在運動`);
}
}
let w = new Web('小李');
w.eat();
w.work();
w.coding(); // 小李在寫程式碼