接口:
-
屬性接口:對傳入的參數進行約束
interface FullName { // 就是傳入對象的約束 firstName: string; secondName: string; } function printName(name: FullName): void { console.log(name.firstName + '---' + name.secondName) } // 調用的時候有兩種寫法: // 第一種:直接寫入對象,則對象只能包含接口定義的屬性,并且屬性要遵循屬性定義的類型。否則會報錯 printName({ age: 20, // 報紅線 firstName: 'zhang', secondName: 'san' }) // 第二種:把對象寫在外部,則對象只需包含接口定義的屬性,并且屬性要遵循屬性定義的類型。 let obj = { age: 20, firstName: 'zhang', secondName: 'san' } printName(obj)
-
可選屬性
interface FullName { firstName: string; secondName?: string; } function getName(name: FullName): void { console.log(name.firstName) } getName({ firstName: 'zhang' }) // 例子 -- 編寫ajax請求參數接口 interface Config { type: string; url: string; data?: string; dataType: string } function ajax(config: Config) { let xhr = new XMLHttpRequest(); xhr.open(config.type, config.url, true); // true表示異步 xhr.send(config.data); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log('success'); if (config.dataType === 'json') { console.log(JSON.parse(xhr.responseTest)) } else { console.log(xhr.responseText) } } } } ajax({ type: 'get', data: 'name=zhangsan', url: 'www.???.com/api', dataType: 'json' })
-
函數類型接口:對方法傳入的參數以及返回值進行約束。 批量約束
// 加密的函數類型接口 interface encrypt { (key: string, value: string): string; // 不用寫function, 直接寫參數 } let md5: encrypt = function(key: string, value: string): string { // 模擬操作 return key + 'md5' + value; } md5('name', 'zhangsan') // namemd5zhangsan let sh1: encrypt = function(key: string, value: string): string { // 模擬操作 return key + 'sh1' + value; } sh1('name', 'lisi') // namesh1lisi
-
可索引接口:對數組、對象的約束
// 第一種寫法 對數組的約束 interface UserArr { [index: number]: string } let userarr: UserArr = ['aaa', 'bbb'] // 第二種寫法 對對象的約束 interface UserObj { [index: string]: string } let userobj: UserObj = {name: 'zhangsan'}
-
類類型接口: 對類的約束,與抽象類相似
interface Animal { name: string; eat(str: string): void; } class Dog implements Animal { name: string constructor(name: string) { this.name = name } eat() { console.log(this.name + ' eat meat') } } let d = new Dog('wangcai') d.eat(); // wangcai eat meat
-
接口擴展: 接口可以繼承接口 , 類繼承和接口繼承可以結合使用
interface Animal { eat(): void } interface Person extends Animal { work(): void } class Programmer { public name: string; constructor(name: string) { this.name = name } coding(code: string) { console.log(this.name + code) } } class Xiaoming extends Programmer implements Person { constructor(name: string) { super(name) } eat() { // 由于Xiaoming 類接口繼承了 Person類接口,Person類接口又繼承了 Animal類接口,所以eat和work方法必須定義 console.log(this.name + 'like eat nuddles') } work() { console.log(this.name + 'like coding') } } let p = new Xiaoming('小明') p.eat(); // 小明like eat nuddles p.coding('寫ts代碼'); // 小明寫ts代碼
持續更新!