TypeScript之接口类型

时间 2019-11-06

标签 typescript 接口类型繁體版

原文原文链接

Interfaces

做为TypeScript中的核心特点之一，可以让类型检查帮助咱们知道一个对象应该有什么，相比咱们在编写JavaScript的时候常常遇到函数须要传递参数，可能在编写的时候知道这个对象可以提供哪些值，可是之后维护的时候负责看这段代码的人都没法确认这个对象还有其余的哪些值，就须要翻阅源码看看调用这个函数的代码。java

第一个接口

在开始正题以前咱们先来一个简单的例子。后端

--TypeScript数组

1 function printLabel(labelObject: { label: string }) {
2     console.log(labelObject.label);
3 }
4 
5 var myobj = { size: 10, label: "Size 10 Object" };
6 printLabel(myobj);

--JavaScript前后端分离

function printLabel(labelObject) {
    console.log(labelObject.label);
}

var myobj = { size: 10, label: "Size 10 Object" };
printLabel(myobj);

类型检查会在咱们调用printLabel的时候检查传进去的参数，确保该参数中存在一个名字为label而且类型为string的属性，固然咱们能够看到这个参数的值远远比咱们函数要求的多，但这并不会形成影响，经过最终的源码咱们也能够看到最终生成的js代码并无比原来多出多少，可是却可以为咱们提供强大的类型检查。ide

下面咱们能够引入正题了，咱们将使用接口的方式实现上面的例子。函数

--TypeScript网站

 1 interface LabelledValue {
 2     label: string
 3 }
 4 
 5 function printLabel(labelObject: LabelledValue) {
 6     console.log(labelObject.label);
 7 }
 8 
 9 var myobj = { size: 10, label: "Size 10 Object" };
10 printLabel(myobj);

--JavaScriptthis

同上spa

这里咱们看到若是利用接口可以更便于管理，更主要的是接口中除了能够定义属性也能够定义函数等，对于中大型项目，特别是先后端分离的网站来讲对于之后的维护和迭代能顾节省时间成本并提升质量。prototype

可选属性

可是因为历史缘由，TypeScript并不能孤立存在，仍是须要兼容其余库，那么就致使咱们的接口还要考虑另外一种状况就是可选值，好比下面这个例子。

--TypeScript

 1 interface SquareConfig {
 2     color?: string;
 3     width?: number;
 4 }
 5 
 6 function createSquare(config: SquareConfig): { color: string; area: number } {
 7     var newsquare = { color: "white", area: 100 };
 8     if (config.color) {
 9         newsquare.color = config.color;
10     }
11     if (config.width) {
12         newsquare.area = config.width * config.width;
13     }
14     return newsquare;
15 }
16 
17 var mySquare = createSquare({ color: "black" });

--JavaScript

 1 function createSquare(config) {
 2     var newsquare = { color: "white", area: 100 };
 3     if (config.color) {
 4         newsquare.color = config.color;
 5     }
 6     if (config.width) {
 7         newsquare.area = config.width * config.width;
 8     }
 9     return newsquare;
10 }
11 
12 var mySquare = createSquare({ color: "black" });

经过接口咱们知道可选属性就是在属性名称的后面加上问号就能够了，可是开发的时候要注意就是要经过if判断下该值是否存在。

函数类型

玩转了属性，下面咱们开始在接口中放入函数，下面咱们先放一个函数。

--TypeScript

 1 interface SearchFunc {
 2     (source: string, substring: string): boolean;
 3 }
 4 
 5 var mySearch: SearchFunc;
 6 mySearch = function (source: string, substring: string) {
 7     var result = source.search(substring);
 8     if (result == -1) {
 9         return false;
10     } else {
11         return true;
12     }
13 };

--JavaScript

var mySearch;
mySearch = function (source, substring) {
    var result = source.search(substring);
    if (result == -1) {
        return false;
    } else {
        return true;
    }
};

你们确定会很奇怪，下面为何定义了这个接口的变量可是赋的确是一个函数,若是你们有C#和java语言的基础会发现SearchFunc中的函数是没有函数名的，因此mySearch的类型就是一个函数，只是会进行类型检查，你是不能赋其余函数签名不同的函数给他的。

数组类型

接口除了能够描述函数类型也能够描述数组类型，数组类型拥有一个“index”类型，是用来索引数组的，利用这个咱们就能够实现除了数组之外还可以实现字典类型。

--TypeScript

1 interface StringArray {
2     [index: number]: string;
3 }
4 
5 var myArray: StringArray;
6 myArray = ["Bob", "Fred"];

--JavaScript

1 var myArray;
2 myArray = ["Bob", "Fred"];

Index类型可以支持两种类型：string和number，因此咱们可以实现字典类型，好比下面这种类型。

--TypeScript

