typescript页面加载完后 typescript new

---

可以将 TS 中的常用基础类型细分为两类：1 JS 已有类型 2 TS 新增类型
1.JS 已有类型

• 原始类型：number/string/boolean/null/undefined 和 ES6 新增的 symbol
• 对象类型：object（包括，数组、对象、函数等对象）

2.TS 新增类型

• 联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any 等
• 注意：
  原始类型在 TS 和 JS 中写法一致；
  对象类型在 TS 中更加细化，每个具体的对象（比如，数组、对象、函数）都有自己的类型语法。

一、原始类型

原始类型：number/string/boolean/null/undefined/symbol
特点：简单，这些类型，完全按照 JS 中类型的名称来书写

let myName: string = 'John';
let age: number = 25;
let isLoading: boolean = true;

总结：

1. 语法 : 类型 = 值
2. 违反类型匹配规则，则报错
3. null和undefined可以分配给任意类型
4. 基本类型，常省略注解

let msg = 123;

基本类型: string number boolean null undefined

let str: string = '123';
let num: number = 123;
let isShow: boolean = true;

null 和 undefined 可以分配给任意类型

let nu: null = null;
let un: undefined = undefined;
let str2: number = null;
let str3: boolean = undefined;

二、数组类型

• 数组类型的两种写法：
• 推荐使用 number[] 写法

写法一：

let number1: number[] = [1, 2, 3, 4, 5];
{
  // 联合类型(下面将会讲述)
  let arr: (number | string)[] = [1, '2', 3, '4', 5];
}

写法二（了解即可）：

let string: Array<string | number> = [2, 'A', 'B', 'C', 1];

TS中常见的类型- 引用类型 -数组
语法：
:类型[] = 值
:(类型1 | 类型2)[] = 值

//联合类型是一个竖线 |
const list1: [] = [];
const list2: number[] = [1, 2, 3];
const list3: string[] = ['1', '2', '3'];
const list4: boolean[] = [true, false];
// 联合类型： ( 类型1 | 类型2)
const list5: (number | string)[] = [1, '2', 3];
const list6: (number | string | boolean)[] = [0, '1', true];
// 不推荐的写法：泛型写法
const list7: Array<number> = [1, 2, 3, 4, 5];

三、联合类型

数组中既有 number 类型，又有 string 类型

let arr: (number | string)[] = ['A', 1, 'B', 2];

|（竖线）在 TS 中叫做联合类型，即：由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种

1、类型别名 - 常用

类型别名（自定义类型）：为任意类型起别名
使用场景：当同一类型（复杂）被多次使用时，可以通过类型别名，简化该类型的使用

type CustomArray = (number | string)[];
let arr1: CustomArray = ['A', 1, 'B', 2, 'C'];
let arr2: CustomArray = ['D', 3, 'E', 4, 'F'];

解释:

1. 使用 type 关键字来创建自定义类型
2. 类型别名（比如，此处的 CustomArray）可以是任意合法的变量名称
3. 推荐使用大写字母开头（约定的规范）
4. 创建类型别名后，直接使用该类型别名作为变量的类型注解即可

四、函数类型

函数的类型实际上指的是：函数参数和返回值的类型
为函数指定类型的两种方式：

1. 单独指定参数、返回值的类型
2. 同时指定参数、返回值的类型

1、单独指定参数、返回值的类型

作用：添加参数类型和返回值类型
语法：

1. 分开指定(单独指定)
   function xxx(形参：类型, 形参2： 类型)：返回值类型 { … }
2. 同时指定
   type Xxxx = (形参：类型, 形参2： 类型) => 返回值类型

函数声明：

function add1(num1: string, num2: string): string {
  return num1 + num2;
}
add1('1', '2').startsWith('1');
console.log('startsWith:', add1('1', '2').startsWith('1'));

函数表达式（箭头函数）：

const add2 = (num3: number, num4: number): number => {
  return num3 + num4;
};

2、同时指定参数、返回值的类型

type AddFn = (num5: number, num6: number) => number;
const add3: AddFn = (num5, num6) => {
  return num5 + num6;
};
// --不推荐这么写--
const add4: (num7: number, num8: number) => number = (num5, num6) => {
  return num5 + num6;
};

解释：当函数作为表达式时，可以通过类似箭头函数形式的语法来为函数添加类型
注意：这种形式只适用于函数表达式

3、void类型

JS中函数没有返回值，返回值类型是undefined
TS如果函数没有返回值，那么，函数返回值类型为：void,void代表空
TS推荐使用void表示函数没有返回值，不推荐使用undefined
注意：TS 和 JS 函数的默认返回值不同。

function greet(name: string): void {
  console.log('John', name);
}

注意：如果一个函数没有返回值，此时，在 TS 的类型中，应该使用 void 类型

