Typescript

[TOC]

一、 获取Typescript

1. 安装Typescript

npm install -g typescript

2.IDE

• IDE推荐使用 VS Code

• VS 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 = [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类型

• 表示的是那些永不存在的值的类型

• 可以用来使得异常的处理更加安全

• TypeScript中的never类型具体有什么用?

  function listen() : never{
      while(true){
          let conn = 1111
      }
  }
  listen()
  console.log("!!!")  //Error