TypeScript笔记

原创 青春正当时 教程 JavaScript 110阅读 2018-09-21 14:09:22 举报

原始数据类型

  • JavaScript 的类型分为两种:原始数据类型(Primitive data types)和对象类型(Object types)。原始数据类型包括:布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol。
  • TypeScript支持与JavaScript几乎相同的数据类型,此外还提供了实用的枚举类型方便我们使用。

布尔值

最基本的数据类型就是简单的true/false值,在JavaScript和TypeScript里叫做boolean(其它语言中也一样)。例:let isDone: boolean = false;

数字

和JavaScript一样,TypeScript里的所有数字都是浮点数。 这些浮点数的类型是 number。 除了支持十进制和十六进制字面量,Typescript还支持ECMAScript 2015中引入的二进制和八进制字面量。

字符串

JavaScript程序的另一项基本操作是处理网页或服务器端的文本数据。 像其它语言里一样,我们使用 string表示文本数据类型。 和JavaScript一样,可以使用双引号( ")或单引号(')表示字符串。

还可以使用模版字符串,它可以定义多行文本和内嵌表达式。 这种字符串是被反引号包围( `),并且以${ expr }这种形式嵌入表达式

空值

JavaScript 没有空值(Void)的概念,在 TypeScirpt 中,可以用 void 表示没有任何返回值的函数:

声明一个 void 类型的变量没有什么用,因为你只能将它赋值为 undefined 和 null: let unusable: void = undefined;

Null 和 Undefined

在 TypeScript 中,可以使用 null 和 undefined 来定义这两个原始数据类型:

undefined 类型的变量只能被赋值为 undefined,null 类型的变量只能被赋值为 null。

与 void 的区别是,undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量,可以赋值给 number 类型的变量:let num: number = undefined; 是可以的。


任意值

任意值(Any)用来表示赋值可以为任意类型。
声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值。


类型推论

如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型。
例: 以下代码虽然没有指定类型,但是会在编译的时候报错:

TypeScript 会在没有明确的指定类型的时候推测出一个类型,这就是类型推论。

如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查。

联合类型

联合类型(Union Types)表示取值可以为多种类型中的一种。
简单的例子:

这里的 let myFavoriteNumber: string | number 的含义是,允许 myFavoriteNumber 的类型是 string 或者 number,但是不能是其他类型。

联合类型使用 | 分隔每个类型。

访问联合类型的属性或方法

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法:

上例中,length 不是 string 和 number 的共有属性,所以会报错。


对象的类型——接口

在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。
简单的例子:

上面的例子中,我们定义了一个接口 Person,接着定义了一个变量 tom,它的类型是 Person。这样,我们就约束了 tom 的形状必须和接口 Person 一致。

接口一般首字母大写。
定义的变量比接口少了一些属性是不允许的
多一些属性也是不允许的
可见,赋值的时候,变量的形状必须和接口的形状保持一致。

可选属性

有时我们希望不要完全匹配一个形状,那么可以用可选属性:

可选属性的含义是该属性可以不存在。这时仍然不允许添加未定义的属性

任意属性

有时候我们希望一个接口允许有任意的属性,可以使用如下方式:

使用 [propName: string] 定义了任意属性取 string 类型的值。
需要注意的是,一旦定义了任意属性,那么确定属性和可选属性都必须是它的子属性

上例中,任意属性的值允许是 string,但是可选属性 age 的值却是 number,number 不是 string 的子属性,所以报错了。

只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性:

上例中,使用 readonly 定义的属性 id 初始化后,又被赋值了,所以报错了。
注意,只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候。


数组的类型

「类型 + 方括号」表示法

最简单的方法是使用「类型 + 方括号」来表示数组:
let fibonacci: number[] = [1, 1, 2, 3, 5];
数组的项中不允许出现其他的类型

数组泛型

也可以使用数组泛型(Array Generic) Array<elemType> 来表示数组:
let fibonacci: Array<number> = [1, 1, 2, 3, 5];

用接口表示数组

NumberArray 表示:只要 index 的类型是 number,那么值的类型必须是 number。

any 在数组中的应用

一个比较常见的做法是,用 any 表示数组中允许出现任意类型:
let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];


函数的类型

函数声明

在 JavaScript 中,有两种常见的定义函数的方式——函数声明(Function Declaration)和函数表达式(Function Expression):

一个函数有输入和输出,要在 TypeScript 中对其进行约束,需要把输入和输出都考虑到,其中函数声明的类型定义较简单:

注意,输入多余的(或者少于要求的)参数,是不被允许的:

函数表达式

如果要我们现在写一个对函数表达式(Function Expression)的定义,可能会写成这样:

这是可以通过编译的,不过事实上,上面的代码只对等号右侧的匿名函数进行了类型定义,而等号左边的 mySum,是通过赋值操作进行类型推论而推断出来的。如果需要我们手动给 mySum 添加类型,则应该是这样:

注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>。
在 TypeScript 的类型定义中,=> 用来表示函数的定义,左边是输入类型,需要用括号括起来,右边是输出类型。
在 ES6 中,=> 叫做箭头函数,应用十分广泛

 用接口定义函数的形状

我们也可以使用接口的方式来定义一个函数需要符合的形状:

可选参数

与接口中的可选属性类似,我们用 ? 表示可选的参数:

需要注意的是,可选参数必须接在必需参数后面。换句话说,可选参数后面不允许再出现必须参数了

参数默认值

在 ES6 中,我们允许给函数的参数添加默认值,TypeScript 会将添加了默认值的参数识别为可选参数:

此时就不受「可选参数必须接在必需参数后面」的限制了:

剩余参数

ES6 中,可以使用 ...rest 的方式获取函数中的剩余参数(rest 参数):

事实上,items 是一个数组。所以我们可以用数组的类型来定义它:

注意,rest 参数只能是最后一个参数

重载

重载允许一个函数接受不同数量或类型的参数时,作出不同的处理。

比如,我们需要实现一个函数 reverse,输入数字 123 的时候,输出反转的数字 321,输入字符串 'hello' 的时候,输出反转的字符串 'olleh'。

利用联合类型,我们可以这么实现:

然而这样有一个缺点,就是不能够精确的表达,输入为数字的时候,输出也应该为数字,输入为字符串的时候,输出也应该为字符串。

这时,我们可以使用重载定义多个 reverse 的函数类型:

上例中,我们重复定义了多次函数 reverse,前几次都是函数定义,最后一次是函数实现。在编辑器的代码提示中,可以正确的看到前两个提示。

注意,TypeScript 会优先从最前面的函数定义开始匹配,所以多个函数定义如果有包含关系,需要优先把精确的定义写在前面。


类型断言

类型断言(Type Assertion)可以用来手动指定一个值的类型。

语法

<类型>值 或 值 as 类型
在 tsx 语法(React 的 jsx 语法的 ts 版)中必须用后一种。

将一个联合类型的变量指定为一个更加具体的类型

之前提到过,当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法:

而有时候,我们确实需要在还不确定类型的时候就访问其中一个类型的属性或方法,比如:

上例中,获取 something.length 的时候会报错。

此时可以使用类型断言,将 something 断言成 string:

类型断言的用法如上,在需要断言的变量前加上 <Type> 即可。

类型断言不是类型转换,断言成一个联合类型中不存在的类型是不允许的


声明文件

当使用第三方库时,我们需要引用它的声明文件。

声明语句

假如我们想使用第三方库,比如 jQuery,我们通常这样获取一个 id 是 foo 的元素:

但是在 TypeScript 中,我们并不知道 $ 或 jQuery 是什么东西
这时,我们需要使用 declare 关键字来定义它的类型,帮助 TypeScript 判断我们传入的参数类型对不对:

declare 定义的类型只会用于编译时的检查,编译结果中会被删除。

上例的编译结果是:jQuery('#foo');

声明文件

通常我们会把类型声明放到一个单独的文件中,这就是声明文件:

我们约定声明文件以 .d.ts 为后缀。

然后在使用到的文件的开头,用「三斜线指令」表示引用了声明文件:

第三方声明文件

当然,jQuery 的声明文件不需要我们定义了,已经有人帮我们定义好了:jQuery in DefinitelyTyped

我们可以直接下载下来使用,但是更推荐的是使用工具统一管理第三方库的声明文件。

社区已经有多种方式引入声明文件,不过 TypeScript 2.0 推荐使用 @types 来管理。

@types 的使用方式很简单,直接用 npm 安装对应的声明模块即可,以 jQuery 举例:

npm install @types/jquery --save-dev
可以在这个页面搜索你需要的声明文件。


内置对象

JavaScript 中有很多内置对象,它们可以直接在 TypeScript 中当做定义好了的类型。

内置对象是指根据标准在全局作用域(Global)上存在的对象。这里的标准是指 ECMAScript 和其他环境(比如 DOM)的标准。

ECMAScript 的内置对象

ECMAScript 标准提供的内置对象有:Boolean、Error、Date、RegExp 等。

我们可以在 TypeScript 中将变量定义为这些类型:

DOM 和 BOM 的内置对象

DOM 和 BOM 提供的内置对象有:Document、HTMLElement、Event、NodeList 等。

TypeScript 中会经常用到这些类型:

TypeScript 核心库的定义文件

TypeScript 核心库的定义文件中定义了所有浏览器环境需要用到的类型,并且是预置在 TypeScript 中的。

当你在使用一些常用的方法的时候,TypeScript 实际上已经帮你做了很多类型判断的工作了,比如:

上面的例子中,Math.pow 必须接受两个 number 类型的参数。事实上 Math.pow 的类型定义如下:

再举一个 DOM 中的例子:

上面的例子中,addEventListener 方法是在 TypeScript 核心库中定义的:

所以 e 被推断成了 MouseEvent,而 MouseEvent 是没有 targetCurrent 属性的,所以报错了。

注意,TypeScript 核心库的定义中不包含 Node.js 部分。

用 TypeScript 写 Node.js

Node.js 不是内置对象的一部分,如果想用 TypeScript 写 Node.js,则需要引入第三方声明文件:
npm install @types/node --save-dev

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复