Interfaces

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

第一个接口

在开始正题之前我们先来一个简单的例子。

--TypeScript

 function printLabel(labelObject: { label: string }) {
console.log(labelObject.label);
} var myobj = { size: 10, label: "Size 10 Object" };
printLabel(myobj);

--JavaScript

function printLabel(labelObject) {
console.log(labelObject.label);
} var myobj = { size: 10, label: "Size 10 Object" };
printLabel(myobj);

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

下面我们可以引入正题了,我们将使用接口的方式实现上面的例子。

--TypeScript

 interface LabelledValue {
label: string
} function printLabel(labelObject: LabelledValue) {
console.log(labelObject.label);
} var myobj = { size: 10, label: "Size 10 Object" };
printLabel(myobj);

--JavaScript

同上

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

可选属性

但是由于历史原因,TypeScript并不能孤立存在,还是需要兼容其他库,那么就导致我们的接口还要考虑另一种情况就是可选值,比如下面这个例子。

--TypeScript

 interface SquareConfig {
color?: string;
width?: number;
} function createSquare(config: SquareConfig): { color: string; area: number } {
var newsquare = { color: "white", area: 100 };
if (config.color) {
newsquare.color = config.color;
}
if (config.width) {
newsquare.area = config.width * config.width;
}
return newsquare;
} var mySquare = createSquare({ color: "black" });

--JavaScript

 function createSquare(config) {
var newsquare = { color: "white", area: 100 };
if (config.color) {
newsquare.color = config.color;
}
if (config.width) {
newsquare.area = config.width * config.width;
}
return newsquare;
} var mySquare = createSquare({ color: "black" });

通过接口我们知道可选属性就是在属性名称的后面加上问号就可以了,但是开发的时候要注意就是要通过if判断下该值是否存在。

函数类型

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

--TypeScript

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

--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

 interface StringArray {
[index: number]: string;
} var myArray: StringArray;
myArray = ["Bob", "Fred"];

--JavaScript

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

Index类型能够支持两种类型:string和number,所以我们能够实现字典类型,比如下面这种类型。

--TypeScript

 interface StringArray {
[index: string]: string;
} var myArray: StringArray;
myArray = {
"dede": "dede",
"ete":"dede"
};

--JavaScript

 var myArray;
myArray = {
"dede": "dede",
"ete": "dede"
};

类类型

像C#和Java语言中一样,接口最基础的作用就是让类去实现接口,所以这也是TypeScript语言的特点之一。比如下面的例子我们将实现一个带有一个属性的接口。

--TypeScript

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

--JavaScript

 var Clock = (function () {
function Clock(h, m) {
}
return Clock;
})();

这里我们可以看到最终的JS中并没有将currentTime作为变量加入到this中,因为在这个类中我们并没有使用到这个值,所以这个变量只会在我们正式的使用的时候添加到这个类中,如果不用这个类就等同于没有这个变量。

上面我们仅仅只是在接口中写了一个属性,下面我们在接口中增加一个方法。

--TypeScript

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

--JavaScript

 var Clock = (function () {
function Clock(h, m) {
}
Clock.prototype.setTime = function (d) {
this.currentTime = d;
};
return Clock;
})();

静态类和实例类的区别

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

--TypeScript

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

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

当然含有构造方法的接口是有其用途的,比如下面这样的用法。

--TypeScript

 interface ClockInterface {
new (hour: number, minute: number);
} class Clock {
currentTime: Date;
constructor(h: number, m: number) { }
} var cs: ClockInterface = Clock;
var newClock = new cs(2, 3);

--JavaScript

 var Clock = (function () {
function Clock(h, m) {
}
return Clock;
})(); var cs = Clock;
var newClock = new cs(2, 3);

扩展接口

这个特性跟类可以继承其他类一样,接口也可以扩展其他的接口,这将会导致被继承的接口中的所有的内容都会被复制到另一个接口中。下面我们来看一个简单的例子。

--TypeScript

 interface Shape {
color: string;
} interface Square extends Shape {
sideLength: number;
} var square = <Square>{};
square.color = "blue";
square.sideLength = 10;

--JavaScript

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

一个接口不仅仅只能扩展一个接口,是可以扩展多个接口的。比如下面这样。

--TypeScript

 interface Shape {
color: string;
} interface PenStroke {
penWidth: number;
} interface Square extends Shape, PenStroke {
sideLength: number;
} var square = <Square>{};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

--JavaScript

 var square = {};
square.color = "blue";
square.sideLength = 10;
square.penWidth = 5.0;

混合类型

我们再次之前提到过,接口可以描述很多真实世界中JavaScript的类型,因为JavaScript的动态和天生的灵活性,你或许会遇到一些需要多种复合的类型。

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

--TypeScript

 interface Counter {
(start: number): string;
interval: number;
reset(): void;
} var c: Counter;
c(10);
c.reset();
c.interval = 5.0;

--JavaScript

 var c;
c(10);
c.reset();
c.interval = 5.0;

对于需要使用第三方JavaScript库的情况下,我们就会需要使用到上面介绍的知识。当然现在很多常用的JavaScript库都已经存在了,我们可以通过nuget获取到。

