TypeScript 类型注解

类型注解是TypeScript区别于JavaScript最显著的特点:

var age: number;

: number是TypeScript里的类型注解,通过冒号:后加上类型告诉编译器它前面的变量是何种类型的,冒号:前后可以无空格或多个空格。这里的: number告诉编译器其前方的变量是一个number类型的变量。

在声明变量后,我们就可以使用该变量了:

var age: number;
age = 18;

同JS一样,我们可以把声明语句与初始化放在一起:

var age: number = 18;

TypeScript快速入门一节,在我们声明了age的类型是number后,又给age赋值了一个string类型的值'22',这个时候TypeScript类型检查器会检查出类型错误,告诉我们不能把string类型的值赋给number类型的变量,如下图所示

TypeScript教程编辑器提示

这个时候如果我们强行使用tsc命令编译成JS代码,编译器会在控制台输出错误信息,如下图所示

TypeScript教程编译错误提示

需要注意的是虽然编译器提示了错误,但其仍然可以将TS文件编译成JS文件,编译后的代码如下图所示

TypeScript教程编译错误提示2

我们忽略了TS编译器的错误提示强行转成了JS文件,这样就失去了使用TypeScript静态语言的意义了,我们使用TS就是为了使用它的类型系统以确保大型系统的可维护性。

在平时编写TS代码时,我们需要遵守其类型系统的规范,不能随意改变值的类型,确保不会有任何编译错误。在我们编写TS代码时通常需要给变量指定类型注解,不过也有不需要指定的时候,这个我们后面讲解。

如果读者读过其它TS的书籍或资料,它可能将TS类型分为基础类型(或原始数据类型)与其它类型。本教程不会这样划分,因为这样划分容易与JS里的类型混淆,并且像函数返回值void类型,也不容易直接划分它的类型归属。

本教程不强制给类型分类,而是从学习者快速上手使用角度出发,讲解常见的类型使用方式。等读者掌握了TypeScript的基本使用后,如果对类型系统感兴趣那再深入研究也不迟。

本教程中讲解的类型主要有number、string、boolean、any、undefined、null、symbol、数组、元组、枚举、对象、联合类型、函数、void和 never等,这些并不是TS类型系统的全部类型,但是最常见的。

笔记与思考

  1. `这个时候**入门**我们强行使用tsc命令编译成JS代码,编译器会在控制台输出错误信息,如下图所示`
    "入门" 2个字 是不是多打出来的字?

  2. 不知道该系列是否会更下去,入门教程非常多。简单易懂深入剖析的挺少的。
    博主是否有 RSS 订阅

发表评论

邮箱地址不会被公开。 必填项已用*标注