1 interface StringArray {
2     [index: string]: string;
3 }
4 
5 var myArray: StringArray;
6 myArray = {
7     "dede": "dede",
8     "ete":"dede"
9 };

--JavaScript

1 var myArray;
2 myArray = {
3     "dede": "dede",
4     "ete": "dede"
5 };

类类型

像C#和Java语言中同样，接口最基础的做用就是让类去实现接口，因此这也是TypeScript语言的特色之一。好比下面的例子咱们将实现一个带有一个属性的接口。

--TypeScript

1 interface ClockInterface {
2     currentTime: Date
3 }
4 
5 class Clock implements ClockInterface {
6     currentTime: Date;
7     constructor(h: number, m: number) { }
8 }

--JavaScript

1 var Clock = (function () {
2     function Clock(h, m) {
3     }
4     return Clock;
5 })();

这里咱们能够看到最终的JS中并无将currentTime做为变量加入到this中，由于在这个类中咱们并无使用到这个值，因此这个变量只会在咱们正式的使用的时候添加到这个类中，若是不用这个类就等同于没有这个变量。

上面咱们仅仅只是在接口中写了一个属性，下面咱们在接口中增长一个方法。

--TypeScript

 1 interface ClockInterface {
 2     currentTime: Date;
 3     setTime(d: Date);
 4 }
 5 
 6 class Clock implements ClockInterface {
 7     currentTime: Date;
 8     setTime(d: Date) {
 9         this.currentTime = d;
10     }
11     constructor(h: number, m: number) { }
12 }

--JavaScript

1 var Clock = (function () {
2     function Clock(h, m) {
3     }
4     Clock.prototype.setTime = function (d) {
5         this.currentTime = d;
6     };
7     return Clock;
8 })();

静态类和实例类的区别

当咱们使用类和接口，须要知道类是存在静态和实例的，这也就意味着若是你的接口若是存在构造方法而且须要一个类去实现，那么你将会看到错误信息，好比下面这段。

--TypeScript

1 interface ClockInterface {
2     new (hour: number, minute: number);
3 }
4 
5 class Clock implements ClockInterface {
6     currentTime: Date;
7     constructor(h: number, m: number) { }
8 }

这是由于当一个类实现一个接口的时候只有实例部分是被容许的，而构造方法偏偏属于静态，并不包含在内。

固然含有构造方法的接口是有其用途的，好比下面这样的用法。

--TypeScript

 1 interface ClockInterface {
 2     new (hour: number, minute: number);
 3 }
 4 
 5 class Clock {
 6     currentTime: Date;
 7     constructor(h: number, m: number) { }
 8 }
 9 
10 var cs: ClockInterface = Clock;
11 var newClock = new cs(2, 3);

--JavaScript

1 var Clock = (function () {
2     function Clock(h, m) {
3     }
4     return Clock;
5 })();
6 
7 var cs = Clock;
8 var newClock = new cs(2, 3);

扩展接口

这个特性跟类能够继承其余类同样，接口也能够扩展其余的接口，这将会致使被继承的接口中的全部的内容都会被复制到另外一个接口中。下面咱们来看一个简单的例子。

--TypeScript

 1 interface Shape {
 2     color: string;
 3 }
 4 
 5 interface Square extends Shape {
 6     sideLength: number;
 7 }
 8 
 9 var square = <Square>{};
10 square.color = "blue";
11 square.sideLength = 10;

--JavaScript

1 var square = {};
2 square.color = "blue";
3 square.sideLength = 10;

一个接口不只仅只能扩展一个接口，是能够扩展多个接口的。好比下面这样。

--TypeScript

 1 interface Shape {
 2     color: string;
 3 }
 4 
 5 interface PenStroke {
 6     penWidth: number;
 7 }
 8 
 9 interface Square extends Shape, PenStroke {
10     sideLength: number;
11 }
12 
13 var square = <Square>{};
14 square.color = "blue";
15 square.sideLength = 10;
16 square.penWidth = 5.0;

--JavaScript

1 var square = {};
2 square.color = "blue";
3 square.sideLength = 10;
4 square.penWidth = 5.0;

混合类型

咱们再次以前提到过，接口能够描述不少真实世界中JavaScript的类型，由于JavaScript的动态和天生的灵活性，你或许会遇到一些须要多种复合的类型。

好比下面的实例，这个对象将扮演着函数和一个对象。

--TypeScript

 1 interface Counter {
 2     (start: number): string;
 3     interval: number;
 4     reset(): void;
 5 }
 6 
 7 var c: Counter;
 8 c(10);
 9 c.reset();
10 c.interval = 5.0;

--JavaScript

1 var c;
2 c(10);
3 c.reset();
4 c.interval = 5.0;

对于须要使用第三方JavaScript库的状况下，咱们就会须要使用到上面介绍的知识。固然如今不少经常使用的JavaScript库都已经存在了，咱们能够经过nuget获取到。