（1）如果什么都不写，此时，mins1函数的返回值类型为： void

const mins1 = () => {};

（2）这种写法是明确指定函数返回值类型为 void，与上面不指定返回值类型相同

const mins2 = (): void => {};

（3）但，如果指定 返回值类型为 undefined，此时，函数体中必须显示的 return undefined 才可以

const mins3 = (): undefined => {
  // 此处，返回的 undefined 是 JS 中的一个值
  return undefined;
};

4、函数可选参数

使用函数实现某个功能时，参数可以传也可以不传。这种情况下，在给函数参数指定类型时，就用到可选参数了；比如，数组的 slice 方法，可以 slice() 也可以 slice(1) 还可以 slice(1, 3)

function mySlice(start?: number, end?: number): void {
  console.log('起始索引', start, '结束索引', end);
}

可选参数：在可传可不传的参数名称后面添加 ?（问号）
注意：可选参数只能出现在参数列表的最后，也就是说可选参数后面不能再出现必选参数

总结（函数类型）

• 作用： 给参数和返回值指定类型，使用更便捷和安全。
• 语法：
  1）分开指定
  function xxx(形参1：类型， 形参2： 类型)：返回值类型 {}
  2）同时指定（只能用在表达式身上）
  type Xxx = (形参1：类型， 形参2： 类型) => 返回值类型
• 特殊：
  返回值类型JS中，没有返回值，默认返回值类型是undefined；TS中，没有返回值，默认返回值类型是void。
• 可选参数： 参数后紧跟? 、可选参数，要放在必选参数之后

五、接口

当一个对象类型被多次使用时，一般会使用接口（interface）来描述对象的类型，达到复用的目的
解释：

1. 使用 interface 关键字来声明接口
2. 接口名称(比如，此处的 IPerson)，可以是任意合法的变量名称，推荐以 I 开头
3. 声明接口后，直接使用接口名称作为变量的类型
4. 因为每一行只有一个属性类型，因此，属性类型后没有 ;(分号)

interface IPerson {
  name: string;
  age: number;
  sayHi(): void;
}

let person: IPerson = {
  name: 'jack',
  age: 19,
  sayHi() {},
};

1、interface vs type

• interface（接口）和 type（类型别名）的对比：
• 相同点：都可以给对象指定类型
• 不同点:

• 接口，只能为对象指定类型
• 类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名

• 推荐：能使用 type 就是用 type

interface IPerson1 {
  name: string;
  age: number;
  sayHi(): void;
}
// 为对象类型创建类型别名
type IPerson2 = {
  name: string;
  age: number;
  sayHi(): void;
};
// 为联合类型创建类型别名
type NumStr = number | string;

2、接口继承

• 如果两个接口之间有相同的属性或方法，可以将公共的属性或方法抽离出来，通过继承来实现复用
• 普通方式，需要书写两遍 x, y：

interface Point2D {
  x: number;
  y: number;
}
interface Point3D {
  x: number;
  y: number;
  z: number;
}

（1）更好的方式，继承：

interface Point2D {
  x: number;
  y: number;
}
// 继承 Point2D
interface Point3D extends Point2D {
  z: number;
}

解释：

1. 使用 extends(继承)关键字实现了接口 Point3D 继承 Point2D
2. 继承后，Point3D 就有了 Point2D 的所有属性和方法(此时，Point3D 同时有 x、y、z 三个属性)

六、元组

• 场景：在地图中，使用经纬度坐标来标记位置信息
• 可以使用数组来记录坐标，那么，该数组中只有两个元素，并且这两个元素都是数值类型 number[]

let position1: number[] = [116.2317, 39.5427];

• 使用 number[] 的缺点：不严谨，因为该类型的数组中可以出现任意多个数字
• 更好的方式：元组 Tuple
• 元组类型是另一种类型的数组，它确切地知道包含多少个元素，以及特定索引对应的类型

let position2: [number, number] = [39.5427, 116.2317];

解释：

1. 元组类型可以确切地标记出有多少个元素，以及每个元素的类型
2. 该示例中，元素有两个元素，每个元素的类型都是 number

1、类型推论

• 在 TS 中，某些没有明确指出类型的地方，TS 的类型推论机制会帮助提供类型；
• 换句话说：由于类型推论的存在，这些地方，类型注解可以省略不写；
• 发生类型推论的 2 种常见场景:声明变量并初始化时和决定函数返回值时。

// 变量 age 的类型被自动推断为：number
let age = 18;
// 函数返回值的类型被自动推断为：number
function add(num1: number, num2: number) {
  return num1 + num2;
}

• 推荐：能省略类型注解的地方就省略（偷懒，充分利用TS类型推论的能力，提升开发效率）
• 技巧：如果不知道类型，可以通过鼠标悬停变量名称上，利用 VSCode 的提示来查看类型。

