TypeScript 面向对象基础知识

时间:2023-03-09 06:44:23
TypeScript 面向对象基础知识

孙广东  2016.4.5

JavaScript如今到处都是。web、server(通过NodeJS)、移动应用(通过各种框架)。全部这些,TypeScript都能够使用,而且能够为JavaScript扩展出面向对象和静态类型的特征。

TypeScript能让我们提前使用未来的语言特性。甚至很多其它,比如泛型这样的语言特性。

TypeScript代码。终于会编译为地道的JavaScript,兼容一切使用JavaScript的场合。

编译过程主要是编译时检查,一点改写,删除类型批注和接口。删除类型批注和接口这个过程称为类型擦除(Type Erasure)。

我从网上找到一张非常好的图片用来说明类型擦除,例如以下。

TypeScript 面向对象基础知识

我们后面将具体介绍TypeScript并对照他和其它语言的异同,主要是C#。

时。将回收内存。这样的垃圾回收机制比較高速和即时。可是当发生循环引用时,引用计数将永远也无法达到零。

比較新的浏览器使用标记与清扫垃圾回收机制来找出不可訪问到的对象,非常大程度上避免了这个问题。这样的垃圾回收机制比較缓慢。但他能避免循环引用导致的内存泄露。

关于两种垃圾回收机制有非常多的资料能够研究。这里仅仅是想告诉你,别相信你的直觉,浏览器会非常不同。

资源释放

在TypeScript中,通常都不会使用到非托管的资源。Node.JS中多一点。大部分浏览器将底层交互API设计为回调控制,不向你暴露对象。不须要你自己管理非托管资源。比方以下接近传感器的API用法。

TypeScript 面向对象基础知识

年零点 utc时间開始的毫秒数。

Date对象能够接受各种精度的初始化,例如以下。

TypeScript 面向对象基础知识

你也能够使用RFC和ISO格式的字符串初始化Date对象。当然,毫秒数也能够(从1970年1月1日開始)。

请注意。这不是时间戳。时间戳单位是秒,数字比这个少几个零。

TypeScript 面向对象基础知识

Now

你能够訪问如今的日期与时间,通过方法Date.Now();返回值是毫秒。你假设须要用Date对象去操作。须要用这个值去初始化一个Date对象

TypeScript 面向对象基础知识

Date 的方法

当你有一个Date对象时,你能够用内部方法获取日期的一部分。有两套方法,一套本地,一套UTC。在以下的实例中。你看到我们把getUTCMonth的值加了1.由于返回值从零開始。秒钟。

那么第二个就不会运行。一直要等到第一个运行完毕之后才会被运行。假设第一个侦听器出错,第二个还是会运行。

你能够用setTimeOut时间參数为零的方式去运行你的长时间操作。这相当于多线程。就不会堵住其它的事件运行了。

TypeScript 面向对象基础知识

框架

TypeScript捆绑了那些经常使用对象和方法。由于Web标准在不断的演变,你可能会经常发现一些新的东西还没有被包括在标准库中。你能够查看你计算机上的TypeScript标准库文件。他在SDK文件夹中,通常可能是:

C:\Program Files (86) \MicrosoftSDKs\TypeScript\lib.d.ts

你永远也不应该改动这个文件。假设你须要新的定义。我们能够继续添加新的定义文件。

以下的是 ClientRectList 在TypeScript库文件里的当前定义。

TypeScript 面向对象基础知识

假设要为 ClientRectList加入一个新的isOrdered属性,仅仅需简单的在你自己的程序中加入以下接口扩展程序,就可以马上使用。

TypeScript 面向对象基础知识

当它被加入到标准库时,你自己的扩展会引发一个生成错误,到时把它删除了就可以了。

当你创建ClientRectList的实例时,你将能够訪问过去的方法,以及获取新的 isOrdered 属性。

除了这些TypeScript标准库的定义。TypeScript没有捆绑不论什么其它的框架。

在前一章中。我们谈到了,你能够重建你的各种功能,比方像C#一样,由于TypeScript有着丰富的语言功能。你也能够訪问全部现有的 JavaScript 框架,jQuery、Knockout、Angular和其它数以百计的框架。可是他们都用纯 JavaScript开发,你不会得到增强的开发体验,除非,你有一个匹配的定义文件。幸运的是,有一个项目。他们致力于为全部的JavaScript框架提供TypeScript定义。Definitely Typed 项目,Github地址是:

https://github.com/borisyankov/DefinitelyTyped

创建定义

有时你会想使用JavaScript的库、框架或者工具集。

TypeScript编译器难以理解这些外部的代码,由于他们没有类型信息。

动态定义

在程序中使用外部代码的最简单方法是声明一个any变量。TypeScript编译器同意any对象调用不论什么方法于属性。

这会让你通过编译,可是没有自己主动完毕和类型检查。

TypeScript 面向对象基础知识

在此演示样例中的特殊keyword是declare。这会告诉编译器,这个变量是外部的,这个仅仅是编译时的keyword。编译为JavaScript时会被擦除。

类型定义

为了使用外部JS代码能获取更佳的开发体验,你须要提供更全面的定义。

能够声明变量、 模块、 类和函数,定义外部代码的类型信息。

Declarekeyword仅仅须要在定义的开头使用一次。

TypeScript 面向对象基础知识

假设希望外部代码能够由TypeScript扩展,定义为class,否则。定义为interface。

TypeScript 面向对象基础知识

这两种定义方法的唯一差别是是否能继承扩展。这两种情况下,类型信息都仅为编译时使用。编译为JavaScript后都会进行类型擦除。

非常多时候,定义会组成一系列接口。组合成非常大的一幅图景。你甚至能够为TypeScript不能实现的JavaScript方法创建定义。

比如。它是例如以下图这样做:

TypeScript 面向对象基础知识

在此演示样例中有一个名为move的不可思议的属性,他能够作为函数使用。这样一来,我们就能够声明差点儿不论什么的JavaScript代码, jQuery、Knockout、Angular、RequireJS 和其它的老的JavaScript代码,让你能在TypeScript中使用它们而不必重写。

一些实用的小技巧

获取运行时类型

假设在运行时,想要得到类的名称。在C#中有反射这样的方法。但TypeScript没有明显的内置方法。

TypeScript 面向对象基础知识

静态方法 getType,检查编译后的 JavaScript 函数。然后提取它的名字,这就是TypeScript中的类的名称。

这样的技术的限制是你不能获得包括类和模块的完整名称,这意味着:

MyModule.Example和 SomeOtherModule.Example 和没包装的叫做Example的类,它们全部的返回字符串均为Example。

扩展原生对象

TypeScript内置的定义文件描写叙述了JavaScript原生对象和函数。

你能够在lib.d.ts库文件里查看它们。

你会注意到大部分都是使用interface定义的。不希望你继承它们。

但我们还是能够扩展它们的。

比如。以下是给NodeList对象添加onclick事件。

TypeScript 面向对象基础知识
可是这个代码会被TypeScript编译器警告,告诉你,NodeList对象没有onclick函数。

为了解决此为题,你须要在你自己的代码中加入定义代码。

TypeScript 面向对象基础知识

这个接口声明能够写在不论什么引用的ts文件里。