声明文件当使用第三方库时,我们需要引用它的声明文件,才能获得对应的代码补全、接口提示等功能。
新语法索引由于本章涉及大量新语法,故在本章开头列出新语法的索引,方便大家在使用这些新语法时能快速查找到对应的讲解:
declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明(含有子属性的)全局对象
interface 和 type 声明全局类型
export 导出变量
export namespace 导出(含有子属性的)对象
export default ES6 默认导出
export = commonjs 导出模块
export as namespace UMD 库声明全局变量
declare global 扩展全局变量
declare module 扩展模块
/// <reference /> 三斜线指令
什么是声明语句假如我们想使用第三方库 jQuery,一种常见的方式是在 html 中通过 <script> ...
类型断言类型断言(Type Assertion)可以用来手动指定一个值的类型。
语法1值 as 类型
或
1<类型>值
在 tsx 语法(React 的 jsx 语法的 ts 版)中必须使用前者,即 值 as 类型。
形如 <Foo> 的语法在 tsx 中表示的是一个 ReactNode,在 ts 中除了表示类型断言之外,也可能是表示一个[泛型][]。
故建议大家在使用类型断言时,统一使用 值 as 类型 这样的语法,本书中也会贯彻这一思想。
类型断言的用途类型断言的常见用途有以下几种:
将一个联合类型断言为其中一个类型之前提到过,当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型中共有的属性或方法:
123456789101112interface Cat { name: string; run(): void;}interface Fish { name: string; swim(): void;}function getName(an ...
函数的类型
函数是 JavaScript 中的一等公民
函数声明在 JavaScript 中,有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expression):
123456789// 函数声明(Function Declaration)function sum(x, y) { return x + y;}// 函数表达式(Function Expression)let mySum = function (x, y) { return x + y;};
一个函数有输入和输出,要在 TypeScript 中对其进行约束,需要把输入和输出都考虑到,其中函数声明的类型定义较简单:
123function sum(x: number, y: number): number { return x + y;}
注意,输入多余的(或者少于要求的)参数,是不被允许的:
12345678910111213function sum(x: number, ...
数组的类型在 TypeScript 中,数组类型有多种定义方式,比较灵活。
「类型 + 方括号」表示法最简单的方法是使用「类型 + 方括号」来表示数组:
1let fibonacci: number[] = [1, 1, 2, 3, 5];
数组的项中不允许出现其他的类型:
123let fibonacci: number[] = [1, '1', 2, 3, 5];// Type 'string' is not assignable to type 'number'.
数组的一些方法的参数也会根据数组在定义时约定的类型进行限制:
1234let fibonacci: number[] = [1, 1, 2, 3, 5];fibonacci.push('8');// Argument of type '"8"' is not assignable to parameter of type 'number'.
上例中,push 方法只允许传入 ...
泛型泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。
简单的例子首先,我们来实现一个函数 createArray,它可以创建一个指定长度的数组,同时将每一项都填充一个默认值:
123456789function createArray(length: number, value: any): Array<any> { let result = []; for (let i = 0; i < length; i++) { result[i] = value; } return result;}createArray(3, 'x'); // ['x', 'x', 'x']
上例中,我们使用了之前提到过的数组泛型来定义返回值的类型。
这段代码编译不会报错,但是一个显而易见的缺陷是,它并没有准确的定义返回值的类型:
Array<any> 允许 ...
序言这是一篇全面介绍 WebKit 和 Gecko 内部操作的入门文章,是以色列开发人员塔利·加希尔大量研究的成果。在过去的几年中,她查阅了所有公开发布的关于浏览器内部机制的数据(请参见资源),并花了很多时间来研读网络浏览器的源代码。她写道:
在 IE 占据 90% 市场份额的年代,我们除了把浏览器当成一个“黑箱”,什么也做不了。但是现在,开放源代码的浏览器拥有了过半的市场份额,因此,是时候来揭开神秘的面纱,一探网络浏览器的内幕了。呃,里面只有数以百万行计的 C++ 代码…
塔利在她的网站上公布了自己的研究成果,但是我们觉得它值得让更多的人来了解,所以我们在此重新整理并公布。
作为一名网络开发人员,学习浏览器的内部工作原理将有助于您作出更明智的决策,并理解那些最佳开发实践的个中缘由。尽管这是一篇相当长的文档,但是我们建议您花些时间来仔细阅读;读完之后,您肯定会觉得所费不虚。——保罗·爱丽诗 (Paul Irish),Chrome 浏览器开发人员事务部
简介网络浏览器很可能是使用最广的软件。在这篇入门文章中,我将会介绍它们的幕后工作原理。我们会了解到,从您在地址栏输入 google. ...
类与接口之前学习过,接口(Interfaces)可以用于对「对象的形状(Shape)」进行描述。
这一章主要介绍接口的另一个用途,对类的一部分行为进行抽象。
类实现接口实现(implements)是面向对象中的一个重要概念。一般来讲,一个类只能继承自另一个类,有时候不同类之间可以有一些共有的特性,这时候就可以把特性提取成接口(interfaces),用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。
举例来说,门是一个类,防盗门是门的子类。如果防盗门有一个报警器的功能,我们可以简单的给防盗门添加一个报警方法。这时候如果有另一个类,车,也有报警器的功能,就可以考虑把报警器提取出来,作为一个接口,防盗门和车都去实现它:
123456789101112131415161718interface Alarm { alert(): void;}class Door {}class SecurityDoor extends Door implements Alarm { alert() { ...
对象的类型——接口在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。
什么是接口在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。
TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。
简单的例子123456789interface Person { name: string; age: number;}let tom: Person = { name: 'Tom', age: 25};
上面的例子中,我们定义了一个接口 Person,接着定义了一个变量 tom,它的类型是 Person。这样,我们就约束了 tom 的形状必须和接口 Person 一致。
接口一般首字母大写。有的编程语言中会建议接口的名称加上 I 前缀。
定义的变量比接口少了一些属性是不允许的:
12345678 ...
联合类型联合类型(Union Types)表示取值可以为多种类型中的一种。
简单的例子123456789let myFavoriteNumber: string | number;myFavoriteNumber = 'seven';myFavoriteNumber = 7;``````let myFavoriteNumber: string | number;myFavoriteNumber = true;// index.ts(2,1): error TS2322: Type 'boolean' is not assignable to type 'string | number'.// Type 'boolean' is not assignable to type 'number'.
联合类型使用 | 分隔每个类型。
这里的 let myFavoriteNumber: string | number 的含义是,允许 myFavoriteNumber 的类型是 string ...
类型推论如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型。
什么是类型推论以下代码虽然没有指定类型,但是会在编译的时候报错:
1234let myFavoriteNumber = 'seven';myFavoriteNumber = 7;// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
事实上,它等价于:
1234let myFavoriteNumber: string = 'seven';myFavoriteNumber = 7;// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
TypeScript 会在没有明确的指定类型的时候推测出一个类型,这就是类型推论。
如果定义 ...