• 大部分情况类型推论都没问题，如果类型正确，我们就用写。
• 类型推论的结果如果出现 any，最好根据业务需求，自己写上确定的类型。

• 推荐：在 VSCode 中写代码的时候，多看方法、属性的类型，养成写代码看类型的习惯

console.log()
document.createElement()

TS中可以从代码中，推断出类型
1）能推断出的类型，准确的话，尽量用，节省定义类型的工作量
2）什么时候不能用
出现any的时候，不要再用，any往往代表着推断不准确;出现any,往往需要手动加回类型;出现any，如果是最后一环，可以不处理any； 类型推断不准确的时候，不能用推断。

const addLink = document.getElementById('link');
addLink.onclick = function name() {};

2、字面量类型

两个变量的类型分别是什么?

let str1 = 'Hello TS'    // string
const str2 = 'Hello TS'  //'Hello TS'

通过 TS 类型推论机制，可以得到答案：
变量 str1 的类型为：string；
变量 str2 的类型为：‘Hello TS’。
解释:
str1 是一个变量(let)，它的值可以是任意字符串，所以类型为:string；
str2 是一个常量(const)，它的值不能变化只能是 ‘Hello TS’，所以，它的类型为:‘Hello TS’。
注意：
此处的 ‘Hello TS’，就是一个字面量类型，也就是说某个特定的字符串也可以作为 TS 中的类型；
任意的 JS 字面量（比如，对象、数字等）都可以作为类型使用；
字面量：{ name: ‘jack’ } [] 18 20 ‘abc’ false function() {}。

let str1 = 'Hello TS';
const str2 = 'Hello TS123';
str1 = str2;
//str2 = str1 // 不行，常量不可赋值
// 以下写法相当于只读对象，能访问，但不能修改
const obj: { name: 'jack' } = { name: 'jack' };
// obj.name = 'Rose'  // 不行，name 的值锁死了为 jack

含义：从字面值中可以看的出类型，就是字面量类型
使用场景：常和联合类型配合使用，表示一组可选的取值范围

type ActionType = 'TODO/ADD' | 'TODO/DES' | 'TODO/UPDATE';
function dispatch(action: { type: ActionType }) {}
dispatch({ type: 'TODO/ADD' });
dispatch({ type: 'TODO/DES' });
dispatch({ type: 'TODO/UPDATE' });

七、枚举

使用模式和场景：

• 使用模式：字面量类型配合联合类型一起使用
• 使用场景：用来表示一组明确的可选值列表
• 比如，在贪吃蛇游戏中，游戏的方向的可选值只能是上、下、左、右中的任意一个

// 字面量类型配合联合类型一起使用
type Direction1 = 'up' | 'down' | 'left' | 'right';
function changeDirection1(direction: Direction1) {
  console.log(direction);
}
// 调用函数时，会有类型提示：
changeDirection1('down');

• 解释：参数 direction 的值只能是 up/down/left/right 中的任意一个
• 优势：相比于 string 类型，使用字面量类型更加精确、严谨

枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值
枚举：定义一组命名常量。它描述一个值，该值可以是这些命名常量中的一个

1、创建枚举

enum Direction2 {
  Up,
  Down,
  Left,
  Right,
}
// 使用枚举类型
function changeDirection2(direction: Direction2) {
  console.log('direction------>', direction);
}
// 调用函数时，需要应该传入：枚举 Direction 成员的任意一个
// 类似于 JS 中的对象，直接通过 点（.）语法 访问枚举的成员
changeDirection2(Direction2.Up);
changeDirection2(Direction2.Down);
changeDirection2(Direction2.Left);
changeDirection2(Direction2.Right);

解释: 使用 enum 关键字定义枚举；约定枚举名称以大写字母开头；枚举中的多个值之间通过 ,（逗号）分隔；定义好枚举后，直接使用枚举名称作为类型注解。

2、数字枚举

• 问题：我们把枚举成员作为了函数的实参，它的值是什么呢?
• 解释：通过将鼠标移入 Direction.Up，可以看到枚举成员 Up 的值为 0
• 注意：枚举成员是有值的，默认为：从 0 开始自增的数值
• 我们把，枚举成员的值为数字的枚举，称为：数字枚举，当然，也可以给枚举中的成员初始化值

// Down -> 11、Left -> 12、Right -> 13
enum Direction3 {
  Up1 = 10,
  Down1,
  Left1,
  Right1,
}
enum Direction4 {
  Up2 = 2,
  Down2 = 4,
  Left2 = 8,
  Right2 = 16,
}
function sendArticle(status: Direction4) {
  console.log('status  --->', status);
}
sendArticle(Direction4.Down2);
sendArticle(Direction4.Left2);
sendArticle(Direction4.Right2);
sendArticle(Direction4.Up2);