TypeScript之接口类型的更多相关文章

  1. TypeScript学习笔记之接口类型

    TypeScript的接口,个人理解就是一种约束,包括各种类型的契约或者代码定义上的契约.当然,和java中的用法基本一致,接口可以被继承也可以被实现. 定义一个简单的interface interf ...

  2. TypeScript Type Compatibility(类型兼容)

    TypeScript中的类型兼容是基于结构归类的.在普通分类的相比之下,结构归类是一种纯粹用于将其成员的类型进行关联的方法.思考下面的代码: interface Named { name: strin ...

  3. TypeScript 之 基础类型、高级类型

    基础类型:https://m.runoob.com/manual/gitbook/TypeScript/_book/doc/handbook/Basic%20Types.html 高级类型:https ...

  4. TypeScript完全解读(26课时)_11.TypeScript完全解读-类型推论和兼容性

    11.TypeScript完全解读-类型推论和兼容性 在一些时候省略指令,ts会帮我们推断出省略的类型的地方适合的类型,通过学习ts的类型推论了解ts的推论规则 类型兼容性就是为了适应js灵活的特点, ...

  5. TypeScript入门五:TypeScript的接口

    TypeScript接口的基本使用 TypeScript函数类型接口 TypeScript可索引类型接口 TypeScript类类型接口 TypeScript接口与继承 一.TypeScript接口的 ...

  6. 无法将类型为“Microsoft.Office.Interop.Word.ApplicationClass”的 COM 对象强制转换为接口类型“Microsoft.Office.Interop.Word._Application”。

    无法将类型为“Microsoft.Office.Interop.Word.ApplicationClass”的 COM 对象强制转换为接口类型“Microsoft.Office.Interop.Wor ...

  7. TypeScript Type Innference(类型推断)

    在这一节,我们将介绍TypeScript中的类型推断.我们将会讨论类型推断需要在何处用到以及如何推断. 基础 在TypeScript中,在几个没有明确指定类型注释的地方将会使用类型推断来提供类型信息. ...

  8. (转)无法将类型为“Microsoft.Office.Interop.Word.ApplicationClass”的 COM 对象强制转换为接口类型“Microsoft.Office.Interop.Word._Application”。此操作失败的原因是对 IID 为“{00020970-

    HRESULT:0x80030002 无法将类型为“Microsoft.Office.Interop.Word.ApplicationClass”的 COM 对象强制转换为接口类型“Microsoft ...

  9. 无法将类型为 excel.applicationclass 的 com 强制转换为接口类型 的解决方法。

    今天碰到客户的电脑在导出EXCEL的时候提示,无法将类型为 excel.applicationclass 的 com 强制转换为接口类型 excel._application 的问题 最后用下面的方法 ...

随机推荐

  1. const变量初始化问题

    在C++中const变量定义时必须进行初始化,否则无法通过编译. 初始化的方式有多种,可以通过字面值对其进行初始化,也可以通过变量对其初始化,或其他方式,只要能给const变量赋初值即可(当然初值应该 ...

  2. svchost占用cpu

    发现有一个svchost始终占用cpu. 查看任务管理器PID列,在tasklist /svc中查找相关列,对应若干服务. 一个一个检查这些服务,确认是windows update服务引起,停止win ...

  3. 关于本地缓存localStorage

    localStorage的优势 1.localStorage拓展了cookie的4K限制 2.localStorage会可以将第一次请求的数据直接存储到本地,这个相当于一个5M大小的针对于前端页面的数 ...

  4. 在Linux上配置xampp后远程访问域名报错

    在Linux上配置xampp后远程访问域名报错: New XAMPP security concept: Access to the requested object is only availabl ...

  5. 关于Linux 下 Mysql 远程访问时出现的Access denied for user '用户名'@'IP地址' (using password:NO)

    大概是因为MySQL不允许远程访问时候不带密码吧,所以还是设定一个密码 如下这样做: 打开终端 ,即terminal的那个(RedHat5.x为例 在左上角(可能会移位)那个带着红帽的家伙点击,--- ...

  6. Ubuntu16.04下安装.NET Core

    以下为控制台输入代码序列一.sudo sh -c 'echo "deb [arch=amd64] https://apt-mo.trafficmanager.net/repos/dotnet ...

  7. JQuery调用Servlet实现文件下载

    jsp页面上的txt附件,点击后浏览器默认直接打开,结果是乱码. 因为用户上传的txt文件可能是ANSI.Unicode.UTF-8编码的任意一种,上传时后台获取文件内容重写一遍保证浏览器打开正常太过 ...

  8. max min 与 min max 的差别

    在求解最优化问题时,遇到一个对偶问题的转换:对于形如 的问题,可以转换为求解 即原问题的对偶问题.而在一般情况下: 对于这个为题的说明我参照http://math.stackexchange.com/ ...

  9. Yosemite 快速搭建 自带Apache+PHP5.6+MySQL 开发环境

    1.安装homebrew ruby -e "$(curl -fsSL https://raw.github.com/mxcl/homebrew/go/install)" 2.安装h ...

  10. 时间同步ntp服务的安装与配置

    1,首先安装ntp服务. [root@localhost /]# yum install ntp -y 2,修改ntp配置文件.(ntp配置文件在:/etc/ntp.conf) [root@local ...