什么是TS
TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。
为什么选择 TypeScript
TypeScript 官网列举了一些优势,不过我更愿意自己总结一下:
TypeScript 增加了代码的可读性和可维护性
- 类型系统实际上是最好的文档,大部分的函数看看类型的定义就可以知道如何使用了
- 可以在编译阶段就发现大部分错误,这总比在运行时候出错好
- 增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等
TypeScript 非常包容
- TypeScript 是 JavaScript 的超集,
.js
文件可以直接重命名为.ts
即可 - 即使不显式的定义类型,也能够自动做出类型推论
- 可以定义从简单到复杂的几乎一切类型
- 即使 TypeScript 编译报错,也可以生成 JavaScript 文件
- 兼容第三方库,即使第三方库不是用 TypeScript 写的,也可以编写单独的类型文件供 TypeScript 读取
TypeScript 拥有活跃的社区
- 大部分第三方库都有提供给 TypeScript 的类型定义文件
- Google 开发的 Angular2 就是使用 TypeScript 编写的
- TypeScript 拥抱了 ES6 规范,也支持部分 ESNext 草案的规范
TypeScript 的缺点
任何事物都是有两面性的,我认为 TypeScript 的弊端在于:
- 有一定的学习成本,需要理解接口(Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等前端工程师可能不是很熟悉的概念
- 短期可能会增加一些开发成本,毕竟要多写一些类型的定义,不过对于一个需要长期维护的项目,TypeScript 能够减少其维护成本
- 集成到构建流程需要一些工作量
- 可能和一些库结合的不是很完美
原始数据类型
JavaScript 的类型分为两种:原始数据类型(Primitive data types)和对象类型(Object types)。
原始数据类型包括:布尔值、数值、字符串、null
、undefined
以及 ES6 中的新类型 Symbol
。
布尔值
布尔值是最基础的数据类型,在 TypeScript 中,使用 boolean
定义布尔值类型:
1 | let isDone: boolean = false; |
数值
使用 number
定义数值类型:
1 | let decLiteral: number = 6; |
编译结果:
1 | var decLiteral = 6; |
其中 0b1010
和 0o744
是 ES6 中的二进制和八进制表示法,它们会被编译为十进制数字。
字符串
使用 string
定义字符串类型:
1 | let myName: string = 'Tom'; |
编译结果:
1 | var myName = 'Tom'; |
其中 ``` 用来定义 ES6 中的模板字符串,${expr}
用来在模板字符串中嵌入表达式。
空值
JavaScript 没有空值(Void)的概念,在 TypeScript 中,可以用 void
表示没有任何返回值的函数:
1 | function alertName(): void { |
声明一个 void
类型的变量没有什么用,因为你只能将它赋值为 undefined
和 null
:
1 | let unusable: void = undefined; |
Null 和 Undefined
在 TypeScript 中,可以使用 null
和 undefined
来定义这两个原始数据类型:
1 | let u: undefined = undefined; |
undefined
类型的变量只能被赋值为 undefined
,null
类型的变量只能被赋值为 null
。
与 void
的区别是,undefined
和 null
是所有类型的子类型。也就是说 undefined
类型的变量,可以赋值给 number
类型的变量:
1 | // 这样不会报错 |
而 void
类型的变量不能赋值给 number
类型的变量:
1 | let u: void; |
任意值
任意值(Any)用来表示允许赋值为任意类型。
什么是任意值类型
如果是一个普通类型,在赋值过程中改变类型是不被允许的:
1 | let myFavoriteNumber: string = 'seven'; |
但如果是 any
类型,则允许被赋值为任意类型。
1 | let myFavoriteNumber: any = 'seven'; |
任意值的属性和方法
在任意值上访问任何属性都是允许的:
1 | let anyThing: any = 'hello'; |
也允许调用任何方法:
1 | let anyThing: any = 'Tom'; |
可以认为,声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值。
未声明类型的变量
变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型:
1 | let something; |
等价于
1 | let something: any; |
类型推论
如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型。 相当于java中的 var 根据下文的类型,来给予它类型。
如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查:
联合类型
联合类型(Union Types)表示取值可以为多种类型中的一种。
1 | let myFavoriteNumber: string | number; |
变量声明
TypeScript 中,使用 :
指定变量的类型,:
的前后有没有空格都可以。
上述例子中,我们用 :
指定 person
参数类型为 string
。但是编译为 js 之后,并没有什么检查的代码被插入进来。
TypeScript 只会进行静态检查,如果发现有错误,编译的时候就会报错。