LayaBox学习小札-03 TypeScript语言的interface


请尊重原作者的工作,转载时请务必注明转载自:www.xionggf.com

1 interface的声明和实例定义

定义一个TypeScript interface的实例的代码如下:

let myObj = {size: 10, label: "Size 10 Object"};

可见,在代码中声明一个interface实例的时候,直接用:

{接口属性1的名字:接口属性1的值,接口属性2的名字:接口属性2的值, ...}

的格式就可以声明一个匿名的interface类型。interface类型的实例可以作为参数传递给函数,如下代码:

// labelledObj是一个匿名interface类型的实例,这个匿名接口类型的实质定义就是
// {size:number,label:string},可见,如果要声明一个匿名接口类型的话,其格式为
// {接口属性1的名字:接口属性1的类型,接口属性2的名字:接口属性2的类型, ...}
function printLabel(labelledObj: { size:number,label: string }) 
{
  console.log(labelledObj.label); // 打印出匿名接口类型的lable属性的值
}

// 定义一个匿名interface类型的实例
let myObj = { size: 10, label: "Size 10 Object" };
// 传递给printLabel函数
printLabel(myObj);

除了用匿名的方式声明interface外,还可以用具名的方式声明interface:

interface LabelledValue // interface的名字为LabelledValue
{
    size:number;
    label:string
}

// 参数的类型使用具名的interface进行声明
function printLabel(labelledObj: LabelledValue) 
{
  console.log(labelledObj.label);
}

// 定义的一个interface实例有三个属性,而且和LabelledValue中的属性定义顺序
let myObj = {font:"yahei",label: "Size 10 Object", size: 10, };
printLabel(myObj);

从代码中可以看出,和C#等语言的interface不一样的是,C#语言的interface是若干个方法的集合。而TypeScript的interface除了可以声明方法的集合之外,还可以声明若干个属性的集合。LabelledValue接口就好比一个名字,用来描述上面例子里的要求。 它代表了有一个label属性且类型为string的实例。只要传入的对象满足上面提到的必要条件,那么它就是被允许的。还有一点值得提的是,类型检查器不会去检查属性的顺序,只要相应的属性存在并且类型也是对的就可以。

2 可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在,或者根本不存在。 可选属性在应用“option bags”模式时很常用,即给函数传入的参数对象中只有部分属性赋值了。可选属性的定义很简单,就是在属性名字后面加一个?号即可:

interface SquareConfig 
{
    color?: string;  // 表示color属性可以有也可以无
    width?: number;  // 表示width属性可以有也可以无
    solid?: boolean: // 表示solid属性可以有也可以无
}

function createSquare(config: SquareConfig): {color: string;area: number;desc:string} 
{
    let newSquare = {color: "white", area: 100, desc: ""};

    if (config.color) { // 如果config存在着color属性的话
        newSquare.color = config.color;
    }

    if (config.width) { // 如果config存在着color属性的话
        newSquare.area = config.width * config.width;
    }

    if (config.solid == false) // 存在着solid属性且其值为false
    {
        newSquare.desc = "I am not solid";
    }
    else if (config.solid == true ) // 存在着solid属性且其值为false
    {
        newSquare.desc = "I am solid";
    }
    else // 不存在solid属性
    {
        newSquare.desc = "I do not know";
    }

    return newSquare;
}

3 只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly来指定只读属性:

interface Point 
{
    readonly x: number;
    readonly y: number;
}

可以通过赋值一个对象字面量来构造一个Point。 赋值后, x和y再也不能被改变了。

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!

TypeScript具有ReadonlyArray类型,它与Array相似,只是把所有可变方法去掉了,因此可以确保数组创建后再也不能被修改:

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!

上面代码的最后一行,可以看到就算把整个ReadonlyArray赋值到一个普通数组也是不可以的。 但是你可以用类型转换重写:

a = ro as number[];

4 readonly vs const

最简单判断该用readonly还是const的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用const,若做为属性则使用readonly

5 额外的属性检查

假设有这样一段代码

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    // ...
}

let mySquare = createSquare({ colour: "red", width: 100 });

注意传入createSquare的参数拼写为colour而不是color。 在JavaScript里,这会默默地失败。

按道理说,SquareConfig的两个属性color和width都是可选的。传递进来的{ colour: "red", width: 100 },虽然没有“color”属性当应该也能通过才对。当一个interface实例,即上述代码中的{ colour: "red", width: 100 },存在有一个某一类型的属性,且这属性的类型在“目标接口”(即上述代码中SquareConfig)中没有一项非可选属性的类型与之相同的话,TypeScript会认为这个代码可能存在错误的。

绕开这些检查非常简单。 最简便的方法是使用类型转型:

