本文是TS简明教程的第一篇,对TS做简要介绍、基础知识以及后续内容规划。
TypeScript是JavaScript的一个超集,支持 ECMAScript 6 标准。
TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。
Typescript由微软开发,与C#出自同一人之手!
TS与JS的区别
TS是JS的超集,扩展了TS的语法,因此现有的JS代码可
直接与TS一起工作无需任何修改
,TS通过类型注解提供编译时的静态类型检查。
由于TS与JS语法大部分一致,本文只对有差异的部分进行讲解。
目录
有些知识点可能是交叉的建议通读完本文再开始真正的开发,这样疑惑会比较少一点
- 数据类型与类型断言
- 函数
- 接口和类
- 泛型
- 枚举
- 命名空间和模块
- 装饰器(注解)
- 高级类型
- 声明文件
- tsconfig.json
- 示例
- React示例(前端)
- Koa示例(后端)
数据类型与类型声明
TS使用:
语法对类型进行声明。基础类型如下:
布尔类型
TS使用boolean
来声明布尔类型。
1 | let succeed: boolean = false; // 声明succeed为boolean类型 |
数字
TS对数字的支持与JS一致,所有数字都是浮点数,所以TS并不存在int
,float
之类的数字类型声明,只有number
。
除了支持十进制和十六进制,TS还支持ES6的二进制和八进制数字。
1 | const age: number = 16; // 声明年龄为数字类型 |
字符串
TS使用string
声明字符串,和JS一样,支持单引号
和双引号
。
1 | let name: string = "demo"; |
数组
TS使用类型[]
声明数组的元素类型,与JS不一样的地方在于,TS
中一旦指明一个类型,所有元素必须是该类型。JS
则可以往数组放任意类型的元素。
1 | const numbers: number[] = []; |
对象
与JS一样,TS的对象也是由键值对
构成,类型声明可以分别作用与键类型
以及值类型
。
声明语法:{[key名称: key类型]: 值类型}
key名称可以自定义
,如key
,index
都是合法的。
1 | const config: {[key: string]: string} = {}; // 声明键和值都只能是字符串类型 |
上例中赋值语法虽然和数组一致,但是ages对象的长度为1,如果ages是数组的话,长度为11。(0-9个元素为undefined)
任意类型
TS用any
用来声明任意类型
,被any
修饰的变量(或常量以及返回值等等)在编译阶段会直接通过
,但是运行阶段可能会抛出undefined或null相关错误
。
any
的出现使得现有的JS代码能够很快速的切换到TS。
1 | let age:any = 10; |
空类型
TS使用void
声明空类型。与any
相反,表示没有任何类型,常用在函数返回值中。void
类型只能被赋值为null
和undefined
。
1 | function test(name: string): void { // 声明函数无返回值,编译成JS之后取返回值会取到undefined,与JS一致 |
null和undefined
TS中默认情况
下,null
和undefined
是所有类型的子类型,换句话说,你可以把null
和undefined
直接赋值给number
/string
/boolean
等类型。
但是不能反过来干,你不能把number
/string
/boolean
类型赋值给null
或者undefined
1 | let u: undefined = undefined; |
never
never
是100%不存在的值
的类型。比如函数中直接抛出异常或者有死循环。
1 | function error(message: string): never { |
never
和void
区别
- 被
void
修饰的函数能正常终止,只不过没有返回值
- 被
never
修饰的函数不能正常终止,如抛出异常或死循环
枚举
枚举是对JS的一个扩展。TS使用enum
关键字定义枚举类型。
1 | enum Color { |
Object
TS使用object
类修饰对象类型,TS中表示非原始类型
。原始类型如下:
- number
- string
- boolean
- null
- undefined
- symbol(ES6新出类型)
1 | let a: object = {}; // ok |
虽然Symbol
长得像对象类型
,不过在ES6
规范中,人家就是原始类型
。
函数声明
TS中可以对函数的形参
以及返回值
进行类型声明。
1 | function a(name: string, age: number): string { |
类型断言
类型断言说白了就是告诉编译器,你按照我指定的类型进行处理
。
1 | let value: any = 'a string'; |
编译结果(正常编译且正常运行)
1 | let value = 'a string'; |
类型推断
当没有手动指定类型时,TS编译器利用类型推断来推断类型。
如果由于缺乏声明而不能推断出类型,那么它的类型被视作默认的动态 any 类型。
1 | let num = 2; // 推断为number类型 |
函数
TS函数与JS函数没有大的区别,多了一个类型系统。
1 | function test(name: string) { // 自动推断返回类型为string |
可选参数
TS中函数每个形参都是必须
的,当然你可以传递null
和undefined
,因为他们是值
。但是在JS中,每个形参都是可选的,没传的情况下取值会得到undefined
。
TS中在参数名后面使用?号指明该参数为可选参数
1 | function test(name: string, age?: number) { |
默认参数
与ES6一致,TS也的函数也支持默认参数。需要注意的是可选参数
和默认参数
是互斥
的。因为如果使用了默认参数,不管外部传不传值,取值的时候都是有值的,和可选参数矛盾。
1 | function test(name: string, age: number = 10) { |
剩余参数
剩余参数和ES6表现一致,但是多了类型声明:
1 | function test(name1: string, ...names: string[]) { |
this执行
TS中this指向和JS一致,这里不做赘述。
结语
未完待续~