3、字符串枚举

字符串枚举：枚举成员的值是字符串
注意：字符串枚举没有自增长行为，因此，字符串枚举的每个成员必须有初始值

enum Direction5 {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}

4、枚举实现原理

• 枚举是 TS 为数不多的非 JavaScript 类型级扩展(不仅仅是类型)的特性之一
• 因为：其他类型仅仅被当做类型，而枚举不仅用作类型，还提供值(枚举成员都是有值的)
• 也就是说，其他的类型会在编译为 JS 代码时自动移除。但是，枚举类型会被编译为 JS 代码

enum Direction6 {
  Up = 'UP',
  Down = 'DOWN',
  Left = 'LEFT',
  Right = 'RIGHT',
}

5、枚举与联合类型的异同

enum Status {
  Add = 'add',
  Del = 'del',
  Update = 'update',
}
type ActionType =
  | { type: 'todo/add'; payload: { isDone: boolean; id: number; task: string } }
  | { type: 'todo/del'; payload: number }
  | { type: 'todo/update'; payload: number };

function reducer(state: any, action: ActionType) {}

reducer(1, {
  type: 'todo/add',
  payload: { id: 1, isDone: false, task: '学习TypeScript' },
});
reducer(1, { type: 'todo/del', payload: 2 });
reducer(1, { type: 'todo/update', payload: 1 });

八、any类型

• 原则:不推荐使用 any!这会让 TypeScript 变为 “AnyScript”(失去 TS 类型保护的优势)
• 因为当值的类型为 any 时，可以对该值进行任意操作，并且不会有代码提示

let obj: any = { x: 0 };
obj.bar = 100;
obj();
const n: number = obj;

解释:
以上操作都不会有任何类型错误提示，即使可能存在错误；
尽可能的避免使用 any 类型，除非临时使用 any 来“避免”书写很长、很复杂的类型；
其他隐式具有 any 类型的情况： 1.声明变量不提供类型也不提供默认值； 2. 函数参数不加类型。
注意：
因为不推荐使用 any，所以，这两种情况下都应该提供类型；在项目开发中，尽量少用 any 类型。

九、类型断言

类型断言可以用来手动指定一个值得类型
语法 ：值 as 类型 或者<类型>值，在tsx中必须使用前者。

interface Cat {
    name: string;
    run(): void;
}
interface Fish {
    name: string;
    swim(): void;
}
function isFish(animal: Cat | Fish) {
//这里讲animal 断言成Fish对象 强制类型转换，运行报错
    if (typeof (animal as Fish).swim === 'function') {
        return true;
    }
    return false;
}

注意：类型断言只是欺骗编译器，让编译器可以编译通过，但是如果强制类型转换，在执行的过程中回报错

1、将父类断言成子类

当一个类存在继承关系的时候，父类可以断言成更加具体的子类

class ApiError extends Error {
    code: number = 0;
}
class HttpError extends Error {
    statusCode: number = 200;
}
function isApiError(error: Error) {
    if (typeof (error as ApiError).code === 'number') {
        return true;
    }
    return false;
}

注意：当类型是一个接口的时候不能使用typeof 来判断类型。因为类型不是一个真正的值，在编译结果中是会被删除的。如果类型为一个接口的时候，可以使用类型的是否存在某个属性来判断它的类型来判断是什么类型

interface ApiError extends Error {
    code: number;
}
interface HttpError extends Error {
    statusCode: number;
}
function isApiError(error: Error) {
    if (typeof (error as ApiError).code === 'number') {
        return true;
    }
    return false;
}

可以将任意类型的断言成any类型

总结（类型断言）

1 联合类型可以被断言成其中一个类型
2 父类可以断言成子类
3 任何类型可以断言成any
4 any 可以断言成任何类型

十、typeof

众所周知，JS 中提供了 typeof 操作符，用来在 JS 中获取数据的类型:console.log(typeof ‘Hello world’)
实际上，TS 也提供了 typeof 操作符：可以在类型上下文中引用变量或属性的类型（类型查询）,使用场景:根据已有变量的值，获取该值的类型，来简化类型书写。

let obj = { x: 1, y: 2 };
function formatPoint1(point: { x: number; y: number }) {}
formatPoint1(obj);
function formatPoint2(point: typeof obj) {}

解释:

1. 使用 typeof 操作符来获取变量 p 的类型，结果与第一种（对象字面量形式的类型）相同
2. typeof 出现在类型注解的位置（参数名称的冒号后面）所处的环境就在类型上下文(区别于 JS 代码)
3. 注意：typeof 只能用来查询变量或属性的类型，无法查询其他形式的类型（比如，函数调用的类型）