let mySquare = createSquare({ width: 100, opacity: 0.5 } as SquareConfig);

然而,最佳的方式是能够添加一个字符串索引签名,前提是你能够确定这个对象可能具有某些做为特殊用途使用的额外属性。 如果SquareConfig带有上面定义的类型的color和width属性,并且还会带有任意数量的其它属性,那么我们可以这样定义它:

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any; // 索引签名
}

还有最后一种跳过这些检查的方式,就是将这个对象赋值给一个另一个变量: 因为 squareOptions不会经过额外属性检查,所以编译器不会报错。

let squareOptions = { colour: "red", width: 100 };
let mySquare = createSquare(squareOptions);

要留意,在像上面一样的简单代码里,可能不应该去绕开这些检查。 对于包含方法和内部状态的复杂对象字面量来讲,你可能需要使用这些技巧,但是大部额外属性检查错误是真正的bug。 就是说你遇到了额外类型检查出的错误,比如“option bags”,应该去审查一下你的类型声明。 在这里,如果支持传入 color或colour属性到createSquare,你应该修改SquareConfig定义来体现出这一点。

6 函数类型

interface能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外,接口也可以描述函数类型。为了使用interface表示方法类型,我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。如下代码:

interface SearchFunc {
  (source: string, subString: string): boolean; // 括号内的是方法参数的签名,冒号后是方法返回值
}

这样定义后,可以像使用其它接口一样使用这个函数类型的接口。下面的代码展示了如何创建一个方法类型的变量,并将一个同类型的函数赋值给这个变量。

let mySearch: SearchFunc; // 定义一个interface实例
// 把一个函数赋值给interface实例mySearch
mySearch = function(source: string, subString: string)
{
    let result = source.search(subString);
    return result > -1;
}

对于函数类型的类型检查来说,函数的参数名不需要与接口里定义的名字相匹配。 只要参数和返回值的类型签名是匹配的即可。如下代码:

let mySearch: SearchFunc;
// 定义函数实例时,函数参数的名字不一定要和interface的函数签名一样,只需要类型匹配即可
mySearch = function(src: string, sub: string): boolean
{
    let result = src.search(sub);
    return result > -1;
}

函数的参数会逐个进行检查,要求对应位置上的参数类型是兼容的。 如果不想指定类型,TypeScript的类型系统会推断出参数类型,因为函数直接赋值给了 SearchFunc类型变量。 函数的返回值类型是通过其返回值推断出来的(此例是 false和true)。 如果让这个函数返回数字或字符串,类型检查器会警告函数的返回值类型与SearchFunc接口中的定义不匹配。

let mySearch: SearchFunc;
mySearch = function(src, sub) { // // 定义函数实例时,函数参数的数据类型可以不用显式地指定。但要注意匹配
    let result = src.search(sub);
    return result > -1;
}

7可索引的类型

与使用接口描述函数类型差不多,我们也可以描述那些能够“通过索引得到”的类型,比如a[10]或ageMap["daniel"]。 可索引类型具有一个 索引签名,它描述了对象索引的类型,还有相应的索引返回值类型。 让我们看一个例子:

interface StringArray
{
    [index: number]: string; // 这个接口的属性是一个字符串数组
}

let myArray: StringArray;
myArray = ["Bob", "Fred"];
let myStr: string = myArray[0];

上面例子里,定义了StringArray接口,它具有索引签名。 这个索引签名表示了当用 number去索引StringArray时会得到string类型的返回值。

共有支持两种索引签名:字符串和数字。可以同时使用两种类型的索引,但是数字索引的返回值必须是字符串索引返回值类型的子类型。 这是因为当使用 number来索引时,JavaScript会将它转换成string然后再去索引对象。 也就是说用 100(一个number)去索引等同于使用"100"(一个string)去索引,因此两者需要保持一致。

class Animal 
{
    name: string;
}

class Dog extends Animal
{
    breed: string;
}

// 错误:使用数值型的字符串索引,有时会得到完全不同的Animal!
// 在interface里,x在两处用到了,一处为number类型另一处为string类型,
interface NotOkay {
    [x: number]: Animal; 
    [x: string]: Dog;
}

最后,可以将索引签名设置为只读,这样就防止了给索引赋值:

interface ReadonlyStringArray 
{
    readonly [index: number]: string;
}
let myArray: ReadonlyStringArray = ["Alice", "Bob"];
myArray[2] = "Mallory"; // error! 不能设置myArray[2],因为索引签名是只读的。

8 class类型实现interface

与C#或Java里接口的基本作用一样,TypeScript也能够用它来明确的强制一个类去符合某种契约。

interface ClockInterface {
    currentTime: Date;
}

