TS 简介

• TS 是 JS 的超集、是以 JS 为基础，构建出来的语言
• 可以在任何支持 JS 的平台中执行
• TS 不能被 JS 解析器直接执行，也就不能被浏览器直接执行
  所以需要先编译为 JS
• TS 扩展了 JS，并添加了类型
• JS 是弱类型语言、TS 是强类型语言

搭建环境

1. 下载、安装 Node
2. npm i -g typescript
3. 创建、编写 .ts 文件
   TS 支持 JS 语法，所以可以随便在 .ts 文件里面写点 JS 代码
4. 编译 .ts 文件 tsc XXX.ts
   要在 .ts 文件所在目录下编译
   编译成功后，即能生成对应的 .js 文件

• 可以使用 tsc XXX.ts -w 编译 TS 文件
  此时编译器会监听该 TS 文件，有改动则自动编译

自动编译多个 TS 文件

1. 创建 tsconfig.json 文件
   1. 手动创建（什么都不配置，也能正常使用）
   2. 使用 tsc --init 自动创建、并默认配置
2. 使用 tsc 可以编译所有 TS 文件
   使用 tsc -w 可以监听所有 TS 文件，有改动则自动编译

• 就是说，tsc 需要配合 tsconfig.json 配置文件使用

新增约束

对于 [变量]

1. 约束 [变量] 的 [类型]

① let 变量: 类型; - 先声明、后赋值
② let 变量 = 值; - 声明、并赋值
以上 2 种写法，都会约束 [变量] 的 [类型]。如果类型不对，会直接飘红

• let 变量; 默认为 any 类型
• 即使编译时抛出错误，还是会成功编译为 JS 文件；只要 JS 代码不报错，浏览器还是能正常运行

对于 [函数]

1. 约束 [函数参数] 的 [类型] & [个数]

function sum(num1: number, num2: number) {
     return num1 + num2 }
sum(100, 200); // 传参时，[类型] & [个数] 要对应

2. 约束 [函数返回值] 的 [类型]

function sum(num1: number, num2: number): number {
     return num1 + num2 }
let result = sum(100, 200); // 此时，变量 result 的类型也是 number

• 如果声明函数时 没有手动设置形参的类型，则默认为 any

约束类型

any & unknown

1. any 不安全，该类型的变量可以直接赋值给任意其他类型的变量

let a: any = "superman";
let b: number;
b = a;

2. unknown 安全，该类型的变量不可以直接赋值给任意其他类型的变量
   如果要赋值，需要进行判断

let a: unknown = "superman";
let b: number;
if (typeof a === "number") // 如果不判断，会直接飘红
    b = a;

• 这里的判断可以使用 [类型断言]，与判断等效
  语法：变量 as 类型 || <类型>变量

let a: unknown = "superman";
let b: number;
b = a as number; // 可以写成 b = <number>a

void & never

1. void 修饰的函数，[没有返回值] 或 [返回 undefined / null]
2. never 修饰的函数，[没有返回值]
   一般在有报错的情况下使用

function fun1(): void {
     return null }
function fun2(): never {
     throw new Error("error!!!") }

object

JS 中，万物皆对象，使用 object 并没有很好的起到约束类型的作用

let obj: object;
obj = {
    };
obj = function () {
     };

1. 设置对象

所以，我们一般使用字面量约束对象类型的变量

let obj1: {
    }; // 约束该变量只能是对象
let obj2: {
     name: string }; // 约束该变量是 [有且只有 name 属性的对象]，且 name 的属性值必须是 string 类型 

我们可以使用 ? 约束对象的指定属性是否可选

let obj: {
     name: string, age?: number }; // age 属性可选

还可以设置 [propName: string]: any 控制剩余的变量
propName - 表示 [属性名]，可随便自定义
string - 约束 [属性名] 的类型为 string
any - 约束 [属性值] 的类型为 any
[] 括住，表示属性可以有 0~n 个

let obj: {
     name: string; [propName: string]: any }; // name 属性必填，其他属性可选
obj = {
     name: "superman", age: 21 };
console.log("obj", obj); // obj {name: 'superman', age: 21}

2. 设置函数

可以使用箭头函数约束函数的 [参数] 和 [返回值]

let fun: (num1: number, num2: number) => number;
fun = function (n1, n2) {
     return n1 + n2; };

num1、num2 - 形参名，可随便自定义；表示 [有且只有 2 个参数]
number - 约束 [形参]、[返回值] 的类型为 number

array

let array1: number[]; // 约束数组的元素为 number 类型
let array2: Array<number>; // 写法2

tuple 元组 - 固定长度的数组

let tuple1: [string, string]; // 表示两个 string 类型的元素

enum 枚举

当只有指定的几个值时，可以使用枚举类型

enum Gender {
     male, female }; // 创建枚举
let obj = {
     name: "superman", gender: Gender.male }; // 使用枚举

此时，数据库中存储的是数值 0 1，但使用时 需通过 Gender.male 的方式使用，既节省了存储空间，又使代码语义化

联合类型

1. 用 | 连接多个类型 - 表示满足其中一个条件

let gender: "male" | "famale";
let age: string | number;

2. 用 & 连接多个条件 - 表示满足所有条件

let obj1: {
     name: string, age: number } // 与 obj2 等效
let obj2: {
     name: string } & {
     age: number } // 与 obj1 等效

类型的别名

如果类型很长，可以给类型起别名

demo1：

let num1: 1 | 2 | 3 | 4 | 5;
let num2: 1 | 2 | 3 | 4 | 5;

type myType = 1 | 2 | 3 | 4 | 5;
let num1: myType;
let num2: myType;

demo2：

type myType = {
     name: string; age: number };
const obj: myType = {
     name: "superman", age: 21 };
console.log("obj", obj); // obj {name: 'superman', age: 21}