1. 程式人生 > >TypeScript 入門(四)-介面

TypeScript 入門(四)-介面

一、介面型別
TypeScript的介面五種型別屬性介面、方法介面、索引介面、類介面,
ts介面的主要功能是進行約束。
1、屬性介面
主要功能對傳入引數進行約束
interface User {
    userId:string;
    userName:string;
    age?:number;
}
var find = function(user:User):void {
        console.log(user);
};

find({userId:"sss","userName":"imya"});
傳入的引數必須包含userId,userName,
如果非必須傳入的引數,可以通過?標識

2、方法介面
主要功能對傳入引數和返回引數進行約束
interface countById {
    (userId:string):number;
}
var countByUserId:countById = function(userId:string):number{
    return 1;
}
countByUserId('1');

3、索引介面
主要功能對陣列和物件進行約束
// 對陣列約束
interface ArrayInterface{
    [index:number]:string
}
var arr12:ArrayInterface = ["1","2"];
// 對物件約束
interface ObjectInterface{
    [index:string]:string
}
var arr13:ObjectInterface = {name:"111"};

4、類介面
主要功能對類的屬性和方法進行約束
類介面實現通過關鍵字implements
interface Person {
    id:string;
    name:string;
    age?:number;
}
interface PersonService{
    findById(userId:string):Person;
}
class PersonServiceImpl implements PersonService {
    findById(userId:string):Person{
       return {"id":"122","name":"zhang","age":123};
    }
}


二、介面的擴充套件
一個介面可以通過繼承另一個介面達到擴充套件的功能
實現通過關鍵字extends完成

interface Animal1 {
    print1():void;
}
interface Animal2 {
    print2():void;
}
interface Person1 extends Animal1,Animal2{
    name:string;
    display():void;
}
class Women implements Person1 {
    name:string;
    constructor(name:string){
        this.name = name;
    }
    display():void{
    }
    print1():void {
    }
    print2():void {
    }
}