// 类Clock实现了interface clockInterface
class Clock implements ClockInterface {
    currentTime: Date; // ClockInterface有这个currentTime属性的定义,故而类也要有此定义
    constructor(h: number, m: number) { }
}

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    // 在interface中描述一个方法setTime,在类里实现它
    setTime(d: Date) {
        this.currentTime = d; 
    }
    constructor(h: number, m: number) { }
}

接口描述了类的公共部分,而不是公共和私有两部分。 它不会帮你检查类是否具有某些私有成员。

9 类静态部分与实例部分的区别

类是具有两个类型的:静态部分的类型和实例的类型。 用构造器签名去定义一个接口并试图定义一个类去实现这个接口时会得到一个错误:

interface ClockConstructor 
{
    new (hour: number, minute: number);
}

class Clock implements ClockConstructor
{
    currentTime: Date;

    // 这里构造器的签名和接口的签名一致,会有问题
    constructor(h: number, m: number) { }
}

这里因为当一个类实现了一个接口时,只对其实例部分进行类型检查。 constructor存在于类的静态部分,所以不在检查的范围内。

因此,我们应该直接操作类的静态部分。 看下面的例子,我们定义了两个接口, ClockConstructor为构造函数所用和ClockInterface为实例方法所用。 为了方便我们定义一个构造函数 createClock,它用传入的类型创建实例。

interface ClockConstructor 
{
    new (hour: number, minute: number): ClockInterface;
}

interface ClockInterface
{
    tick();
}

// 这个createClock函数不作为任何一个类的成员方法,而是一个全局函数
// 这个全局函数要做的工作根据转进来的“类类型”(注意不是类的实例变量)去new一个该类的实例变量出来
function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface
{
    return new ctor(hour, minute);
}

class DigitalClock implements ClockInterface 
{
    constructor(h: number, m: number) { }
    tick() {
        console.log("beep beep");
    }
}

class AnalogClock implements ClockInterface 
{
    constructor(h: number, m: number) { }
    tick() {
        console.log("tick tock");
    }
}

// 这里,把DigitalClock类和CreateClock类当作一个“类类型”传给全局函数createClock去创建
// DigitalClock类的实例对象和AnalogClock类的实例对象
let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

因为createClock的第一个参数是ClockConstructor类类型,在createClock(AnalogClock, 7, 32)里,会检查AnalogClock是否符合构造函数签名。

10 interface继承

和类一样,interface也可以相互继承。 这可以让一个接口里复制成员到另一个接口里,可以更灵活地将接口分割到可重用的模块里。如下:

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;

一个接口可以继承多个接口,创建出多个接口的合成接口。

interface Shape {
    color: string;
}

interface PenStroke {
    penWidth: number;
}

interface Square extends Shape, PenStroke {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

11 混合类型

interface能够描述JavaScript里丰富的类型。 因为JavaScript其动态灵活的特点,有时你会希望一个对象可以同时具有上面提到的多种类型。

一个例子就是,一个对象可以同时做为函数和对象使用,并带有额外的属性。

interface Counter {
    (start: number): string; // 声明了一个匿名的函数属性
    interval: number;
    reset(): void; // 声明了一个具名的函数属性
}

function getCounter(): Counter {
    // 声明了一个匿名的函数变量并赋值到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;

在使用JavaScript第三方库的时候,你可能需要像上面那样去完整地定义类型。

接口继承类
当接口继承了一个类类型时,它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员,但并没有提供具体实现一样。 接口同样会继承到类的private和protected成员。 这意味着当你创建了一个接口继承了一个拥有私有或受保护的成员的类时,这个接口类型只能被这个类或其子类所实现(implement)。

当你有一个庞大的继承结构时这很有用,但要指出的是你的代码只在子类拥有特定属性时起作用。 这个子类除了继承至基类外与基类没有任何关系。 例:

class Control {
private state: any;
}

interface SelectableControl extends Control {
select(): void;
}

class Button extends Control implements SelectableControl {
select() { }
}

class TextBox extends Control {
select() { }
}

// 错误:“Image”类型缺少“state”属性。
class Image implements SelectableControl {
select() { }
}

class Location {

}
在上面的例子里,SelectableControl包含了Control的所有成员,包括私有成员state。 因为 state是私有成员,所以只能够是Control的子类们才能实现SelectableControl接口。 因为只有 Control的子类才能够拥有一个声明于Control的私有成员state,这对私有成员的兼容性是必需的。

在Control类内部,是允许通过SelectableControl的实例来访问私有成员state的。 实际上, SelectableControl接口和拥有select方法的Control类是一样的。 Button和TextBox类是SelectableControl的子类(因为它们都继承自Control并有select方法),但Image和Location类并不是

上一章
下一章
返回首页