TypeScript基础语法、类型判断、内置对象(笔记)

1. TS是什么？

• 以js为基础构建的语言
• 一个js的超集
• 可以在任何支持js的平台中执行(但是TS需要编译成js文件)
• TS扩展了js，并添加了类型
• 重要：使用vscode编译ts文件会有一些问题，在当前ts同级文件下创建一个tsconfig.json文件即可，也可以使用 tsc --init 生成并初始化 tsconfig.json 文件

2. TS开发环境

• 需要全局安装 typescript

• TS查看包信息指令 tsc

• tsc TS文件：编译

  • 默认编译ES3版本，也可以通过配置去编译其他版本

3. 声明类型

// 在TS中，第一次定义变量和确定变量的类型时不能修改，会提示(类似报错)、会检测不影响编译(可以根据配置文件进行更改)
// 1. 定义变量和类型
let a: number 
let b: string
let c: boolean

// 2. 定义变量时直接赋值，这时d的类型就已经为布尔，不能随意修改类型
let d = true

// 3. 也可以使用 | 来连接多个类型(联合类型)
let g: number | string | boolean // 可以设这三个中的任意类型

// 4. 对象声明可以使用 & 连接，表示必须并且只能有这两个属性
let h: { name: string } & { age: number }

// 注意在TS中 | 和 & 只能单写

4. 类型

类型	例子	描述
number	1，-33,2.5	任意数字
string	‘hi’,“hi”	任意字符串
boolean	true、false	布尔值
字面量	其本身	限制的类型就是它自己
any	*	任意类型
unknown	*	安全的任意类型
void	空值(undefined)	没有值(或undefined)
never	没有值	不能是任何值
object	{name: ‘小明’}	js对象
array	[1,2,3]	js数组
tuple	[1,2,3]	元组，TS新增的类型，固定长度数组
enum	enum{A,B}	枚举，TS中新增类型

4.1 any和unknown的区别

/* 
  1. 在使用上基本一致
  2. 当类型不确定的时候可以使用，建议使用 unknown
  3. 用any类型声明的变量他可以给任意其他的变量赋值(声明变量不给类型默认是any)
*/
let u: unknown = 123
u = "123"
u = []

let a: any = 123
a = "123"
a = {}

let s: string = "123";

// 赋值，any 可以给其他类型赋值，unknown 不可以
s = a // √
s = u // X

// unknown 想要赋值可以使用类型断言
s = u as string // √
s = <string>u // √

// 对象不能为 unknown 类型，获取不到属性和方法
let un: unknown = {
  a: 123,
  fn(){ }
}
un.a // X
un.fn() // X

let an: any = {
  a: 123
  fn(){ }
}
an.a // √
an.fn() // √

• 想要赋值可以使用类型断言 <类型>变量 或者 变量 as 类型 的形式赋值

4.2 void和never的区别

• 一般用于函数，所以用函数来举例
• void不让函数有返回值，但是可以返回undefined和null
• never什么返回都不能有，可以在里面抛出异常、死循环也可以，报错的时候可以调用never类型的函数

4.3 object类型

// 不建议下面这种写法，因为在js中数组、函数、对象等都是属于object类型的
// 所以在使用这种方式时，我其他引用类型都可以赋值
let a: object

// 这种方式表示这个对象只能有一个name属性，属性值为string
let b: { name: string }

// 也可以在属性后面加问号表示可有可无(age可有有也可以没有)
let c: { name: string, age?: number }

// 表示可以设置任意值，[propName: string]：属性为字符，any：值为任意值
let d: { [propName: string]: any  }

// 下面写法有一点要注意，当这样写的时候会报错，因为后面表示可以设置任意数字
// 但是前面name是string，会出问题
let e: { name: string, [propName: string]: number }
        
// 声明函数设置类型(添加约束)，只能两个参数类型必须为number，必须有返回值并且类型为number
let d: (a: number, b: number) => number

d = function (a, b) {
  return a + b
}

4.4 函数类型

// 函数中声明，这里的e、f、return的值都为number类型
function text(e: number, f: number): number {
  return e + f
}
let result = text(123, 456)

// 函数重载
function fn(name: string): string;
function fn(name: string, age: number): string;
// 必须符合当前函数的传参，和上面两种的其中一种
function fn(name: string, age?: number): string {
  return name + age
}

4.5 array类型

// 表示只能数组中只能存放数字，这两种写法都可以
let a: number[] 或者 Array<number>
    
// 可以设置多个类型
let b: (number | string)[] 或者 Array<number | string>

// 多维嵌套
let c: number[][] 或者 Array<Array<number>>

4.6 TS新增元组类型

// 元组可以固定数组的长度和类型
let a: [number, string] // 长度为2，第一个类型为number，第二个为string，必须要写两个

4.7 TS新增枚举类型

4.7.1 基本使用

// 当对象中一个属性确定多少个值的时候可以用枚举(比如说性别只有男和女)
enum Gender { // 枚举第一位默认为0，第二位默认为1...
  Male,
  Female
}

let a: { name: string, gender: Gender } // 确定性别中只有两个值
a = {
  name: '小明',
  gender: Gender.Male // 可以看出性别为男(输出为0)
}

4.7.2 增长枚举

// 改变枚举默认初始数值
enum Gender {
  Male = 2,
  Female // 此时，Female ⇒ 3
}

4.7.3 异构枚举

// 可以字符串，和数字混用，但是只能是这两个类型
enum Gender {
  Male = 1,
  Female = "no"
}

4.7.4 常量枚举

const enum Color {
  red,
  white
}

Color // X，常量枚举，不能直接获取，只能获取里面的属性
Color.red // 编译后，0 /* Color.red */;
Color.white // 编译后，1 /* Color.white */;

// 如果不是常量枚举，会被编译成对象，也可以反向映射去使用(只有默认的数字或手动设置的数字才存在反向映射，字符串没有)
enum Color {
  red,
  white
}
// 编译后......
var Color;
(function (Color) {
  Color[Color["red"] = 0] = "red";
  Color[Color["white"] = 1] = "white";
})(Color || (Color = {}));
console.log(Color[0]); // "red"
console.log(Color["red"]); // 0

4.8 类型的别名

// type 自定义的类型别名 = 多个类型，包括字面量，方便要写多个类型可以重复使用
type myType1 = number | string
type myType2 = 1 | 2 | 3 | 4 | 5

let a: myType1 = 123
a = "123"
let b: myType2 = 1
b = 2
b = 6 // X，b只能为 1~5

5. 内置对象

5.1 ECMAScript

// 需要注意的是通过 new 返回的是一个对象
let n: Number = new Number(1); // 包装器对象都应该为大写的类型

let b: Boolean = new Boolean(true);

let r: RegExp = /\d/; // 字面量写法和 new 的一样

// 对于基本类型来说，基本类型和包装器对象都可以使用，但是
let n1: number = 1
let n2: Number = 2
n2 = n1 // √
n1 = n2 // × 不能将包装对象赋值给基本类型

5.2 DOM

// 元素类型的有很多，在映射表里面查看即可，可以在vscode内置的文件里查看，也可以在github查看
let body: HTMLElement = document.body;
let div: HTMLDivElement  = document.querySelector("div");
let list: NodeList = document.querySelectorAll("li");

5.3 BOM

// 是一个鼠标事件对象
document.addEventListener("click", (e: MouseEvent) => { })