TypeScript系列学习笔记-接口（interface）

接口简介：

原则：对值所具有的结构进行类型检查（核心原则之一）。它有时被称做“鸭式辨型法”或“结构性子类型化；

作用：为这些类型命名和为你的代码或第三方代码定义契约。

语法：声明关键字，interface ，代码实例如下：声明一个接口 IPerson，定义属性字段：name,age和可选属性字段：sex，同时定义一个SayHi()方法，在定义一个Student类实现（关键字：implements）IPerson接口。

隐式接口：

//声明接口
interface Count{
    num1: number;
    num2: number;
}
function Add(para:Count) { 
    return para.num1 + para.num2;
}
//对比，para参数为接口类型（隐式接口）
function Add2(para:{
    num1: number;
    num2: number;
}) { 
    return para.num1 + para.num2;
}

当接口中只包含一个方法时，接口可以当作方法类型实现：

//接口声明
interface Count{
    (num1: number, num2: number): number; //匿名函数类型，形参number，返回值number
}
//接口实现
let add: Count = function (a,b) {
    return a + b;
}

使用<接口类型>｛｝隐式声明一个匿名对象实现接口：

//声明接口  
interface Count{  
    num1: number;  
    num2: number;  
} 
//隐式声明一个匿名对象，实现接口
let myCount = <Count>{};
myCount.num1 = 10;
myCount.num2 = 20;

接口支持多继承（关键字：extends），接口之间也可以相互继承，创建出多个接口的合成接口；

//声明接口
interface Shape {
    color: string;
}
//接口继承接口
interface Square extends Shape {
    sideLength: number;
}
//隐式匿名对象实现接口Square
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;

//声明接口
interface Shape {
    color: string;
}
//声明接口
interface PenStroke {
    penWidth: number;
}
//声明接口，继承多个接口
interface Square extends Shape, PenStroke {
    sideLength: number;
}
//隐式匿名对象实现接口Square
let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

混合类型：一个对象可以同时做为函数和对象使用，并带有额外的属性。

interface Counter {
    (start: number): string;
    interval: number;
    reset(): void;
}

function getCounter(): Counter {
    let counter = <Counter>function (start: number) { };
    counter.interval = 123;
    counter.reset = function () { };
    return counter;
}

let c = getCounter();
c(10);
c.reset();
c.interval = 5.0;

关于readonly vsconst：当声明变量为常量时使用 const，当声明只读属性时使用 readonly。

总结：

1.在接口中可以包含属性、方法；

2.使用关键字 interface 定义接口；

3.属性可以使用符号"?"标识为可空类型；

4.TS支持隐式接口；

5.接口支持多继承；

6.可以使用符号"<接口类型>｛｝"来隐式声明匿名对象实现接口；

TypeScript系列学习笔记-接口（interface）

猜你喜欢