typescript 接口

日期：2019 年 8 月 29 日

typescript 接口

介绍

TypeScript的核心原则之一是对值所具有的结构进行类型检查。 它有时被称做“鸭式辨型法”或“结构性子类型化”， 在TypeScript里，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约

接口初探

通过一个简单示例来观察接口是如何工作的：

function printLabel( labelledObj： { label: string } ){
    console.log(labelledObj.label);
}

let myObj = { size: 10, label: 'hahah' };
printLabel(myObj);    //  'hahah'

类型检查器会查看printLabel的调用。 printLabel有一个参数，并要求这个对象参数有一个名为label类型为string的属性。 需要注意的是，我们传入的对象参数实际上会包含很多属性，但是编译器只会检查那些必需的属性是否存在，并且其类型是否匹配，然而，有些时候TypeScript却并不会这么宽松，我们下面会稍做讲解。

下面我们重写上面的例子，这次使用接口来描述：必须包含一个label属性且类型为string：

interface LabelledValue{
    label: string;
}

function printLabel( labelledObj: LabelledValue ){
    console.log(labelledObj.label);
}

let myObj = { size: 10, label: 'hahah' };
printLabel(myObj);

LabelledValue接口就好比一个名字，用来描述上面例子里的要求。 它代表了有一个 label属性且类型为string的对象。

可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 可选属性在应用“option bags”模式时很常用，即给函数传入的参数对象中只有部分属性赋值了。

下面是应用了“option bags”的例子：

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

function createSquare( config: SquareConfig ): { color: string; area: number }{
    let newSquare = { color: 'black', area: 100 };
    if(config.color){
        newSquare.color = config.color;
    }
    if(config.width){
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({ color: 'green' });
console.log(mySquare);  // { color: 'green', area: 100 }

带有可选属性的接口与普通的接口定义差不多，只是在可选属性名字定义的后面加一个?符号


可选属性的好处之一是可以对可能存在的属性进行预定义，好处之二是可以捕获引用了不存在的属性时的错误。 比如，我们故意将 createSquare里的color属性名拼错，就会得到一个错误提示：

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

function createSquare(config: SquareConfig): { color: string; area: number } {
  let newSquare = {color: "white", area: 100};
  if (config.clor) {
    // Error: Property 'clor' does not exist on type 'SquareConfig'
    newSquare.color = config.clor;
  }
  if (config.width) {
    newSquare.area = config.width * config.width;
  }
  return newSquare;
}

let mySquare = createSquare({color: "black"});

只读属性

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

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

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

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

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

// 上面代码的最后一行，可以看到就算把整个ReadonlyArray赋值到一个普通数组也是不可以
// 的，但是你可以用类型断言重写

list = ro as number[];
readonly vs const

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

额外的属性检查

我们已经知道可选属性了，下面我们依旧拿 createSquare 来举例：

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

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

let myConfig = { coulor: 'hahah', width: 20, };
let mySquare = createSquare(myConfig);  // ok

上面这种写法不会报错，但是我们换下面以种写法：

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

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

// but 'coulor' does not exist in type 'SquareConfig'. Did you mean to write 'color'?
let mySquare = createSquare({ coulor: 'hahah', width: 20, });  // error

你可能会争辩这个程序已经正确地类型化了，因为width属性是兼容的，不存在color属性，而且额外的colour属性是无意义的。然而，TypeScript会认为这段代码可能存在bug

对象字面量会被特殊对待而且会经过 额外属性检查，当将它们赋值给变量或作为参数传递的时候，如果一个对象字面量存在任何“目标类型”不包含的属性时，你会得到一个错误

如果你想绕过这些检查，有下面三种方法：

// 方法一  最简便的方法是使用类型断言

let mySquare = createSquare({ coulor: 'hahah', width: 20 } as SquareConfig);

// 方法二  是将这个对象赋值给一个另一个变量： 因为 squareOptions不会经过额外属性检
// 查，所以编译器不会报错

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

// 方法三  最佳的方式是能够添加一个字符串索引签名

interface SquareConfig{
    color?: string;
    width?: number;
    [propName: string]: any;
}

函数类型

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型

interface SearchFunc{
    ( source: string, subString: string): boolean;
}

这样定义后，我们可以像使用其它接口一样使用这个函数类型的接口。 下例展示了如何创建一个函数类型的变量，并将一个同类型的函数赋值给这个变量

let mySearch: SearchFunc;
mySrach = 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 reuslt > -1;
}

可索引的类型

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

interface StringArray{
    [index: number]: string;
}

let myArray: StringArray;
myArray = [ 'hello', 'world'];

let myStr: string = myArray[0];

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

class Animal{
    name: string;
}

class Dog extends Annimal{
    breed: string;
}

interface NotOk{  // 这种写法不 ok
    [x: number]: Animal;
    [x: string]: Dog;
}

interface Ok{  // 这种很 ok
    [x: number]: Dog;
    [x: string]: Animal;
}

你可以将索引签名设置为只读，这样就防止了给索引赋值：

interface ReadonlyStringArray{
    readonly [index: number]: string;
}

let myArray: ReadonlyStringArray'
myArray = ['hello', 'world'];
myArray[0] = 'haha';  // error

类类型

实现接口

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

interface ClockInterface{
    currentTime: Date;
}

class Clock implements ClockInterface{
    currentTime: Date;
    constructor( h: number, m: number){ };
}

你也可以在接口中描述一个方法，在类里实现它，如同下面的setTime方法一样：

interface ClockInterface{
    currentTime: date;
    setTime(time: Date);
}

class Clock implements ClockInterface{
    currentTime: Date;
    setTime(time: Date){
        this.currentTime = time;
    }
    constructor(h: number, m: number){ };
}

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

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

当你操作类和接口的时候，你要知道类是具有两个类型的：静态部分的类型和实例的类型。 你会注意到，当你用构造器签名去定义一个接口并试图定义一个类去实现这个接口时会得到一个错误：


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

// Class 'Clock' incorrectly implements interface 'ClockConstructor'.Type 'Clock' 
// provides no match for the signature 'new (hour: number, minute: number): any'.

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();
}

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");
    }
}

let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(Analog, 13, 14);

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

继承接口

和类一样，接口也可以相互继承，这让我们能够从一个接口里复制成员到另一个接口里，可以更灵活地将接口分割到可重用的模块里

interface Shape{
    color: string;
}

interface Square extends Shape{
    length: number;
}

let mySquare = <Square>{};
mySquare.color = 'green';
mySquare.length = 20;

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

interface Shape{
    color: string;
}

interface PenStroke{
    penWidth: number;
}

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

let mySquare = <Square>{};
mySquare.color = 'blue';
mySquare.penWidth = 0.5;
mySquare.length = 10;

混合类型

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

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

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

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

let c = myCounter();
c(10);
c.interval = 233;
c.reset();

接口继承类

当接口继承了一个类类型时，它会继承类的成员但不包括其实现。 就好像接口声明了所有类中存在的成员，但并没有提供具体实现一样。 接口同样会继承到类的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类并不是这样的

总结与计划

今天主要学习了 typescript 接口部分的知识，就我的理解来看，接口实际上就是可以让我们自定义某种数据类型的规范，它是在基础数据类型的基础之上做的一个更加复杂的，可人为的配置的数据规范。

明天要学习的内容是 typescript 的类，是紧接着今天的内容继续的，所以温习一下今天的内容差不多就可以开始看明天的东西了，加油 (ヾ(◍°∇°◍)ﾉﾞ) ！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,542评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,596评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,021评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,682评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,792评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,985评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,107评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,845评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,299评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,441评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,072评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2赞 350