[TOC]
一、 获取Typescript
1. 安装Typescript
npm install -g typescript
2.IDE
IDE推荐使用 VS CodeVS Code是开源的，跨终端的轻量级编辑器，内置TS
本身就是TS编写的，支持力度较好
3. 如何编译TS
新建一个
index.ts文件-
执行代码（每次修改都要执行命令）
tsc index.ts -
如果要一直监视，首先在当前目录下执行
tsc --init // 初始化TS -
生成一个
tsconfig.json文档，一般会将配置文档中的输出outDir的改一下位置，这个按照自己的要求来做"outDir": "./js" -
可以开启VS Code的watch, 位置
终端---运性任务 --- typescript --- tsc:监视tsconfig.json
二、Typescript基础数据类型
-
Javascript的类型分为两种：原始数据类型和对象类型 - 原始数据类型：
Boolean、number、string、null、undefined、Symbol和BigInt
1. Boolean类型
let flag: boolean = false;
// 编译结果：var flag = false;
2. 数字类型number
let num:number = 0
// 编译结果：var num = 0;
3. 字符串string
let name:string = '张三'
// 编译结果：var name = '张三';
4. Void空值
// Void表示没有任何返回值的函数
function fn():void{
console.log('没有返回值')
}
5. Array类型
// 方式一
let arr: number[] = [1, 2, 3]
// 编译结果 var arr = [1, 2, 3];
// 方式二 (泛型方式)
let arr: Array<number> = [1,2,3]
// 编译结果 var arr = [1, 2, 3];
6. Tuple元组类型
- 在
javascript中不存在元组，这是TS特有的类型 - 元组中每一个属性都有一个关联类型，初始化元组时必须提供每个属性的值
- 当元素越界，也就是给数组添加元素时，它的类型会被限制为元组中每个类型的联合类型
// 联合类型[string, number]
let tom: [string, number] = ['Tom', 25];
tom.push('1111') // 成功
tom.push(1111)// 成功
tom.push(null)// 成功
tom.push(undefined)// 成功
tom.push(true) // 失败 Argument of type 'true' is not assignable to parameter of type 'string | number'.
7. 枚举类型Enum
- 用于取值被限定在一定范围内的场景
- 默认情况枚举开始于其成员编号
0,然后自增 - 也可以通过设置其值来进行更改，也可以设置所有值
// TS
enum ColorEnum{ red, green, blue }
// ES5 编译结果
var ColorEnum;
(function (ColorEnum) {
ColorEnum[ColorEnum["red"] = 0] = "red";
ColorEnum[ColorEnum["green"] = 1] = "green";
ColorEnum[ColorEnum["blue"] = 2] = "blue";
})(ColorEnum || (ColorEnum = {}));
// TS
enum ColorEnum1{ red = 1, green = 3, blue }
// ES5 编译结果
var ColorEnum1;
(function (ColorEnum1) {
ColorEnum1[ColorEnum1["red"] = 1] = "red";
ColorEnum1[ColorEnum1["green"] = 3] = "green";
ColorEnum1[ColorEnum1["blue"] = 4] = "blue";
})(ColorEnum1 || (ColorEnum1 = {}));
8. Any任意类型值
- 如果定义为any类型，则工作方式变为
js模式😓 - 任何东西都可以赋值为any
- top type/ bottom type ，放弃了类型检查
let anyNumber: any = '任意类型值'
anyNumber = 0
9. Unknown类型
-
TS3.0引入 - top type 和 any一样，所有类型都可以分配给unknown,但unknown不能赋值给所有，只能赋值给any和unknown
- unknown 是 top type (任何类型都是它的 subtype) , 而 any 即是 top type, 又是 bottom type (它是任何类型的 subtype ) , 这导致 any 基本上就是放弃了任何类型检查.
/*任何值都可以为unknown类型*/
let un: unknown
un = true // ok
un = 0 // ok
un = 'string' // ok
un = [] // ok
un = {} // ok
un = null // ok
un = undefined // ok
un = Symbol('111') // ok
/* unknown只能复制给any类型和unknown类型,其他类型编译不成功 */
let value1:unknown = un // ok
let value2:any = un // ok
let value3:string = un // error
let value4:boolean = un // error
let value5:number = un // error
let value6:any[] = un // error
let value7:null = un // error
let value8:undefined = un // error
10. Null 和 Undefined
TypeScript里，undefined和null两者有各自的类型，分别为undefined和null,与void的区别是undefined和null为所有类型的子类型。
let u:undefined = undefined
let n:null = null
/*前提条件tsconfig.json中 strictNullChecks 设置为false*/
let numb: number = null // 编译通过
/*前提条件tsconfig.json中 strictNullChecks 设置为true*/
let numb: number = null // 编译未通过，Type 'null' is not assignable to type 'number'
11. Never类型
表示的是那些永不存在的值的类型
可以用来使得异常的处理更加安全
-
function listen() : never{ while(true){ let conn = 1111 } } listen() console.log("!!!") //Error
