# TS学习笔记

**Repository Path**: jin-rongda/ts-learning-notes

## Basic Information

- **Project Name**: TS学习笔记
- **Description**: 暂时学习coderwhy系统课
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-01-08
- **Last Updated**: 2023-11-14

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 碎记



## 打包生成`.d.ts`类型声明文件

`tsconfig.json`中：

~~~json
"declaration": true,
"declarationDir": "./dist",
~~~

开启如上两项配置后打包如下`index.ts`：

~~~typescript
export const handler = (input: string): boolean => {
    return input.length > 5;
}

interface Foo {
    name: string;
    age: number;
}

export const foo: Foo = {
    name: "林不渡",
    age: 18
}

export default class FooCls {
    prop!: string;
}
~~~

除了生成逻辑相关的`bundle.js`之外，会生成`.d.ts`包含了所有逻辑相关的类型：

~~~typescript
export declare const handler: (input: string) => boolean;
interface Foo {
    name: string;
    age: number;
}
export declare const foo: Foo;
export default class FooCls {
    prop: string;
}
export {};
~~~

**当我们引入三方库的一些变量或者工具后，因为他们在我们的项目中是缺少类型的，所以declare的作用就是补全项目里的一些地方类型的缺失，就是告诉TS编译器你担保这些变量和模块存在，并声明了相应类型，编译的时候不需要提示错误！**

所以当我们进行类库开发时，是很有必要提供对应的`.d.ts`类型文件的，这样使用我们类库的人在他们的ts项目中引入了类型文件才能解决ts的报错问题。

[TS官方文档——编译配置](https://www.tslang.cn/docs/handbook/compiler-options.html)



## ts类型检查时机 & declare定义模块

我们写代码时的类型检查，或者报错，这些都是要比编译还要早的阶段，所以说一些错误的语法（无法运行），比如我们从一个根本不存在的模块导入变量，我们要让代码在编写时报错这是完全可以做到的，说白了就是让ts的类型检查不报错，如下demo：

`index.ts`：

~~~typescript
import { foo } from 'pkg'; // 压根不存在pkg这个模块
import bar from 'pkg';
~~~

这个代码肯定运行就报错，我们这里的目标是让他运行之前不报错，也就是通过ts的类型检查。

只需要写一个`.d.ts`文件，`.d.ts`类型文件里的类型会被ts自动加入环境，：

~~~typescript
declare module 'pkg' {
    export let foo: number;
    let bar: (name: string) => number;
    export default bar;
}
~~~

这样在`index.ts`中，ts就知道‘pkg’为一个模块，不报错，而且foo是模块里普通导出的一个number类型的变量，bar是模块默认导出的一个`(name: string) => number`类型的函数。



## @types/xxx包的作用

简单来说，`@types/` 开头的这一类 npm 包均属于 [DefinitelyTyped](https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2FDefinitelyTyped%2FDefinitelyTyped) ，它是 TypeScript 维护的，专用于为社区存在的**无类型定义的 JavaScript 库**添加类型支持，常见的有 `@types/react` `@types/lodash` 等等。

**TypeScript 会自动将所有 `@types/` 下的包加载至环境**，比如用vite创建的react + ts的项目，安装了`node_modules/@types/react & react-dom`，项目里我们可以直接使用的`JSX`就是`@types/react`中定义的一个命名空间。



## vite创建react+ts项目报错

### 一、import { Navigate } from "react-router-dom"; => 找不到模块“react-router-dom”。你的意思是要将 "moduleResolution" 选项设置为 "node"，还是要将别名添加到 "paths" 选项中?ts(2792)

### 二、App.tsx中jsx结构类型报错 => 类型“JSX.IntrinsicElements”上不存在属性“div”。ts(2339)

解决方法：tsconfig中修改`"moduleResolution": "bundler",`值为`node`

上面的问题都是因为文件模块无法正确找到它所引用的模块造成的，比如第一个报错很直接，就是找不到模块，第二个估计也是解析错模块，然后拿到了错误i的类型导致的，`moduleResolution`就是指ts项目中一个模块引用其它模块时使用何种模块解析策略来获取其它模块，`bundler`值比较新，而且从这里也感觉出来坑比较多，以后用到[看这篇文章吧](https://juejin.cn/post/7221551421833314360)。

至于`node`解析策略，他是一般项目里比较常用的策略，针对**相对路径的引入**，比如`import xxx from './xxx/App'`就非常直接索引到目标文件，但是一般可以省略文件扩展名，ts会去尝试补全，比如按照`App.ts\App.tsx`的顺序去查找文件；对于三方依赖的引入，比如`import React from "react"`这种pkg的引入，ts会从当前文件所在位置尝试寻找同文件夹下的`node_modules`，如果没找到，就找文件所属文件的所属文件夹里的`node_modules`，而且在`node_modules`文件夹里查找包时遵循如下顺序：

1. 同级目录的 `node_modules` 找同名的 js 文件： `/root/src/node_modules/pkg.js`
2. 同级目录 `node_modules` 里面找包含 `package.json` 的名为 `pkg` 文件夹：`/root/src/node_modules/pkg/package.json`
3. 同级目录 `node_modules` 里面找包含 `index.js` 的名为 `pkg` 文件夹 `/root/src/node_modules/pkg/index.js`。

（其实在使用相对路径来引用模块时除了文件后缀补全之外，也会有如此模块的识别，其实包括用相对路径引用模块，寻找文件的完整的流程是先是寻找模块，比如上面这三点，直接以模块名作为模块文件，然后拥有`package.json`或者`index`文件的同名文件夹也会被视为可能的模块。在确定模块之后寻找具体的文件的时候，就会用到模块后缀的补全，这也就是我们使用相对路径引用某个组件比如Home时，为啥可以把组件写在Home文件夹中的index.ts里，因为拥有`index`的文件夹也会被视为一个潜在的模块）

> 总而言之，知道moduleResolution这个配置项的作用就是去描述模块查询行为的，然后工程项目里面一般使用node这个值就差不多了，不深究了。



# why老师箴言

**TS对于很多类型的检测报不报错，取决于它的内部规则，而并不是说逻辑或者思想上的问题**

举个例子：

~~~typescript
interface IPerson {
  name: string
  age: number
}
const info: IPerson = {
  name: "why",
  age: 18,
  height: 1.88, // 从这里就已经开始报错了，因为IPerson接口没有指定height属性 
  address: "sd"
}
~~~

以下代码不报错：

~~~typescript
interface IPerson {
  name: string
  age: number
}
const p = {
  name: "why",
  age: 18,
  height: 1.88,
  address: "sd"
}
const info: IPerson = p
~~~

这个看似离谱的代码没报错，所以说，报不报错都是ts的规则而已

## TS学习的等级划分

1. 知道ts，但是没有用过
2. AnyScript，万物皆可any
3. 大多数使用any，但是普通的很多类型用法也是可以把握的
4. 大多数类型都是使用正确的，极少数使用any（业务开发）
5. 可以使用TS封装一些高级类型，包括框架当中某些特殊的类型（pinia/vuex）
6. 真正的TS融会贯通，阅读TS源码（TS开发者）

# plus：mac常用快捷键

## 工具类

* `shift + control + command + 4`：截图一个区域到粘贴板

## 编程类

* `commond + 方向键`：光标快速移动至（文件最上方/文件最下方/行末/行首）——（上/下/左/右）
* `option + ⬅️`：光标移动至单词的开头
* `option + ➡️`：光标移动至单词的末尾

* `shift + option + ➡️`：向右选中至当前行（词语）末尾
* `shift + option + ⬅️`：向右选中至当前行（词语）首

# TS设计背景

开发中的共识：**错误出现的越早越好(编写时>>编译时>>运行时)**，js不能进行类型检测（类型缺失），导致在运行时才能发现类型错误——>TypeScript：开发时进行类型检测

* ts不光为js带来类型检测，增加开发安全性；
* ts增加大型项目的可读性，可维护性

* 同时支持所有js语法，一些js新特性更是领先js的，所以是js的完全加强版

# 配置ts运行环境

`npm i typescript -g`

`tsc --version`

# Ts基本使用  

~~~typescript
let message: string = "hello"
/*
	1. 变量:类型
	2. string类型是typescript为我们提供的字符串类型，而String是js中的一个构造函数（类），所以一般使用string
*/
~~~

`tsc xxx.ts`：编译ts代码为js代码

`npm install tslib @types/node -g` 安装完这两个包之后就可以使用`ts-node xxx.ts`执行ts文件了

# 变量的声明

`var/let/const 标识符: 数据类型 = 赋值;`：变量后的数据类型又称之为“类型注解”（Type Annotation）

ts中不推荐使用`var`进行变量声明

## 类型推导

如果在变量声明时进行赋值，那么会自动进行类型推导：

~~~typescript
let name = "why"; // 自动推导出name应为string类型

name = 123; // 报错
~~~

* 如果`let`声明变量，推导出来的类型是通用类型
* 如果用`const`声明变量，推导出来的是字面量类型

~~~typescript
const height = 1.88; // height就是1.88类型
~~~

# js与ts的数据类型

ts是js的超集：

![image-20230109003154965](./image/ts是js的超集.png)

* `number`
* `boolean`
* `string`

## 数组类型

注意事项：真实的开发中，数组一般存放相同的数据类型（利于对数据进行统一处理）

~~~typescript
let name: string[] = ["abc", "cba", "nba"]; // 数组类型，且数组中存放字符串
/*
	等价写法
*/
let nums: Array<number> = [123, 321, 111]; // 数组类型，且数组中存放数字number
~~~

## Object类型

~~~typescript
let info: {
  name: string,
  age: number,
  height: number
} = {
  name: "why",
  age: 18,
  height: 1.88
}
~~~

当然也可以用`type`或者`interface`限制对象类型，后面再学

不要写：`let info: object = ...`，这样代表info是一个空对象（后面我们使用info时既不能访问内部属性，也不能设置属性）

## null && undefined

也是基本类型：

~~~typescript
let n: null = null;
let u: undefined = undefined;
~~~

## 函数的类型

### 函数参数

ts中定义一个函数时，需要明确的制定参数的类型：

~~~typescript
function sum(num1: number, num2: number) {
  return num1 + num2;
}
~~~

### 函数返回值

返回值类型可以明确制定，也可以自动进行类型推导

~~~typescript
function sum(num1: number, num2: number): number {
  return num1 + num2;
}
~~~

### 匿名函数的参数类型

一般来说**匿名函数的参数类型都会被上下文自动确定**，我们不要刻意去加类型注解：

~~~typescript
const name: string[] = ["avb", "sfdf", "hhh"];

// 不要写成：function(item: string, index: number, arr: string[])
names.forEach(function(item, index, arr) {
  ...
})
~~~

## 对象类型

~~~typescript
function printCoordinate(point: {x: number, y: number}) {
  console.log("x坐标：",point.x);
  console.log("y坐标：",point.y);
}
// 嫌point对象的类型注解太长了，可以用type起个别名，完全等价于：
type PointType = {x: number, y: number};
function printCoordinate(point: PointType) {
  console.log("x坐标：",point.x);
  console.log("y坐标：",point.y);
}
// 对象类型的注解中，属性之间也可以使用;进行分隔，例如：{x: number; y: number}，所以如果换行的话甚至可以不写分隔符（js特性：换行时自动补全分号）
~~~

### 可选属性

~~~typescript
function printCoordinate(point: {x: number, y: number, z?: number}) { ... } 
~~~

## any数据类型

any类型表示不限制变量的类型，并且**可以对该变量进行任意的操作（与unknown的区别）**，例如访问属性`.length`...（用any注解一个变量相当于ts中回到了js）

## unknown类型

表示不知道变量的类型（不对变量的类型进行限制），但是默认情况下不能对变量进行任何的操作（对其任何的操作都是非法的）：

~~~typescript
let foo: unknown = "aaa";
foo = 123; // 合法
console.log(foo.length) // 访问属性，非法
~~~

如果想操作（访问属性或者方法）unknown类型的变量，需要对其进行**类型缩小**，然后根据缩小后的类型进行对应（合法）的操作：
~~~typescript
let foo: unknown = "aaa";
if(typeof foo === "string") { // 使用typeof运算符进行类型缩小
  console.log(foo.length);
}
~~~

## void类型

出现场景：

TS中如果一个函数没有任何返回值，那么这个函数的返回值类型的类型注解就是`void`。（如果返回值是void类型，那么函数体中我们也可以显式`return undefined`，ts编译器允许这样做而已）

应用场景：

指定函数类型的返回值是void：

~~~typescript
type FooType = () => void;
const foo: FooType = () => {};
// 其实像foo函数，函数没有返回值，其实也没有必要去刻意指定其返回值为void，毕竟类型推导会指出其返回值为void

// 实际中的使用场景一般出现在：
type ExecFnType = (...args: any[]) => void;
function delayExecFn(fn: ExecFnType) {
  setTimeout(() => {
    fn("why", 18);
  }, 1000)
}
delayExecFn((name, age) => {
  console.log(name, age);
})
/*
	一个函数的参数为函数类型，我们一般会规定函数参数的类型，这时候会用到void
*/
~~~

注意（了解即可）：当基于上下文类型推导推导出返回类型为void的时候，并不会强制函数一定不能返回内容，就是说我们写`arr.forEach()`时，提示函数参数应为`(item: xxx, index: number, this: xxx) => void`，这里的void就是推导出来的，我们可以在函数体中`return`。

## never类型（极不常见）

应用场景：

1. 开发中很少实际去定义never类型，某些情况下会自动进行类型推导出never（死循环函数、throw Error的函数...）

2. 开发框架（工具）的时候可能会用到never

~~~typescript
function handleMessage(message: string | number) {
  switch(typeof message) {
      case: "string":
      	console.log(message.length);
      	break;
      case: "number":
      	console.log(message);
      	break;
      /*
      	handleMessage是我们封装的一个工具函数，其正常使用过程永远也不会进入到default逻辑中，但是如果哪一天想要开发这个函数本身，我们拓展了message参数的类型，比如message: string | number ｜ boolean，但是我们函数体中并没有对应处理布尔类型的逻辑，这样就会走到default中，never类型的变量被赋值，就会报错，提示开发人员添加相关处理逻辑
      */
    	default:
      	const check: never = message;	
  }
} 
~~~

## tuple（元组）类型

数组中存放的数据类型不同，且其每一项都有明确的类型限制：

~~~typescript
const info: [string, number, number] = ["why", 18, 1.88];
~~~

使用场景：

作为函数的返回值类型（某些函数返回一个数组，比如数组的第一项为字符串，第二项为一个函数）：

~~~typescript
function example(params: xxx): [str: string, (newValue: number) => void] {
  ...
  let str = "..."
  function setValue(newValue: number) {
    ...
  }
  return [str, setValue];
}
~~~

# 联合类型 && 交叉类型

## 联合类型

用`|`来连接类型从而构造出的新类型，因为变量可能是其中的任何一种类型，所以一般需要搭配类型缩小推断出更加具体的类型

~~~typescript
function printId(id: number | string) {
  if(typeof id === "string") {
    console.log(id.toUpperCase());
  } else {
    console.log(id);
  }
}
~~~

## 交叉类型

`&`连接多个类型，表示要同时满足多个类型

应用场景：用`&`来组合对象类型：

~~~typescript
interface IKun {
  name: string
  age: number
}
interface ICoder {
  name: string
  coding: () => void
}

const jrd: IKun & ICoder = {
  name: "jrd",
  age: 18,
  coding: function() {
    console.log("coding");
  }
}
~~~

# type && interface

## 类型别名type

~~~typescript
// 赋值的方式定义一个type
type PointType = { x: number, y: number, z?: number };
function printCoordinate(point: PointType) {
  console.log(point.x, point.y, point.z);
}
~~~

type也可以给基本类型起别名：`type MyNumber = number`

## 接口声明

~~~typescript
// 直接声明一个接口
interface PointType {
  x: number
  y: number
  z?: number
}
function printCoordinate(point: PointType) {
  console.log(point.x, point.y, point.z);
}
~~~

**两者在定义对象类型的变量时，基本没有区别**

## type与interface的区别

* type类型使用范围更广，type可以声明任何类型；但是接口类型只能用来声明对象

* type不允许相同名称的别名同时存在；interface可以多次声明同一个接口名称，相当于对接口内容的叠加

~~~typescript
type PointType1 = {
  x: number
  y: number
}
type PointType1 = { // 重复定义type PointType1，报错
  z?: number
}

interface PointType2 {
  x: number
  y: number
}
interface PointType2 {
  z: number
}
const point: PointType2 = { // 报错：缺少了z属性
  x: 100,
  y: 200,
}
~~~

* interface支持继承

~~~typescript
interface IPerson {
  name: string
  age: number
}
interface IKun extends IPerson {
  kouhao: string
}
const ikun1: Ikun = {
  kouhao: "你干嘛，哎呦",
  name: "jrd",
  age: 20
}
~~~

* interface可以被类实现（后期ts面向对象时再学）

~~~typescript
class Person implements IPerson {
  ...
}
~~~

### 总结：

**如果是非对象类型的定义用type**，毕竟使用范围更广，可以定义的类型更多；**如果是对象类型的声明那么使用interface**，因为可以重复声明，还有一些其他特性等，可拓展性更强

但是，其实即使对于对象类型的定义，两者也是随便使用的，毕竟不要忘了ts的核心作用就是在开发阶段，编译阶段给我们做类型限制。两者都能无差别的达成这一目的。

# 类型断言（强制指定类型）

例子：

（其实下面这个例子就是类型断言的核心所在：**通过断言方便我们去使用变量**）

~~~typescript
const imgEl = document.querySelector(".img") as HTMLImageElement; // 如果我们不把imgEl断言为HTMLImageElement，那么默认它的类型就是Element ｜ null——我们操作其属性时（比如imgEl.src="xxx"）就需要进行类型缩小等操作
imgEl.src = "xxx";
imgEl.alt = "yyy";
~~~

断言规则：断言为更加具体的类型或者不太具体的类型（any/unknown）类型：

~~~typescript
const age: number = 18;
const age2 = age as string; // 把number断言成string，报错

// 以下代码从ts类型检测的角度来说是正确的，但是代码本身逻辑有问题（迷迷糊糊，好像没啥实际用）——TSbug
const age3 = age as any; // 把具体类型断言为不太具体的类型any
const age4 = age3 as string; // 把any断言为具体的类型string
~~~

# 非空断言

## plus知识：`?.`——可选链运算符



---

https://cloud.tencent.com/developer/article/2073555

**可选链**操作符( **`?.`** )允许读取位于连接对象链深处的属性的值，而不必明确验证链中的每个引用是否有效。`?.` 操作符的功能类似于 `.` 链式操作符，不同之处在于，在引用为空([nullish](https://developer.mozilla.org/zh-CN/docs/Glossary/Nullish) ) (`[null](<https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/null>)` 或者 `[undefined](<https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined>)`) 的情况下不会引起错误，该表达式短路返回值是 `undefined`。与函数调用一起使用时，如果给定的函数不存在，则返回 `undefined`。

语法：

~~~js
obj?.prop
obj?.[expr]
arr?.[index]
func?.(args)
~~~

---

可选链只能用来访问属性（或者调用方法），但是不能用在赋值表达式的左边：

~~~typescript
type IPerson = {
  name: string,
  age: number,
  friend?: {
    name: string
  }
}

const info: IPerson = {
  name: "why",
  age: 18
}

console.log(info.friend?.name); // undefined

info.friend?.name = "jrd"; // 报错，可选链.?不能用在赋值表达式左侧

/*
	解决方案：
		1. 类型缩小(类型更精细)
*/
if(info.friend) {
  info.friend.name = "kobe";
}
~~~

解决方案2——非空断言`!`（确保某个变量一定是有值的）：

~~~typescript
info.friend!.name = "james"; // 有点危险，只有确保friend一定有值的情况下才能使用
~~~

# 字面量类型

字面量类型就是某个基本类型的具体值作为类型，比如一个具体的字符串或者一个具体的数字，例如：

~~~typescript
const name: "why" = "why";
let age: 18 = 18;
// 单个字面量没啥意义，一般将多个字面量联合起来
type Direction = "left" | "right" | "up" | "down";
const d1: Direction = "left"; // Direction类型的变量只能取四个值中的一个
~~~

例子：

~~~typescript
// 封装请求方法：
type MethodType = "get" | "post";
function request(url: string, method: MethodType) {
  ...
}
request("http://localhost", "post");

const info = {
  url: "xxx",
  method: "post",
}
request(info.url, info.method); // 报错：info.method是一个string类型，而request的第二个参数是一个字符串类型的字面量，说白了就是一个字面量类型，自然类型不匹配

// 解决方案1:类型断言——将string类型断言为更具体的字符串字面量
request(info.url, info.method as "post");
  
// 解决方案2:直接让我们的info对象类型是一个字面量类型
const info2: { url: string, method: "post" } = {
  url: "xxx",
  method: "post"
}
request(info2.url, info2.method);
~~~

## as const

让一个对象的所有属性都变成字面量类型

~~~typescript
// 续上：解决方案3:as const
const info3 = {
  url: "xxx",
  method: "post",
} as const; // 此时info3的类型：{ url: "xxx", method: "post" }

request(info3.url, info3.method);  // 这里info3.url是一个字符串字面量类型，request的第一个参数是string类型，这样把一个更精细的值赋值给宽泛的值是ok的
~~~

# 类型缩小

定义：

Type Narrowing，也译作类型收窄

我们可以通过类似于`typeof padding === "number"`的判断语句，来改变ts的执行路径

在给定的执行路径中，我们可以缩小比声明时更小的类型，这个过程称之为缩小（Narrowing）

而我们编写的`typeof padding === "number"`可以称之为**类型保护（类型缩小的逻辑判断语句）**

常见的类型保护：

* `typeof`
* 平等缩小：`===`/`!==`
* `instanceof`
* `in`
* ...

~~~typescript
// 1. typeof：使用最多
function printID(id: number | string) {
  if(typeof id === "string") {
    console.log(id.length, id.split(""));
  }else {
    console.log(id);
  }
}

// 2. ===平等缩小：方向的类型判断
type Direction = "left" | "right" | "up" | "down";
function switchDirection(direction: Direction) {
  if(direction === "left") {
    console.log("left相关逻辑", direction); // (parameter) direction: "left"
  }else if(direction === "right") {
    console.log("right相关逻辑", direction); // (parameter) direction: "right"
  }
  ...
}
  
// 3. instanceof：日期类型的判断
function printDate(data: string | Date) {
  if(date instanceof Date) {
    console.log(date.getTime());
  } else {
    console.log(date);
  }
}

// 4. in——判断对象身上有无某个属性方法
interface ISwim {
  swim: () => void
}
interface IRun {
  run: () => void
}
function move(animal: ISwim | IRun) {
  if("swim" in animal) {
    animal.swim();
  }else if("run" in animal) {
    animal.run();
  }
}
const fish: ISwim = {
  swim: function() {},
}
const dog: IRun = {
  run: function() {},
}
move(fish);
move(dog);
~~~

move方法的错误写法：

~~~typescript
function move(animal: ISwim | IRun) {
  if(animal.swim) { // 报错，因为animal为联合类型，类型不确定，不可以直接访问属性（访问属性这个行为从ts语法上出错了）
    animal.swim();
  }
  ...
}
~~~

换句话说，`in`运算符可以避开`.`运算符访问对象属性的行为，这个行为是会被ts进行检查的；ts没有针对in的特殊检查，所以可以判断对象是否有某个属性

上面的类型保护会自动进行类型缩小，但有些情况下需要我们用**类型谓词`is`**手动进行类型缩小，场景：

```ts
// 判断参数是否为string类型, 返回布尔值
function isString(s:unknown):boolean{
  return typeof s === 'string'
}

// 参数转为大写函数
// 直接使用转大写方法报错, str有可能是其他类型
function upperCase(str:unknown){
  str.toUpperCase()
  // 类型“unknown”上不存在属性“toUpperCase”。
}

// 判断参数是否为字符串,是在调用转大写方法
function ifUpperCase(str:unknown){

  if(isString(str)){
    str.toUpperCase()
    // (parameter) str: unknown
    // 报错:类型“unknown”上不存在属性“toUpperCase”
  }
}
```

也就是说虽然我们的isString方法内部对于参数str进行了类型判断，并且给出了一个布尔类型的返回参数，但是在`ifUpperCase`函数中并没有对str的类型进行缩小，str依然是原本的unknow类型，**对于这种类型判断函数，我们希望除了给出一个布尔类型的判断结果之外还能对传入的参数进行类型缩小，这就需要用到类型谓词is：**

```ts
function isString(s:unknown):s is string{ // s is string表示：函数返回类型为布尔类型，如果为true，那么参数s自动类型缩小为string
  return typeof s === 'string'
}

function ifUpperCase(str:unknown){

  if(isString(str)){
    str.toUpperCase()
    // (parameter) str: string
  }
}
```

# 函数类型

## 函数类型表达式

函数本身也是一个变量（标识符），所以本身也可以有类型限制（函数类型表达式）：

~~~typescript
type BarType = (num1: number) => number; // 函数类型表达式
const bar: BarType = (arg: number): number => {
  return 123;
}
~~~

**函数类型表达式中，参数列表中，参数的名称不能省略（如上的num1）**，某些语言中可以只写变量类型，但是TypeScript不可以！！！省略之后表达的意思就变了：

~~~typescript
type BarType = (number) => number; // 这样省略参数名其实意思是：(number: any) => number
~~~

### 函数类型参数的个数不进行校验

ts对于传入的函数类型的参数个数不进行检测：

~~~typescript
type CalcType = (num1: number, num2: number) => number;
function calc(calcFn: CalcType) { // calc接收的函数从函数类型表达式CalcType来看，应该接受2个参数
  calcFn(10, 20);
}
calc(function(){ // 这里传给calc的函数一个参数都没有，但是不报错，原因如上⬆️
  return 123;
})
~~~

其实很好理解：

`forEach`接收的函数也提供了三个参数：item、index以及this，但是我们也经常只使用item一个参数呀，所以说ts对函数的参数个数进行检测本来就是不合理的，那将会让ts非常难用

## 调用签名(参数列表后是冒号)

### 调用签名

从对象的角度来看一个函数，函数变量本身也是一个对象，也可以有其他属性（**axios本身是一个函数，但是他身上挂载了axios.get等很多属性、方法**），这样我们定义一个接口让函数这个对象去实现，这样就给函数对象本身增加了一些属性，但是为了保证函数的可运行性，我们需要给接口中添加一个调用签名：

~~~typescript
// 1. 函数类型表达式
type BarType = (num1: number) => number
// 2. 函数的调用签名
interface IBar {
  name: string
  age: number
  (num1: number): number. // 函数的调用签名格式——>（参数名：参数类型, ...): 函数返回值
}

const bar: IBar = (num1: number): number => {
  return 123;
}

bar.name = "aaa";
bar.age = 18;
~~~

### 构造签名（了解）

~~~typescript
class Person { // Person是一个类，自然也是一个构造函数
}

interface IContructorPerson { // 实现了这个接口的函数，可以用new来进行调用（是一个构造函数），并且函数体返回一个Person类实例
  new (): Person
}

function factory(fn: IContructorPerson) {
  const f = new fn();
  return f;
}

factory(Person); // Person构造函数肯定可以用new进行调用，并且返回一个Person实例（完全契合IContructorPerson接口）
~~~

## 可选参数

见上面：函数类型—函数类型表达式—函数类型参数的个数不进行校验 其实是**一个函数如果只有函数类型表达式进行限制，那么他的参数个数是不进行限制的**。但是如果在函数声明时定义的参数列表，那么每个参数默认都是必选参数：

~~~typescript
function foo(x: number, y: number) {
  
}

foo(10); // 报错：函数声明时的两个参数都是必须的
~~~

可选参数：

~~~typescript
// 这样y就是可选的，但是如果函数调用时不传y，那么其就是undefined类型，所以可选参数？符就代表参数的定义的类型与undefined的联合类型
// 等价于 y: unmber | undefined
function foo(x: number, y?: number) {
  if(y !== undefined) {
    console.log(y + 10);
  }
}
foo(10);
~~~

## 默认参数

1. 函数的参数可以有默认值，在有默认值的情况下参数的类型注解可以省略
2. 有默认值的参数，可以接收一个undefined值（ts特点，没啥实用性知道就行）

~~~typescript
function foo(x: number, y = 100) {
  console.log(y + 10);
}
foo(10);
foo(10, undefined); // 没问题
~~~

## 剩余参数

说白了就是js中函数的参数列表写一个数组的解构，然后调用时所有的参数都放入这个数组中：

~~~typescript
function sum(...nums: (number | string)[]) {
  
}
foo("anv", 123, "cba");
~~~

## 函数的重载

举例：我们希望实现add函数可以把两个数字或者两个字符串进行相加：

~~~typescript
function sum(a1: number, a2: number): number; // 函数重载签名
function sum(a1: string, a2: string): string;
function sum(a1: any, a2: any): any { // 有实现体的通用函数
  return a1 + a2;
}
console.log(sum(10, 20));
console.log(sum("aaa", "bbb"));
~~~

ts函数重载的语法构成：

若干个函数重载签名和一个有实现体的通用函数，当我们调用函数时，ts根据我们传入的参数类型来决定执行函数体时，到底执行哪一个函数重载签名（有实现体的函数，是不能被直接调用的）

平时业务开发基本用不到，一般出现在封装一些通用工具的场景中

## 联合类型 && 函数重载的选择

需求：定义一个函数，传入字符串或者数组，返回他们的长度：

~~~typescript
// 1. 使用联合类型来实现
function getLength(a: string | any[]) {
  return a.length;
}
// 2. 使用函数重载来实现
function getLength(a: string): number;
function getLength(a: any[]): number;
function getLength(a: any) {
  return a.length;
}
~~~

**选择原则：如果需求能使用联合类型来实现，尽量选择联合类型来实现**

# TS中的this

在默认情况下（没有设置ts的配置文件this相关），`this`默认是`any`类型

项目目录下执行`tsc --init`初始化ts配置文件（ts语法检测的一些规则）——`tsconfig.json`

发现生成`tsconfig.json`之后，this就出问题了：函数中的this会报错：

~~~typescript
function foo() {
  console.log(this); // 报错，因为this指向谁不明确
}
~~~

`tsconfig.json`中有一个this相关的配置项：`"noImplicitThis": true`（implicit：模糊的，隐含的），也就是说不允许ts中的this指向不明，所以上面的代码就报错了。

解决方案：

1. 设置`tsconfig.json`——`"noImplicitThis": false`
2. 在普通函数中（如上报错的函数），我们需要在函数体的参数列表中，**第一个参数明确指定this及其类型**，然后在调用方法时使用`call`函数，call的第一个参数明确指定this：

~~~typescript
function foo(this: { name: string }, info: { name: string }) {
  console.log(this, info); // 这样this就有明确的类型了，ts不报错
}
foo.call({ name: "why" }, { name: "kobe" }); // 输出：{ name: "why" }, { name: "kobe" }
~~~

# this相关的ts内置工具

## ThisParameterType< T >

获取T类型中的this的类型：

~~~typescript
function foo(this: { name: string }, info: { name: string }) {
  console.log(this, info);
}
type FooType = typeof foo; // type FooType = (this: {name:string}, info: {name: string}) => void
type FooThisType = ThisParameterType<>; // type FooThisType = { name: string }
~~~

## OmitThisParameter< T >

去除T类型中的this之后的函数类型：

~~~typescript
function foo(this: { name: string }, info: { name: string }) {
  console.log(this, info);
}
type FooType = typeof foo; // type FooType = (this: {name:string}, info: {name: string}) => void
type pureFooType = OmitThisParameter<FooType>; // type pureFooType = (info: {name:string}) => void
~~~

## ThisType< T >

一个对象a（A类型），a里面除了各种属性外，有很多的方法，这些方法的函数体中都用到了this变量，这时（基于配置了`"noImplicitThis": true`，this需要明确指明的情况）我们定义这些函数时第一个参数都需要用来手动指定this的类型，为了简化这种重复的操作，这时候我们可以让对象a的类型为`A & ThisType<希望绑定给方法的this的类型X>`，这样就相当于给a对象的所有方法里的this都指定了`X`类型：

~~~typescript
interface IState {
  name: string
  age: number
}
interface IStore {
  state: IState
  eating: () => void
  running: () => void
}
const store: IStore & ThisType<IState> = {
  state: {
    name: "jrd",
    age: 18,
  },
  eating: function() {
    console.log(this.name);
  },
  running: function() {
    console.log(this.age);
  }
}
~~~

等价于：

~~~typescript
interface IState {
  name: string
  age: number
}
interface IStore {
  state: IState
  eating: () => void
  running: () => void
}
const store: IStore = {
  state: {
    name: "jrd",
    age: 18,
  },
  eating: function(this: IState) {
    console.log(this.name);
  },
  running: function(this: IState) {
    console.log(this.age);
  }
}
~~~

解析：毕竟在`"noImplicitThis": true`的情况下，函数中使用this都是需要明确指定this的类型的，eating函数和running函数我们希望IState类型的变量去调用，所以我们第一个参数需要手动指定`this: IState`，但是`store: IStore & ThisType<IState>`之后，即store变量的类型添加上`& ThisType<IState>`之后，store的属性方法的this就都指定为`IState`类型了

Pinia的源码里就是这么操作的

# TS面向对象

其实当下的前端开发中，面向对象的编程其实用的越来越少了，vue3以及react函数式组件结合hook的开发模式，大家都更倾向于函数式编程（更加灵活）。

## 成员属性必须先在class中声明，不然直接constructor中this访问属性会报错：

~~~typescript
class Person {
  name: string; // 声明成员属性
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
export {}; // 不写会报错Person命名冲突（具体和谁冲突不清楚，可能是tsc生成的js文件中的Person？）
~~~

 

---

plus：export暴露变量之后ts文件就会变成一个模块，变量方法等都属于这个模块（形成一个独立的命名空间）

~~~typescript
/**
 * 变量名冲突问题
 */
let name = 'tom'; // 默认情况下，无法使用变量名name等，与全局对象window的name属性出现了重名

export {}; // 解决：使用export将文件声明为一个模块module，变量被限制在当前模块作用域下，不会再产生冲突
~~~

---



成员属性必须进行初始化，constructor中初始化可以，也可以属性声明时进行初始化（这样其实就不用进行类型注解了）：

~~~typescript
class Person {
  name = "";
  age = 0;
}
export {};
~~~

或者不想初始化，用非空断言(逃避ts语法检查罢了hhh)：

~~~typescript
class Person {
  name!: string;
  age!: number;
}
export {};
~~~



## 成员修饰符

`public`、`private`、`protected`写在成员属性声明或者成员方法的定义之前，给类成员添加访问权限：

* `public`：默认属性，可任意访问
* `private`：私有属性，只有在类本身的内部（class定义体内部）才能访问
* `protected`：保护类型：只有在类本身以及子类的内部才能访问

* 针对成员属性`readonly`修饰符：只读属性

~~~typescript
class Person {
  readonly name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
const p = new Person("why", 18);
p.name = 20; // 报错：只读属性不能修改
export {}; 
~~~



## 私有属性的getter和setter

私有属性前面加`_`并不是语法层级的要求，而是单纯的一种编程习惯。

为什么我们对`name`属性添加`getter/setter`拦截器需要定义一个`_name`变量呢？是因为我们去实现`getter/setter`时需要一个持久性的变量作为基准才方便去实现。

**我们的目的并不是定义私有属性`_name`，我们的目的是对`name`属性进行get与set拦截，相当于`name`属性类似于一个计算属性，`name`所依赖的不是其它的共有属性，而是不想被独立访问的一个私有属性`_name`**。

~~~typescript
class Person {
  private _name: string // 私有属性，属性前面使用 "_"
  constructor(name: string) {
    this._name = name;
  }
  running() {
    console.log("running:", this._name);
  }
  // 对私有属性的访问与修改进行拦截
  set name(newValue: string) {
    this._name = newValue;
  }
  get name(): string {
    return this._name;
  }
}
~~~



## 参数属性（语法糖：属性声明 + 构造函数赋值）

构造函数的参数列表里写修饰符 等价于 成员属性声明 + 构造函数内部进行赋值

~~~typescript
class Person {
  constructor(public name: string, private age: number, readonly height: number) {}
}
const p = new Person("why", 18, 1.88);
~~~



## 抽象类abstract

抽象类中可以定义抽象方法（没有函数实现），抽象类供其他类继承，子类要实现抽象类中的抽象方法：

~~~typescript
abstract class Shape {
  abstract getArea(): number;
}

// implements关键字表示是抽象类的具体一个实现：Rectangle实现了Shape这个抽象类
class Rectangle implements Shape {
  constructor(public width: number, public height: number) {
  }
  getArea() {
    return this.width * this.height;
  }
}
~~~



## extends—继承

~~~typescript
class Student {
  name: string;
  constructor(name: string) {
    this.name = name;
  }
    
  sayHello() {
  	console.log('hi !');
  }
}
// 对于PrimaryStudent类来说，他有name和grade两个属性，grade是属于它独有的，name是继承来的
class PrimaryStudent extends Student {
    // 对于自己独有的属性，需要声明（继承来的就不用重新声明了）
    public grade: number;
    constructor(name: string, grade: number) {
        super(name); // 要通过调用super方法执行父类的构造函数，传入父类构造函数所需的参数
        this.grade = grade;
    }

    myGrade() {
        alert('I am at grade ' + this.grade);
    }
    
    // 可以通过override明确此方法是对父类方法的重写(保证父类中有sayHello方法的定义)
    // 我们可以通过super.xxx的方式明确调用父类中的xxx方法
    override sayHello() {
        super.sayHello();
        console.log('hello !');
    }
}
~~~







## TS类型检测——鸭子类型

TypeScript对于类型检测的时候使用鸭子类型

鸭子类型：如果一只鸟，走起来像鸭子，游起来像鸭子，看起来像鸭子，那么我们可以认为他就是一只鸭子

ts鸭子类型：只关心属性和行为，而不关心具体是不是对应的类型：

~~~typescript
class Person {
  constructor(public name: string, public age: number) {}
  running() {}
}
class Dog {
  constructor(public name: string, public age: number) {}
  running() {}
}
function printPerson(p: Person) {
  console.log(p.name, p.age);
}

printPerson(new Person("jrd", 18));
printPerson({name: "kobe", age: 30, running: function() {}}); // 通过（鸭子）类型检测
printPerson(new Dog("旺财", 3)); // 通过类型检测
~~~



## 类具备的类型特性

类的作用：

1. 可以创建对应的实例对象
2. 类本身可以作为其实例对象的类型
3. 类也可以当作一个有构造签名的函数

~~~typescript
class Person {}
// 类作为其实例的类型
const p: Person = new Person();
function printPerson(p: Person) {}

// 当作一个有构造签名的函数
function factory(ctor: new () => void) {}
factory(Person)
~~~



# 对象类型的属性修饰符

* 可选属性？
* 只读属性readonly

~~~typescript
interface IPerson {
  name: string
  age?: number
  readonly height: number
}
~~~





# 索引签名

限制一个对象的属性访问方式（索引的类型）以及属性值的类型

~~~typescript
interface ICollection {
  [index: string]: number // 表示此接口类型的对象必须满足：通过string类型的索引访问属性，访问到的属性为number类型
  length: number // 有一个length属性，其属性值必须是number类型（也受到上面索引签名的约束，所以lenght也必须是number类型）
}

function iteratorCollection(collection: ICollection) {
}

iteratorCollection({ name: 111, age: 18, legtn: 10 });
~~~

解释索引签名中的奇怪现象：

~~~typescript
interface IIndexType {
    // 索引签名
    [index: string]: string
}

// 索引签名：[index: number]: string
// const names: IIndexType = ["abc", "cba", "nba"]; // 不报错

// [index: string]: any
// const names: IIndexType = ["abc", "cba", "nba"]; // 不报错

// [index: string]: string
const names: IIndexType = ["abc", "cba", "nba"]; // 报错：应该是因为["abc", "cba", "nba"]为新鲜变量进行严格类型检测的原因，毕竟["abc", "cba", "nba"]中还有很多方法，比如forEach等，他们的返回值并不是string，这也就是上面any为什么不报错的原因，因为概括了各种方法的返回值
~~~

plus：索引签名的index类型只能是string或者number，两者的联合类型也不行

plus：还有一些奇奇怪怪的规则，不整理了——day3上午3：28左右的部分



# 接口的继承特性

`extends`可以从其他接口中继承过来属性

作用：

1. 减少了相同代码的重复编写
2. 自定义接口时，希望自定义的接口拥有某个类型（第三方库提供的接口）的所有属性，使用继承

~~~typescript
interface IPerson {
  name: string
  age: number
}

interface IKun extends IPerson {
  slogan: string
}

const ikun: IKun = {
  name: "why",
  age: 18,
  slogan: "niganma,aiyou"
}
~~~





# 接口可以被类实现

~~~typescript
interface IKun {
  name: string
  age: number
  slogan: string
  playBasketball: () => void
}

interface IRun {
  running: () => void
}

class Person implements IKun, IRun {
  name: string
  age: number
  slogan: string
  playBasketball() {}
  running() {}
}
~~~





# TS中严格字面量赋值检测

当一个变量第一次被定义时，那么ts认为它是fresh新鲜的，ts将对新鲜的变量进行严格字面量类型检测：变量必须完全满足类型的要求（该有的属性必须要有，**而且不能有多余的属性**）：

~~~typescript
interface IKun {
    name: string,
    age: number,
}

let str = "";
let obj = {
    name: "jrd",
    age: 20,
    height: 1.75,
}

let ikun: IKun = obj; // 不报错：obj已经不是新鲜变量了，它满足了IKun的所有属性要求，多了一个height属性没事
let ikun2: IKun = { // 不报错：通过严格类型检测
    name: "why",
    age: 18,
}
let ikun3: IKun = { // 报错：ikun3首次出现，进行严格类型检测，比IKun接口多了一个height属性
    name: "why",
    age: 18,
    height: 1.88,
}
let ikun4: IKun = str; // str不是新鲜变量，但不代表就不进行类型检测了，只是说此时类型检测的标准是只要满足拥有接口该有的属性即可，str不满足IKun接口，报错
~~~





# 抽象类与接口的区别

相关辨析js中其实不太重要，其他面向对象语言中比较重视

从理解上来说：

​	抽象类是对一类事物的抽象，表达的是is a的关系，如：猫is a动物（抽象类）

​	接口是对某一种行为的抽象，表达的是has a的关系，如：猫has a爬树的技能（接口）、

从语法层面上来讲：

​	抽象类只能被单一继承，接口可以被多重实现

​	抽象类中可以有方法的实现体，接口中只能有函数的声明



# ts枚举类型

ts增加的新特性而已，用一些常量或者联合类型也能实现效果，当然也可以使用枚举类型：

~~~typescript
enum Direction { // 定义了枚举类型Direction
  LEFT, // 默认值为0
  RIGHT // 默认值为1 
}

const d1: Direction = Direction.LEFT; 
function turnDirection(direction: Direction) {
  switch(direction) {
    case Direction.LEFT:
    case Direction.RIGHT:
      ...
  }
}
~~~

一些源码中喜欢给枚举类型赋值时使用位运算（方便功能相 ｜ 吧）：

~~~typescript
enum Operation {
  Read = 1 << 0, // 1左移0位，值为1
  Write = 1 << 1, // 1左移1位，值为2
  foo = 1 << 2 // 1左移2位，值为4
}
~~~

## 应用实例



**总结：enum对象完全可以理解为一个普通js对象，但是我们可以省略写属性值，它自动从0依次递增赋值，我们也可以不省略，即给枚举属性赋值，那么就完全和给对象的属性赋值一样了（不同的是对象`key: value`而枚举`key = value`）**

~~~typescript
enum Color {
  Red, // 0
  Green, // 1
  Blue // 2
}

enum Color {
  DarkRed = 3, // 3
  DarkGreen, // 4
  DarkBlue // 5
}

enum MyEnum {
  First = "First String",
  Second = "Second String",
  Third
}
console.log(MyEnum.Third); // 输出 2
~~~



# 泛型编程（ts中的真正难点）

泛型——类型的参数化

基本使用：

~~~typescript
function bar<Type>(arg: Type): Type {
  return arg;
}

// 完整的写法：
const res1 = bar<number>(123);

// 省略的写法：
const res2 = bar("aaaaa"); // res2能正确推导出来为string类型 
~~~

支持多个泛型参数：

~~~typescript
function foo<T, E>(a1: T, a2: E) {}
~~~

开发中常用的泛型参数名称：

* T：Type的缩写，类型
* K，V：key与value
* E：Element的缩写，元素
* O：Object的缩写，对象

## 泛型接口

~~~typescript
interface IKun<T = string> { // 定义接口时使用泛型，并且指定默认值（给函数参数的默认值一样，这里指定类型的默认值）
  name: T
  age: number
  slogan: T
}
~~~

## 泛型类

~~~typescript
class Point<Type = number> {
  x: Type
  y: Type
  constructor(x: Type, y: Type) {
    this.x = x;
    this.y = y;
  }
}
~~~

## 泛型约束

基本语法：

<T extends InterfaceB>表示传入的类型必须满足B的要求，也可以有其他属性，但是至少要满足B

需求我们想实现一个函数getInfo，获取传入的内容，内容必须有length属性：

~~~typescript
interface ILength {
  length: number
}

function getInfo<Type extends Ilength>(args: Type): Type { // Type相当于类型变量，用于记录本次函数调用的参数的类型，所以在整个函数的执行周期中，一直保留着参数的类型
  return args;
}

const info1 = getInfo("aaaa"); // 最后返回的结果info1就是"aaaa"的类型string，同时也满足了extends指定的约束
const info2 = getInfo(["aaa", "bbb", "ccc"]); 
const info3 = getInfo({length: 100});
~~~



泛型参数搭配keyof添加约束实例：

~~~typescript
// plus——keyof的使用：keyof O：keyof后跟一个对象类型，返回结果为对象类型所有属性的类型的联合类型
interface IKun {
  name: string
  age: number
}
type IkunKeys = keyof IKun // type IKunKeys = string | number

// 获取对象的某个key的值
function getObjectProperty<O, K extends keyof O>(obj: O, key: K) {
  return obj[key];
}

const info = {
  name: "why",
  age: 10,
  height: 1.88
}

const name = getObjectProperty(info, "name");
~~~



# 映射类型（Mapped Types）

业务开发用不到，应用于源码以及通用工具开发中

暂时跳过：day3，下午，2:27

## 基本使用



# 内置类型工具和类型体操

ts的目的是为js添加一套类型校验系统，因为js本身的灵活性，所以ts不得不增加更多的功能来适应js的灵活性——ts是一种支持类型编程的类型系统

类型体操地址：https://github.com/type-challenges/type-challenges

类型体操解析地址：https://ghaiklor.github.io/type-challenges-solutions/en/

（不要舍本逐末，ts只是给js添加类型约束的工具）



# TS知识拓展



## ts模块化

### 基本使用与注意事项

TypeScript认为什么是一个模块：

* **js规范中声明任何没有export的js文件都应该是一个js脚本，而非一个模块**
* 在一个js脚本中，变量和类型会被声明在共享作用域（直观上会造成命名冲突等问题）

如果我们有一个文件，没有任何的import或者export，但是我们希望他被当作一个模块进行处理，添加代码：

~~~typescript
export {}
~~~

这会把文件改成一个没有导出任何内容的模块（生成js/ts模块的操作）。



ts模块导入类型注意事项：

`type.ts`：

~~~typescript
export interface IPerson {
  name: string
  age: number
}

export type IDType = number | string
~~~

`index.ts`:

~~~typescript
import { type IDType, type IPerson } from "./type.ts"; // 在一个模块中导入类型（接口），推荐在类型前面加上type关键字；如果{}中全是类型或者接口，可以把type关键字提取到{}之前即：import type { IDType, IPerson } ...,这样做的目的是方便非ts编译器，比如babel等可以快速移除不相关的导入，提高编译性能

const id1: IDType = 111;
const p: IPerson = { name: "why", age: 18 };
~~~



### 命名空间（了解）

ts自己的一种模块模式，也就是namespaces（命名空间），他是在es模块标准之前出现的

ts官方文档（对命名空间的态度）：

虽然命名空间没有被废弃，但是由于es模块已经拥有了命名空间的大部分特性，因此**更推荐使用es模块**，这样才能与js的发展方向保持一致

`format.ts`：

~~~typescript
namespace price {
  function format(price) {
    return "¥" + price;
  }
  const name = "price";
}

namespace date {
  function format(dateString) {
    return "2022-10-10";
  }
  const name = "date";
}
~~~

这样的话因为没有export，format.ts中的两个命名空间被当作全局变量，其他文件中自然可以直接访问price以及date，但是一般我们这样写：

把命名空间以及命名空间中想提供的变量都进行export：

~~~typescript
export namespace price {
  export function format(price) {
    return "¥" + price;
  }
  export const name = "price";
}

export namespace date {
  export function format(dateString) {
    return "2022-10-10";
  }
  export const name = "date";
}
~~~

`index.ts`：

~~~typescript
import { price, date } from "./format";

price.format("1111");
date.format("2222");
~~~



## 类型查询

现象引入：

ts中我们可以直接执行如下代码，并且document对象、getElementById方法等都有明确的类型限制：

`const imageEl = document.getElementById("image") as HTMLImageElement;`

### `.d.ts`文件

ts的类型声明文件，这类文件中不写逻辑代码，只用来定义接口以及type

ts在执行时会在如下.d.ts文件中查找我们的类型声明：

* 内置类型声明：我们npm安装ts时就被下载下来了，上面的document等就属于这类文件定义的
* 外部定义的类型声明：第三方库，比如axios等等
* 自定义的类型声明



利用webpack搭建一个自动编译的ts运行环境

`./webpack环境/ts-run-envirenment`：

`npm init -y`

`npm i webpack webpack-cli -D`

`./webpack环境/ts-run-envirenment/webpack.config.js`：

~~~js
module.exports
~~~

webpack相关插件：

`npm install html-webpack-plugin -D`&&创建`/index.html`(根目录下)

`npm i webpack-dev-server -D`（开启本地服务）

`npm i ts-loader`

配置package.json:

~~~js
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
    mode: "development",
    entry: "./src/index.ts",
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "bundle.js"
    },
    resolve: {
        extensions: [".ts", ".js", ".cjs", ".json"]
    },
    module: {
        rules: [
            {
                test: /\.ts$/,
                loader: "ts-loader"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html"
        })
    ],
    devServer: {},
}
~~~

生成tsconfig.json（ts-loader需要）：

`tsc --init `

`npm run serve`



### 内置声明文件的配置：

其实我们ts文件能正常运行就是因为上面ts-loader的处理，ts-loader对ts文件的处理是基于tsconfig.json文件的。所以我们可以通过配置tsconfig.json来修改ts的各种运行环境，包括一些语言特性（支不支持es6...），随之就会影响内置的ts声明文件。

（项目中我们可能不用ts-loader进行ts文件处理，而是babel

### 外部定义的类型声明文件

在我们ts环境的项目中，一些三方库，比如axios，我们安装axios的时候，这个包里就包含了它的`.d.ts`类型声明文件，我们在项目里就可以直接使用axios了。

还有一种情况，比如react，我们npm i react之后import发现报错，因为react这个包本身缺少类型声明文件，**不是说react里的代码缺少类型逻辑（人家react本身就使用js写的），而是说我们的ts项目不认识这个第三方模块**，我们这时候一般还要单独安装他的类型声明文件相关的包，比如：`npm i @type/react --save-dev`，这样才能`import React from "react"`不报错。

### 自定义类型声明文件

有一些三方包，网络上也没有它的类型声明文件（让ts识别他的配置文件），这时候我们安装了这玩意之后，我们在我们的ts项目中直接import是会报错的，所以我们需要自定义一个`.d.ts`类型声明文件，让ts项目认识这个包——知道这个包是一个模块：

`jrd.d.ts`

~~~typescript
declare module "jrd" {
  export function join(...args: any[]): any
}
~~~

`index.ts`

~~~typescript
import JRD from "jrd"; // 有了上面的配置，ts就能识别jrd模块了，并且我们在调用JRD.join方法时也会给出相应的类型提示
~~~

#### 使用场景：

1. 引入的三方库没有类型声明文件，ts不识别相关模块，我们自己在`.d.ts`文件中`declare module`声明ap

2. 我们确定在代码运行起来的时候某些地方一定有某个变量，而且确定它的类型，但是我们ts项目中暂时并没有这个变量，这时候我们就可以在`.d.ts`文件中声明它的类型。声明之后ts就不会报错了：

   比如我们在`index.html`中的一个<script>标签中定义了三个变量，我们ts项目中并没有这三个变量，但是打包完之后，ts项目会被引入到`index.html`中，这样的话我们就能在`.d.ts`中先声明出来这三个变量，这样ts就不会报错了（我们自己保证逻辑上它运行时不会出错）

3. 文件模块的模块声明写在`.d.ts`里

## 模块声明

一些文件模块，比如一张`.png`图片，我们在ts项目中引入时ts是不识别这个文件作为一个模块的，所以我们会在`.d.ts`中声明文件模块：

~~~typescript
// 这种文件模块声明就不需要指明模块内容了
declare module "*.png"
declare module "*.jpg"
declare module "*.jpeg"
declare module "*.svg"
// 一般的模块声明
declare module "moduleName" {
  // 模块里面的类型定义
}
~~~

vue+ts的项目中，`.vue`的文件ts默认也是不识别的，需要我们在`.d.ts`文件中声明`.vue`文件模块：

~~~typescript
// 度成长项目中翻到的
declare module '*.vue' {
  import type {DefineComponent} from 'vue';
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const component: DefineComponent<{}, {}, any>;
  export default component;
}
~~~

## .d.ts文件中声明命名空间(很少见)

我们在`index.html`中通过cdn的方式引入了一个包，比如jq，理论上来说我们的项目中完全可以使用jq的东西的，但是ts项目不识别，这时候我们按照上面在`.d.ts`文件中声明一个模块是不行的，因为我们根本不需要import引入这个模块了，所以我们这时候声明一个命名空间才是最合适的，因为命名空间是不要像模块一样引入就生效的：

~~~typescript
declare namespace $ {
  export function ajax(...): ...
}
~~~

# axios封装（空）

# 条件类型

## 条件类型的基本使用

~~~typescript
function sum<T extends number | string>(arg1: T, arg2: T): T extends string ? string : number; // 函数签名
function sum(arg1: any, arg2: any) {
  return arg1 + arg2
}
~~~

因为ts默认会进行一些类型判断给我们的变量一个类型，但是这个类型可能不是我们想要的。**条件类型说白了就是根据ts自动判断出来的类型的一些特性（"abc" extends string，ts默认给我们一个字面量类型"abc"，他满足extends string，所以返回修改成string类型），然后我们修改成我们想要的类型**，有点类似于三元运算符。

## 内置工具ReturnType

`ReturnType<myTypeOfMyFn>`返回传入的函数类型的返回值的类型：

~~~typescript
type CalcFnType = (num1: number, num2: number) => number

function foo() {
  return "abc";
}

type CalcReturnType = ReturnType<CalcFnType>;
type FooReturnType = ReturnType<typeof foo>
~~~

## 条件类型中推断（infer）

https://www.jianshu.com/p/707a304d7752

`infer`语法的限制如下：

1. `infer`只能在条件类型的 extends 子句中使用
2. `infer`得到的类型只能在`true`语句中使用, 即`X`中使用

自己实现ReturnType（取到函数的返回值）

~~~typescript
type MyReturnType<T extends (...args: any[]) => any> = T extends (...args: any[]) => infer R ? R : never;
~~~

**解析：MyReturnType<T extends (...args: any[]) => any>这里的<T extends (...args: any[]) => any>是限制传入MyReturnType的类型为一个函数类型；因为我们只想要这个函数类型的一个部分（返回值）的类型，所以我们想用infer，infer放在函数返回值类型变量的前面就好了，但是infer只能在extends子句中出现，所以T extends (...args: any[]) => infer R ? R : never这里再写一遍extends是为了使用infer**

**infer出现在extends子句的任意一个类型变量的前面，说白了就是让ts去拿到（推断）这个变量的类型，然后我们就可以去使用这个类型**

### 举例：

推断数组(或者元组)的类型

```rust
type InferArray<T> = T extends (infer U)[] ? U : never;
```

```tsx
type I0 = InferArray<[number, string]>; // string | number
type I1 = InferArray<string[]>; // string
type I2 = InferArray<number[]>; // number
```

推断某个函数类型的参数的类型：

~~~typescript
type MyParamters<T extends (...args: any[]) => any> = T extends (...args: infer P) => any ? P : never;
~~~

## 分发条件类型

![image-20230203110752836](./image/分发条件类型.png)

白话：给条件类型传类型参数的时候（toArray为条件类型，因为用了extends，toArray<number | string>就是给toArray传递了一个number ｜ string类型），如果传入的是联合类型，相当于联合类型的各部分分开传给条件类型，最后条件类型的结果再联合起来。

# ts内置工具

3.44（前置映射类型）





# [TypeScript 全面进阶指南学习笔记](https://juejin.cn/book/7086408430491172901)



## 开发环境搭建

vscode插件：[类型自动导入：TypeScript Importer](https://link.juejin.cn/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dpmneo.tsimporter)、[修改文件位置时智能修改项目相对路径：Move TS](https://link.juejin.cn/?target=https%3A%2F%2Fmarketplace.visualstudio.com%2Fitems%3FitemName%3Dstringham.move-ts)

建议开启的vscode的ts配置：

- Function Like Return Types，显示推导得到的函数返回值类型；
- Parameter Names，显示函数入参的名称；
- Parameter Types，显示函数入参的类型；
- Variable Types，显示变量的类型。

[现成的ts编写平台：Playground](https://link.juejin.cn/?target=https%3A%2F%2Fwww.typescriptlang.org%2Fzh%2Fplay)

运行自己的ts文件：`tsc <filename.ts>`，`ts-node <filename.js>`



## 内置原始类型

`string number boolean undefined null bigint symbol object`

~~~typescript
const name: string = 'linbudu';
const age: number = 24;
const male: boolean = false;
const undef: undefined = undefined;
const nul: null = null;
const obj: object = { name, age, male };
const bigintVar1: bigint = 9007199254740991n;
const bigintVar2: bigint = BigInt(9007199254740991);
const symbolVar: symbol = Symbol('unique');
~~~



## 数组类型标注

所有数组元素为同一类型：

~~~typescript
// 等价写法
const arr1: string[] = [];

const arr2: Array<string> = [];
~~~

使用**元组**限制数组长度（元组的存在意义就是**增加数组结构的严谨性**）：

~~~typescript
// [string, string, string]即为一个元组类型（语法层面就是'[<类型1>, ... ,<类型n>]'），长度为三
const arr4: [string, string, string] = ['lin', 'bu', 'du'];
// 可以用可选修饰符?修饰元组数组里的某个类型，如下数组的第二项number,那么它的类型就是number | undefined
const arr6: [string, number?, boolean?] = ['linbudu'];
~~~

**具名元组**来优化元组类型可读性不好的问题（给对应位置的元素不光提供一个类型描述，还提供一个名字）：

~~~typescript
const arr7: [name: string, age: number, male: boolean] = ['linbudu', 599, true];
~~~



## 对象类型的标注

### 接口

`interface`来精准描述对象：

~~~typescript
interface IDescription {
  name: string;
  age: number;
  male: boolean;
}

const obj1: IDescription = {
  name: 'linbudu',
  age: 599,
  male: true,
};
~~~

### 接口属性修饰符：? & readonly

**就像元组中给某一项使用`?`修饰符后，其类型变成`xxx | undefined`**，所以如下代码给obj2添加上func属性后再调用也会产生类型报错，因为**ts不允许调用可能是未定义的方法。（ts5版本不报错了）**

~~~typescript
interface IDescription {
  name: string;
  age: number;
  readonly male: boolean; // male属性为只读属性，js逻辑中不可以对其进行修改
  func?: Function; // func是可选属性，无需实现 func 也是合法的
}

const obj2: IDescription = {
  name: 'linbudu',
  age: 599,
  male: true,
};

obj2.male = false;
obj2.func = () => {}; // func类型为Function | undefined，报错：不能调用可能是未定义的方法
~~~

也可以对数组使用`readonly`修饰符，但是只能对数组整体使用，而不能具体到某个项，经过`readonly`修饰的数组不在能调用`push`等方法（自然也不能通过下标赋值）：

~~~typescript
const arr: readonly string[] = [];
arr.push('123') // Property 'push' does not exist on type 'readonly string[]'
~~~



### object、Object 以及 { }

在 TypeScript 中 Object 包含了所有的类型（可以类比原型链中Object是根一样），如下：

~~~typescript
const tmp4: Object = 'linbudu';
const tmp5: Object = 599;
const tmp6: Object = { name: 'linbudu' };
const tmp7: Object = () => {};
const tmp8: Object = [];
~~~

和 Object 类似的还有 Boolean、Number、String、Symbol，这几个**装箱类型（Boxed Types）**，装箱类型所表示的类型是超出预期的，以 String 为例，它包括undefined、null、void，以及代表的 **拆箱类型（Unboxed Types）** string，如下：

~~~typescript
const tmp9: String = undefined;
const tmp10: String = null;
const tmp11: String = void 0;
const tmp12: String = 'linbudu';

// 以下不成立，因为不是字符串类型的拆箱类型
const tmp13: String = 599; // X
const tmp14: String = { name: 'linbudu' }; // X
const tmp15: String = () => {}; // X
const tmp16: String = []; // X
~~~

**总之：在任何情况下，都不应该使用这些装箱类型。**

**`object`代表所有引用数据（数组、对象、函数...）的类型**。

**至于`{}`作为类型，代表了任何非 null/undefined 的值，避免使用！**其可以理解为既然是一个对象，说明有值，但是不包含任何信息，比如一个`string`类型的变量`str`指定为`{}`类型，那么访问`str.length`也会报错。



## 联合类型搭配字面量类型

联合类型搭配字面量类型可以更精确的描述某个变量或者对象属性的类型：

~~~typescript
interface Tmp {
  mixed: true | string | 599 | {} | (() => {}) | (1 | 2)
}
~~~

- 对于联合类型中的函数类型，需要使用括号`()`包裹起来
- **函数类型并不存在字面量类型（也就是说如上的函数类型并不是特指某个函数的，类似于字面量的东西）**，因此这里的 `(() => {})` 就是一个合法的函数类型



## 枚举类型与对象的区别

枚举和对象的重要差异在于，**对象是单向映射的**，我们只能从键映射到键值。而**枚举是双向映射的**，即你可以从枚举成员映射到枚举值，也可以从枚举值映射到枚举成员：

```typescript
enum Items {
  Foo,
  Bar,
  Baz
}

const fooValue = Items.Foo; // 0
const fooKey = Items[0]; // "Foo"
```

要了解这一现象的本质，我们需要来看一看枚举的编译产物，如以上的枚举会被编译为以下 JavaScript 代码：

```typescript
var Items;
(function (Items) {
    Items[Items["Foo"] = 0] = "Foo";
    Items[Items["Bar"] = 1] = "Bar";
    Items[Items["Baz"] = 2] = "Baz";
})(Items || (Items = {}));
```

`obj[k] = v` 的返回值即是 v，因此这里的 `obj[obj[k] = v] = k` 本质上就是进行了 `obj[k] = v` 与 `obj[v] = k` 这样两次赋值。

但需要注意的是，仅有值为数字的枚举成员才能够进行这样的双向枚举，**字符串枚举成员仍然只会进行单次映射**：

```typescript
enum Items {
  Foo,
  Bar = "BarValue",
  Baz = "BazValue"
}

// 编译结果，只会进行 键-值 的单向映射
"use strict";
var Items;
(function (Items) {
    Items[Items["Foo"] = 0] = "Foo";
    Items["Bar"] = "BarValue";
    Items["Baz"] = "BazValue";
})(Items || (Items = {}));
```

除了数字枚举与字符串枚举这种分类以外，其实还存在着普通枚举与常量枚举这种分类方式。

### 常量枚举

常量枚举和枚举相似，只是其声明多了一个 const：

```typescript
const enum Items {
  Foo,
  Bar,
  Baz
}

const fooValue = Items.Foo; // 0
```

它和普通枚举的差异主要在访问性与编译产物。对于常量枚举，你**只能通过枚举成员访问枚举值**（而不能通过值访问成员，如上通过`Foo`成员访问0）。编译产物：不存在一个辅助对象，只是对使用枚举值的地方进行替换，如上代码的编译产物：

~~~typescript
const fooValue = 0 /* Foo */; // 0
~~~



## 函数类型标注

~~~typescript
// 方式一
const foo = (name: string): number => {
  return name.length
}

// 方式二：可读性低，不推荐
const foo: (name: string) => number = (name) => {
  return name.length
}

// 方式三：使用type抽取函数类型然后标注，也可行
type FuncFoo = (name: string) => number

const foo: FuncFoo = (name) => {
  return name.length
}
~~~



### void类型

在 TypeScript 中，一个没有返回值（即没有调用 return 语句）的函数或者说只有`retuen;`，其返回类型为 void 而不是 undefined。如下两个函数返回值类型都是`void`：

~~~typescript
// 没有调用 return 语句
function foo(): void { }

// 调用了 return 语句，但没有返回值
function bar(): void {
  return;
}
~~~

可以理解为：**在 TypeScript 中，undefined 类型是一个实际的、有意义的类型值，而 void 才代表着空的、没有意义的类型值。**



### 可选参数与 rest 参数

可选参数的两种标注形式：

* **可选参数用`?`进行修饰，且必须位于必选参数之后。**

* **给可选参数一个默认值，但无需`?`修饰了。**

~~~typescript
// 在函数逻辑中注入可选参数默认值
function foo1(name: string, age?: number): number {
  const inputAge = age || 18; // 或使用 age ?? 18
  return name.length + inputAge
}

// 直接为可选参数声明默认值
function foo2(name: string, age: number = 18): number {
  const inputAge = age;
  return name.length + inputAge
}
~~~

rest参数使用数组类型或者元组类型进行标注即可：

~~~typescript
function foo(arg1: string, ...rest: any[]) { }
function foo(arg1: string, ...rest: [number, boolean]) { }
~~~



### 函数重载

~~~typescript
function func(foo: number, bar: true): string; // 重载签名一，传入 bar 的值为 true 时，函数返回值为 string 类型。
function func(foo: number, bar?: false): number; // 重载签名二，不传入 bar，或传入 bar 的值为 false 时（bar?: xxx 的正确理解：?表示可选，也就是可不传，xxx表示类型，即如果传就要满足xxx的类型要求），函数返回值为 number 类型。
function func(foo: number, bar?: boolean): string | number { // 函数的实现签名，会包含重载签名的所有可能情况。
  if (bar) {
    return String(foo);
  } else {
    return foo * 599;
  }
}

// 拥有重载签名的func函数调用时，会从上到下匹配重载签名
const res1 = func(599); // 匹配到了第二个重载签名，返回值为number
const res2 = func(599, true); // 匹配到了第一个重载签名，返回值为string
const res3 = func(599, false); // 匹配第二个，number
~~~

实际上，TypeScript 中的重载更像是伪重载，**它只有一个具体实现，其重载体现在方法调用的签名上而非具体实现上**。而在如 C++ 等语言中，重载体现在多个**名称一致但入参不同的函数实现上**，这才是更广义上的函数重载。



### 返回值为promise对象（async函数）

`Promise<T>`中`T`的类型应该对应**promise成功的原因变量的类型。**

~~~typescript
async function getData(): Promise<string> {
    return "Hello, TypeScript!";
}
~~~



## Class

见上‘TS面向对象’部分



## 类型检查指令

### 针对单行（局部指令）

`ts-ignore`：禁用掉对下一行代码的类型检查（任何地方都不建议使用）

~~~typescript
// @ts-ignore
const name: string = 599; // 不报错
~~~

`ts-expect-error`：忽略下一行的类型错误（换言之下一行必须有类型错误才能用，否则报错）

~~~typescript
// @ts-expect-error
const name: string = 599;

// @ts-expect-error 下一行没有类型错误
const age: number = 599; // 错误使用此指令，报错
~~~

### 针对文件（全局指令）

`@ts-nocheck`：忽略整个文件的类型检查

~~~typescript
// @ts-nocheck 以下代码均不会抛出错误
const name: string = 599;
const age: number = 'linbudu';
~~~

`@ts-check`：在js文件中启用ts类型检查

~~~javascript
// @ts-check
/** @type {string} */
// @ts-expect-error 可搭配@ts-expect-error或略下一行的类型检查
const myName = 599; // 报错！与 JSDoc 标注类型不同

let myAge = 18;
myAge = '200'; // 报错！
~~~



## 类型声明



### .d.ts类型文件

`.d.ts`结尾的文件里的类型定义会被TS自动加载到环境中，实现项目中类型的补充。



### declare

#### 基本含义

`declare let xxx: someType;`：declare加上一个变量的声明与类型标注，但不能赋值，**表示作用域中存在`xxx`这个变量，其类型为`someType`。**

也可以declare后跟`function`类型声明、`interface`以及`class`等，如下：

~~~typescript
declare var f1: () => void;

declare interface Foo {
  prop: string;
}

declare function foo(input: Foo): Foo;

declare class Foo {}
~~~

但是我们一般不会手动去写`.d.ts`类型文件，而是让我们的`ts`逻辑代码在编译时除了生成js逻辑代码之外自动生成其对应的`.d.ts`类型声明文件（以供使用我们的逻辑代码的人引入类型）。



#### 定义模块

`index.ts`：

~~~typescript
import { foo } from 'pkg'; // 压根不存在pkg这个模块
import bar from 'pkg';
~~~

这个代码肯定运行就报错，我们通过declare定义模块的方式解决这个类型检查报错。

只需要写一个`.d.ts`文件，`.d.ts`类型文件里的类型会被ts自动加入环境，：

~~~typescript
declare module 'pkg' {
    export let foo: number;
    let bar: (name: string) => number;
    export default bar;
}
~~~

这样在`index.ts`中，ts就知道‘pkg’为一个模块，首先模块导入不报错，而且foo是模块里普通导出的一个number类型的变量，bar是模块默认导出的一个`(name: string) => number`类型的函数。



#### 拓展已有的类型定义

如下：

~~~typescript
console.log(window.jrd) // 报错：Property 'jrd' does not exist on type 'Window & typeof globalThis'.(2339)
~~~

我们想拓展window的类型，加上一个jrd属性，所以我们可以从`Window`这个接口入手，这肯定是ts内置的对于window对象进行类型描述的接口，我们可以利用**多个接口定义会进行合并**的特点，来拓展`Window`接口：

~~~typescript
interface Window {
  jrd: string
}
console.log(window.jrd) // 不再报错，Window.jrd: string
~~~



#### 三斜线指令

针对于类型文件的导入语法，只能放在文件顶部，如下：

~~~typescript
/// <reference path="./other.d.ts" />
/// <reference types="node" />
/// <reference lib="dom" />
~~~

* path就是导入项目本地的类型文件
* types指导入`@types/xxx`的三方类型包，如上就相当于导入`@types/node`这个包。
* lib指向ts内置的一些类型文件，如上相当于导入`lib.dom.d.ts`，使用 `/// <reference lib="esnext.promise" />`，那么导入的依赖的就是 `lib.esnext.promise.d.ts` 文件。



#### namespace

本质上namespace编译后就是一个对象，**namespace内部`export`的属性会挂载到对象身上。言外之意也表明，namespace类似于枚举，都是属于js逻辑部分的，而不单纯属于ts类型部分。**

也就是说在ts中我们想利用`namespace`进行变量分类的话，想对外暴露的内部的可用属性都需要`export`：

~~~typescript
namespace obj {
  export let name: string = '123';
}

console.log(obj.name);
~~~

编译后js：

~~~js
var obj;
(function (obj) {
    obj.name = '123';
})(obj || (obj = {}));
console.log(obj.name);
~~~

如果namespace内不`export`，那么编译结果为：

~~~js
var obj;
(function (obj) {
    let name = '123';
})(obj || (obj = {}));
console.log(obj.name);
~~~

所以`console.log(obj.name)`报错：Property 'name' does not exist on type 'typeof obj'.(2339)

##### 使用实例

我们项目中接入一些支付相关的三方sdk，又把这些sdk根据货币的真实性分为两类，则可编码：

~~~typescript
export namespace RealCurrency {
  export class WeChatPaySDK {}

  export class ALiPaySDK {}

  export class MeiTuanPaySDK {}

  export class CreditCardPaySDK {}
}

export namespace VirtualCurrency {
  export class QQCoinPaySDK {}

  export class BitCoinPaySDK {}

  export class ETHPaySDK {}
}
~~~

其它模块使用：

~~~typescript
const weChatPaySDK = new RealCurrency.WeChatPaySDK();
~~~



## 类型导入

ts中的类型可以当作js变量，导入都是相似的

可以与js变量写在一起：

~~~typescript
import { Foo, FooType } from "./foo";
~~~

可以分开两行写，并用`type`标识类型变量：

~~~typescript
import { Foo } from "./foo";
import type { FooType } from "./foo";
~~~

ts4.6之后也可以合并为一行：

~~~typescript
import { Foo, type FooType } from "./foo";
~~~



### react导入语句规范

* 第一部分——react模块中的引入：一般最上面会是 React；
* 第二部分——组件：第三方 UI 组件，然后是项目内封装的其他组件；
* 第三部分——工具：先是第三方工具库，然后是项目内封装的工具方法，具体 hooks 和 utils 等分类的顺序可以按照自己偏好来；
* 第四部分——类型：类型导入，包括第三方库的类型导入、项目内的类型导入等；
* 第五部分——样式：样式文件，CSS-IN-JS 方案的组件应该被放在第二条中其他组件部分。

示例如下：

~~~react
import { useEffect } from 'react';

import { Button, Dialog } from 'ui';
import { ChildComp } from './child';

import { store } from '@/store'
import { useCookie } from '@/hooks/useCookie';
import { SOME_CONSTANTS } from '@/utils/constants';

import type { FC } from 'react';
import type { Foo } from '@/typings/foo';
import type { Shared } from '@/typings/shared';

import styles from './index.module.scss';
~~~



## 应用never类型代码严谨性

利用ts的类型分析能力，typeof使类型收窄，下面的每个分支`strOrNumOrBool`都是一个具体的类型，到了最后的`else`分支`strOrNumOrBool`的类型就是`never`，**`never`类型的变量只能用`never`类型来赋值才不报错**，下面的ts代码也永远不会走到`else`分支，所以不会报错。

但是当我们拓展`strOrNumOrBool`的类型可能时，比如多联合一个`Function`类型，经过前三个判断分支的类型收窄后，else中其类型为`Function`，将其赋值给`never`类型就会报错，这也就起到了提示我们为`Function`类型单独写一个逻辑处理分支的作用。

~~~typescript
declare const strOrNumOrBool: string | number | boolean;
if (typeof strOrNumOrBool === "string") {
    // 一定是字符串！
  strOrNumOrBool.charAt(1);
} else if (typeof strOrNumOrBool === "number") {
  strOrNumOrBool.toFixed();
} else if (typeof strOrNumOrBool === "boolean") {
  strOrNumOrBool === true;
} else {
  const _exhaustiveCheck: never = strOrNumOrBool;
  throw new Error(`Unknown input type: ${_exhaustiveCheck}`);
}
~~~



## 类型断言

说白了就是强行修改某个变量的类型为指定类型，如下将unknown类型断言到一个具体的类型：

~~~typescript
let unknownVar: unknown;

(unknownVar as { foo: () => {} }).foo();
~~~

**类型断言的正确使用方式是，在 TypeScript 类型分析不正确或不符合预期时，将其断言为此处的正确类型，避免as any的使用！**



## 双重断言

类型断言时可能前后类型差异过大，也会导致ts报错，所以需要先断言为`unknown/any`然后再断言为目标类型，借助中间类型来“减少差异”

~~~typescript
const str: string = "linbudu";

(str as unknown as { handler: () => {} }).handler();

// 使用尖括号断言
(<{ handler: () => {} }>(<unknown>str)).handler();
~~~



## 非空断言

`!`跟在变量之后，表示强制告诉ts语法检查：这个变量非`undefined`或者`null`

`!`与可选链`?`操作符的区别在于：可选链更像是一个存在js逻辑的逻辑相关的操作符，`?`跟在一个变量之后表示如果这个变量为空就不进行后续的操作了，等价于`if(xxx) { xxx }`，但是`!`只是针对ts语法检查去进行处理，合适的使用可以减少ts类型检查报错，但是编译后的js代码还是会运行整个存在非空断言的语句，也就是说如果某个中间值为空，后续的逻辑就会报错。

实战场景：

### React refs 的事件处理

[React refs](https://link.juejin.cn?target=https%3A%2F%2Freactjs.org%2Fdocs%2Frefs-and-the-dom.html) 可以用来访问 HTML 节点 DOM。`ref.current` 的值有时可能是 null（这是因为引用的元素还没有 mounted）。

在很多情况下，我们能确定 current 元素已经 mounted，因此，`null` 是不需要的。

在接来下的示例中，当点击按钮时 input 会滚动到可视区域：

```javascript
const ScrolledInput = () => {
   const ref = React.createRef<HTMLInputElement>();

   const goToInput = () => ref.current.scrollIntoView(); //compilation error: ref.current is possibly null

   return (
       <div>
           <input ref={ref}/>
           <button onClick={goToInput}>Go to Input</button>
       </div>
   );
};
```

我们知道当 `goToInput` 执行时，input 元素一定是 mounted。我们可以大胆假设 `ref.current` 是非空的：

~~~typescript
//...
   
   const goToInput = () => ref.current!.scrollIntoView(); //all good!
   
//...
~~~

逻辑与也可以解决编译时的空值问题，其实就相当于类型缩窄，但是就比较啰嗦了：

~~~typescript
//...

const goToInput = () => ref.current && ref.current.scrollIntoView();

//...
~~~



## 类型别名

`type <类型名> = <具体类型>`

~~~typescript
type StatusCode = 200 | 301 | 400 | 500 | 502;

const status: StatusCode = 502;
~~~





## 类型工具

`type`定义类型别名时使用泛型，类型标注时用具体的类型代替类型工具中的泛型即返回一个具体的类型：

~~~typescript
type MaybeNull<T> = T | null; // 类型工具

function process(input: MaybeNull<{ handler: () => {} }>) { // MaybeNull<{ handler: () => {} }>为具体的类型：{ handler: () => {} } | null
  input?.handler();
}
~~~



## type 与 interface

可以用 type（Type Alias，类型别名）来代替接口结构描述对象，而更推荐的方式是，interface 用来描述**对象、类的结构**，而类型别名用来**将一个函数签名、一组联合类型、一个工具类型等等抽离成一个完整独立的类型**。



## 交叉类型

即（用`&`连接若干个类型）所表示的类型，需要满足其中的每一个小类型才满足这个交叉类型：

~~~typescript
// 基本示例：
type StrAndNum = string & number; // never

// 对象类型相&形成的交叉类型相当于对象属性合并，并且同层级的重名属性也进行&形成交叉类型
// 普通对象合并：
interface NameStruct {
  name: string;
}

interface AgeStruct {
  age: number;
}

type ProfileStruct = NameStruct & AgeStruct;

const profile: ProfileStruct = {
  name: "linbudu",
  age: 18
}

// 存在同名属性的对象交叉——同名属性也相&：
type Struct1 = {
  primitiveProp: string;
  objectProp: {
    name: string;
  }
}

type Struct2 = {
  primitiveProp: number;
  objectProp: {
    age: number;
  }
}

type Composed = Struct1 & Struct2;

type PrimitivePropType = Composed['primitiveProp']; // never
type ObjectPropType = Composed['objectProp']; // { name: string; age: number; }

// 联合类型相&形成的交叉类型——按定义来即可，同时满足所有联合类型，也就是每个联合类型的构成小类型的交集
type UnionIntersection1 = (1 | 2 | 3) & (1 | 2); // 1 | 2
type UnionIntersection2 = (string | number | symbol) & string; // string
~~~



## 索引签名类型

索引签名类型的一个常见场景是在重构 JavaScript 代码时，为内部属性较多的对象声明一个 any 的索引签名类型，以此来暂时支持**对类型未明确属性的访问**，并在后续一点点补全类型：

```typescript
interface AnyTypeHere {
  [key: string]: any; // 表示此类型对象的key为string类型（数字与Symbol也可以，obj[123]时会进行类型转换），value为any类型
}
```



## 索引类型查询

`keyof`后跟一个对象类型，返回一个由所有key的字面量值组成的联合类型（**不会将数字类型的键名转换为字符串类型字面量，而是仍然保持为数字类型字面量**）：

~~~typescript
interface Foo {
  linbudu: 1,
  599: 2
}

type FooKeys = keyof Foo; // "linbudu" | 599
~~~



## 索引类型访问

通过`xxxInterface[xxxType]`可以访问（返回）`xxxType`类型的属性对应的value的类型：

~~~typescript
interface NumberRecord {
  [key: string]: number;
}

type PropType = NumberRecord[string]; // number

// 如下Foo['propA']中的'propA'其实是字面量类型，通过方括号[]访问某个接口，方括号[]内与返回值一定都是类型,而非key！
interface Foo {
  propA: number;
  propB: boolean;
}

type PropAType = Foo['propA']; // number
type PropBType = Foo['propB']; // boolean

// 类型访问搭配keyof（访问联合类型，返回联合类型）
interface Foo {
  propA: number;
  propB: boolean;
  propC: string;
}

type PropTypeUnion = Foo[keyof Foo]; // string | number | boolean
~~~



## 对象类型映射

其实就是一个固定的类型遍历语法：

~~~typescript
// Clone这个类型工具接收一个对象类型T，它的索引签名类型使用 k in <联合类型> 的形式表示所有的索引类型，其中联合类型是通过keyof T的形式获得的，也就是T这个对象类型的所有key组成的联合类型
type Clone<T> = {
  [K in keyof T]: T[K];
};
~~~

demo：

~~~typescript
type Stringify<T> = {
  [K in keyof T]: string;
};

interface Foo {
  prop1: string;
  prop2: number;
  prop3: boolean;
  prop4: () => void;
}

// 使用Stringify类型工具，内部使用类型映射
type StringifiedFoo = Stringify<Foo>;
// 等价于
interface StringifiedFoo {
  prop1: string;
  prop2: string;
  prop3: string;
  prop4: string;
}
~~~



## typeof类型查询

首先ts代码中的`typeof`的作用是返回某个变量的类型，这并不影响原本js中`typeof`的功能，ts项目中查询类型的`typeof`只会出现在类型代码中，比如类型标注和类型别名的定义；而逻辑代码，比如`while(typeof name === 'string')`这种还是js中原本的`typeof`。

类型层的`typeof`会尽可能地类型收窄，也就是偏向于返回字面量类型。

~~~typescript
const myName = 'jinrongda';

console.log(typeof myName === 'string') // 逻辑层代码：输出true

type nameT = typeof myName; // 类型层代码：type nameT = "jinrongda"
~~~



## 类型守卫/类型保护/类型收窄/类型缩小

**也就是类似于`if`、`switch`这种分支语句的条件中，一些特定的操作可以对操作的联合类型进行类型精确化。**

首先明确，if中的条件判断属于逻辑部分，所以类型守卫可以理解为某些js逻辑触发了变量类型的推导。

所以我们需要明确js逻辑能触发类型的收窄：

### 1、typeof

首先经过`typeof`判断的分支内部变量的类型是精确的，然后往下进入下一个分支之前联合类型的变量会减少上一个分支对应的类型。

~~~typescript
function foo (input: string | number) {
  if(typeof input === 'string') {
    input.slice(0, 1);  // input: string
  }
  if(typeof input === 'number') {
    input /= 2;  // input: number
  }
  // ...
}
~~~

### 2、类型谓词is

某些返回值为布尔类型的类型判断函数，当条件判断中调用它时，ts不会自动进行类型收窄，所以需要我们利用is手动指明：当函数返回true时入参为什么类型

~~~typescript
function isString(input: unknown): input is string { // isString返回true时，告诉调用此函数的位置，入参input为string类型
  return typeof input === "string";
}

function foo(input: string | number) {
  if (isString(input)) {
    // 正确了
    (input).replace("linbudu", "linbudu599")
  }
  if (typeof input === 'number') { }
  // ...
}
~~~

两个开发常用的类型判断函数（类型守卫函数）：

~~~typescript
export type Falsy = false | "" | 0 | null | undefined;

export const isFalsy = (val: unknown): val is Falsy => !val;

// 不包括不常用的 symbol 和 bigint
export type Primitive = string | number | boolean | undefined;

export const isPrimitive = (val: unknown): val is Primitive => ['string', 'number', 'boolean' , 'undefined'].includes(typeof val);
~~~



### 3、独有属性结合in运算符区分可辨识联合类型

Foo独有foo属性，Bar独有bar属性，所以`Foo | Bar`就是可辨识联合类型，利用`<独有属性> in <可辨识联合类型>`即可进行类型收窄。

~~~typescript
interface Foo {
  foo: string;
  fooOnly: boolean;
  shared: number;
}

interface Bar {
  bar: string;
  barOnly: boolean;
  shared: number;
}

function handle(input: Foo | Bar) {
  if ('foo' in input) {
    input.fooOnly; // (parameter) input: Foo
  } else {
    input.barOnly; // (parameter) input: Bar
  }
}
~~~



### 4、字面量类型判等来区分可辨识联合类型

除了独有属性搭配in来判断，如果两种类型有一个属性是字面量类型，那么字面量类型判等也可以实现类型收窄

~~~typescript
interface Foo {
  kind: 'foo';
  diffType: string;
  fooOnly: boolean;
  shared: number;
}

interface Bar {
  kind: 'bar';
  diffType: number;
  barOnly: boolean;
  shared: number;
}

function handle1(input: Foo | Bar) {
  if (input.kind === 'foo') {
    input.fooOnly;
  } else {
    input.barOnly;
  }
}
~~~



### 5、isArray收窄原类型为数组类型

~~~typescript
function ensureArray(input: number | number[]): number[] {
  if (Array.isArray(input)) {
    return input;
  } else {
    return [input];
  }
}
~~~



### 6、对象拥有同名不同类型的属性时，typeof无法做到类型收窄

~~~typescript
function handle2(input: Foo | Bar) {
  // 报错，并没有起到区分的作用，在两个代码块中都是 Foo | Bar
  if (typeof input.diffType === 'string') {
    input.fooOnly;
  } else {
    input.barOnly;
  }
}
~~~



### 7、instanceof

~~~typescript
class FooBase {}

class BarBase {}

class Foo extends FooBase {
  fooOnly() {}
}
class Bar extends BarBase {
  barOnly() {}
}

function handle(input: Foo | Bar) {
  if (input instanceof FooBase) {
    input.fooOnly();
  } else {
    input.barOnly();
  }
}
~~~



## 泛型



### 类型别名type中的泛型

带有泛型的类型别名等价于类型函数，泛型作为函数入参，返回一个类型。

~~~typescript
// 接收一个interface类型，返回的类型：输入类型的所有属性类型都转为string
type Stringify<T> = {
  [K in keyof T]: string;
};

// 完全克隆输入的interface类型
type Clone<T> = {
  [K in keyof T]: T[K];
};

// 给输入的interface类型的所有属性都变成可选参数
type Partial<T> = {
    [P in keyof T]?: T[P];
};
// demo：
interface IFoo {
  prop1: string;
  prop2: number;
  prop3: boolean;
  prop4: () => void;
}

type PartialIFoo = Partial<IFoo>;

// 等价于
interface PartialIFoo {
  prop1?: string;
  prop2?: number;
  prop3?: boolean;
  prop4?: () => void;
}
~~~



### 泛型支持默认类型（看如下综合demo）



### 泛型约束extends（看如下综合demo）

在泛型定义时可以用`extends`来增加对它的限制，让传入的类型必须符合要求：

- 更精确，如**字面量类型是对应原始类型的子类型**，即 `'linbudu' extends string`，`599 extends number` 成立。类似的，**联合类型子集均为联合类型的子类型**，即 `1`、 `1 | 2` 是 `1 | 2 | 3 | 4` 的子类型。
- 更复杂，**`InterfaceA extends InterfaceB`表示接口A必须实现接口B的所有属性，可以多，但不能少**。如 `{ name: string }` 是 `{}` 的子类型，因为在 `{}` 的基础上增加了额外的类型，基类与派生类（父类与子类）同理。



### extends搭配三元运算符（看如下综合demo）

**extends在指定类型时可以搭配三元运算符，注意是“指定”类型，比如`type myType<T> = xxx`泛型坑位`<>`里面声明T这是类型的定义，而后面的xxx中就是类型的指定，可以理解为type函数的函数体。**



### 综合demo

~~~typescript
// ResCode extends number限制泛型ResCode只能为数字类型，默认值为10000
// “type函数体”中使用三元运算决定这个ResStatus函数究竟返回'success'还是'failure'
type ResStatus<ResCode extends number = 10000> = ResCode extends 10000 | 10001 | 10002
  ? 'success'
  : 'failure';

type Res4 = ResStatus; // "success"
~~~



### 泛型之间关联

也就是说不管是泛型坑位，还是`type`函数体中的类型指定中，可以（借助`extends`）让泛型与泛型之间产生关系：

~~~typescript
// type函数体的返回值：由Type extends Condition的真假决定，四个泛型之间产生了关系
type Conditional<Type, Condition, TruthyResult, FalsyResult> =
  Type extends Condition ? TruthyResult : FalsyResult;

//  "passed!"
type Result1 = Conditional<'linbudu', string, 'passed!', 'rejected!'>;

// "rejected!"
type Result2 = Conditional<'linbudu', boolean, 'passed!', 'rejected!'>;


// 如下type类型的“函数体”纯属瞎写，重点在于泛型坑位中，三个泛型产生了联系
type ProcessInput<
  Input,
  SecondInput extends Input = Input,
  ThirdInput extends Input = SecondInput
> = number;
~~~



### 对象类型interface中的泛型

`interface`接口与`type`类似，可以预留泛型坑位来变成`interface`”类型函数“。

如下实例，说白了就是泛型参数的填充罢了。

~~~typescript
// 获取分页的用户信息列表
function fetchPaginationUserProfileList() {
    let p = new Promise((resolve,) => {
        // ...通过ajax获取的异步数据
        const result = {
            code: 101,
            error: 'xxxx',
            data: {
                data: {
                    name: 'jinRongDa',
                    age: 18,
                    avatar: 'xxx'
                },
                page: 11,
                totalCount: 100,
                hasNextPage: true,
            }
        }
        resolve(result);
    })
    return p;
}

// 给上述方法添加类型
interface IRes<TData = unknown> { // 请求响应数据的通用的interface类型
  code: number;
  error?: string;
  data: TData;
}

interface IPaginationRes<TItem = unknown> { // 分页请求的interface类型
  data: TItem[];
  page: number;
  totalCount: number;
  hasNextPage: boolean;
}

interface IUserProfileRes { // 用户信息interface类型
  name: string;
  homepage: string;
  avatar: string;
}

function fetchUserProfileList(): Promise<IRes<IPaginationRes<IUserProfileRes>>> {}
~~~



### 函数中的泛型

首先函数中使用泛型，目的可以概括为：**给入参、返回值、函数体内部的变量，三者之间的类型添加类型关系（联系）**。

（函数调用时，一般情况下我们就没必要显式传入泛型了，因为根据入参ts会自动推断，目的就是使入参、返回值、内部变量之间保持一定的类型关系）

举几个例子：

#### 1、限制入参与返回值类型统一

假设我们有这么一个函数，它可以接受多个类型的参数并进行对应处理，比如：

- 对于字符串，返回部分截取；
- 对于数字，返回它的 n 倍；
- 对于对象，修改它的属性并返回。

~~~typescript
function handle<T>(input: T): T {}
~~~

#### 2、交换二元组的元素位置，如何标注返回值？

~~~typescript
function swap<T, U>([start, end]: [T, U]): [U, T] {
  return [end, start];
}

swap([123, 'jrd']); // 类型提示：function swap<number, string>([start, end]: [number, string]): [string, number]
~~~

#### 3、限制函数入参之间的关系（pick函数）

lodash 的 pick 函数，这个函数首先接受一个对象，然后接受一个对象属性名组成的数组，并从这个对象中截取选择的属性部分：

使用示例：

~~~js
const object = { 'a': 1, 'b': '2', 'c': 3 };

_.pick(object, ['a', 'c']);
// => { 'a': 1, 'c': 3 }
~~~

类型标注：

~~~typescript
// 首先第一个入参object的类型T需要是对象，所以用T extends object来限制
// 第二个数组参数的key值需要是object中的属性，数组元素的类型需要为object对象属性的联合类型的子类型，所以U extends keyof T，自然数组props的元素类型为U
pick<T extends object, U extends keyof T>(object: T, ...props: Array<U>): Pick<T, U>;
~~~

#### 4、泛型被函数体内部使用

~~~typescript
function handle<T>(payload: T): Promise<[T]> {
  return new Promise<[T]>((res, rej) => {
    res([payload]);
  });
}
~~~

#### 5、箭头函数的泛型

~~~typescript
const handle = <T>(input: T): T => {}
~~~

tsx 文件中泛型的尖括号可能会造成报错，编译器无法识别这是一个组件还是一个泛型，此时你可以让它长得更像泛型一些：

~~~typescript
const handle = <T extends any>(input: T): T => {}
~~~

#### 6、避免无意义的泛型

如最初所说，函数泛型是用来描述入参，返回值，函数体内部变量之间关系的，如下函数，泛型的消费者只有入参，这是没有意义的。

~~~typescript
function handle<T>(arg: T): void {
  console.log(arg);
};
~~~



### class中的泛型

`class`中的泛型与函数泛型不太一样，有点类似于没有返回值的函数，因为`class`的泛型只被`class`内部消费，有可能作为`constructor`的参数类型，有可能作为方法的参数类型。

如下demo，`Queue`接收一个`TElementType`泛型，其构造函数的入参类型，以及一些方法的入参和返回值都使用了这个类型：

~~~typescript
class Queue<TElementType> {
  private _list: TElementType[];

  constructor(initial: TElementType[]) {
    this._list = initial;
  }

  // 入队一个队列泛型子类型的元素
  enqueue<TType extends TElementType>(ele: TType): TElementType[] {
    this._list.push(ele);
    return this._list;
  }

  // 入队一个任意类型元素（无需为队列泛型子类型）
  enqueueWithUnknownType<TType>(element: TType): (TElementType | TType)[] {
    return [...this._list, element];
  }

  // 出队
  dequeue(): TElementType[] {
    this._list.shift();
    return this._list;
  }
}

// class使用示例：
const queue = new Queue<number>([123]);
~~~





### 内置方法中的泛型

1、Promise的泛型坑位的类型与`resolve`参数的类型一致（填充成功原因的类型）

~~~typescript
function p() {
  return new Promise<boolean>((resolve, reject) => {
    resolve(true);
  });
}
~~~

2、数组泛型与元素类型一致

~~~typescript
const arr: Array<number> = [1, 2, 3];
~~~

3、`Array.reduce`当初始值为空数组`[]`时，需要标注数组类型，不然默认推导数组类型为`never[]`，导致报错

~~~typescript
arr.reduce<number[]>((prev, curr, idx, arr) => {
  return prev;
}, []);
~~~



## 条件类型

条件类型就是“类型函数体”中的`A extends B ? xxx : xxx`，一般`A`就是传入的泛型，说白了**条件类型的作用就是通过`if-else`的逻辑来进一步修改返回的类型**，至于泛型坑位里面（`type test<A extends B> = xxx`）的`extends`作用是对泛型入参进行限制。

~~~typescript
// 将字面量类型转为对应的原始数据类型
export type LiteralToPrimitive<T> = T extends number // 若T为如123的数字字面量，则满足T extends number，我们指定此工具类型返回number类型
	? number
	: T extends bigint
	? bigint
	: T extends string
	? string
	: never;


// 如下FunctionConditionType类型，首先通过T extends Func对泛型入参进行限制：必须是一个函数，这个不是条件类型
// 然后FunctionConditionType类型函数体中判断T是否为一个返回值为string的函数，最终根据extends的结果返回两个不同的字面量
type Func = (...args: any[]) => any;

type FunctionConditionType<T extends Func> = T extends (
  ...args: any[]
) => string
  ? 'A string return func!'
  : 'A non-string return func!';

//  "A string return func!"
type StringResult = FunctionConditionType<() => string>;
~~~



## infer关键字

### infer思想

`A extends B`条件类型判断的是条件类型这一个整体的正确性，最终在三元运算中类似于反馈给我们一个布尔值，但是我们想获取`B`的局部类型，比如`B`是一个函数，那么我们想获取它的返回值类型，然后在三元运算符的分支中使用：

~~~typescript
// 如下FunctionReturnType类型函数，我们接收一个泛型T，在类型函数体中，我们用extends判断T是否为一个函数。
// 但是函数的返回值为infer R，其实表示我们判断T extends xxx => infer R的真假时不用考虑返回值是否匹配了，只要T的是一个函数（不管返回值），那么我们就把它的返回值记为R，供后续分支逻辑中使用。
type FunctionReturnType<T> = T extends (
  ...args: any[]
) => infer R
  ? R
  : never;

// 我们可以改进一下FunctionReturnType类型函数，限制T必须为函数
// 如下，已经在泛型填充阶段就对T进行了限制，后续类型函数体中再写extends的原因就是“语法层面”了，infer只能在条件语句中使用
// infer的使用场景：A extends B，B是一个包含多个类型的结构类型（比如函数结构，包含了返回值、入参的类型），那么可以用infer X替换掉结构中的某个类型
// 表示extends类型判断时不再追究这个局部类型，然后这个A中这个位置的局部类型是啥那么就用infer后面的变量记录下来，供后续分支逻辑使用。
type Func = (...args: any[]) => any;
type FunctionReturnType<T extends Func> = T extends (
  ...args: any[]
) => infer R
  ? R
  : never;
~~~

上面把函数类型比喻成一个结构类型（包含多个类型的结构类型），结构类型中每个局部类型位置都可以用`infer`。除了函数外，数组也是“结构类型”：

~~~typescript
// T extends any[]限制泛型入参为一个任意数组类型
// 条件类型T extends [infer A, infer B]只判断T是否为一个二元组，并不在乎两个元素的类型（因为两个元素都使用infer忽略了对其类型的检查）
type Swap<T extends any[]> = T extends [infer A, infer B] ? [B, A] : T; 

type test = Swap<[number, string]> // 返回类型[string, number]
type test2 = Swap<[1, 2, 3]>; // 不符合条件类型，因为不是二元组，返回 [1, 2, 3]
~~~



### infer推断联合类型

**条件类型`A extends B`的`B`中如果多个`infer`后跟同一个变量，如下`U`，那么变量最终的类型为不同位置的`infer`推出的类型的联合类型**

~~~typescript
type Foo<T> = T extends { a: infer U; b: infer U } ? U : never;

type T10 = Foo<{ a: string; b: string }>; // T10类型为 string
type T11 = Foo<{ a: string; b: number }>; // T11类型为 string | number

// (infer R)[]表示T为一个不确定元素类型的数组，我们用infer推断其元素类型
type ElementOf<T> = T extends (infer R)[] ? R : never;

type TTuple = [string, number];
type Union = ElementOf<TTuple>; // Union 类型为 string | number
~~~



### infer解包

因为`infer`本身就是获取某个结构的局部类型，所以如果我们拿到这个局部类型后返回，本质就是一种“解包”（由整体获取局部）

#### 获取数组的元素类型

~~~typescript
// 使用条件类型不使用infer，那么我们需要自主编写所有的逻辑（extends什么后返回什么）
type Ids = number[];
type Names = string[];

type Unpacked<T> = T extends Names ? string : T extends Ids ? number : T;

type idType = Unpacked<Ids>; // idType 类型为 number
type nameType = Unpacked<Names>; // nameType 类型为string

// 使用infer
type Unpacked<T> = T extends (infer R)[] ? R : T; // 通过infer获取数组元素类型并返回

type idType = Unpacked<Ids>; // idType 类型为 number
type nameType = Unpacked<Names>; // nameType 类型为string
~~~



#### 获取`Promise<xxx>`的`xxx`类型

**本质上就是获取某些带有泛型的`type`的泛型入参，Promise就是一个带有泛型的type，我们想获取某个`Promise`类型的泛型，那么直接使用infer即可，如下：**

~~~typescript
type MyResponse = Promise<number[]>;
// 我们可以先在泛型坑位里用extends限制入参为Promise类型，然后在条件类型中使用infer获取Promise类型的入参类型
type Unpacked<T extends Promise<any>> = T extends Promise<infer R> ? R : T;

type resType = Unpacked<MyResponse>; // resType 类型为number[]
~~~



#### react中useReducer函数类型定义中infer的使用

~~~typescript
type Reducer<S, A> = (prevState: S, action: A) => S;
type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never; // 首先泛型坑位中extends限制R为一个Reducer类型；然后在条件类型中根据传入的泛型推断Reducer的第一个泛型参数

function useReducer<R extends Reducer<any, any>>(
  reducer: R,
  initialState: ReducerState<R>,
): [ReducerState<R>, Dispatch<ReducerAction<R>>];
~~~

如上解包Promise与Reducer，本质可以简写为：

~~~typescript
type testType<T> = T;

type unPacked<T extends testType<any>> = T extends testType<infer R> ? R : never; // unPacked接收一个要解包的type（拥有泛型的type），然后通过infer直接反手拿到其泛型的类型

type test = unPacked<testType<number>>;
~~~





## react中使用ts



### 组件声明

#### 返回值标注—JSX.Element

如下，其实我们不显式标注返回`JSX.Element`，ts也能正确的类型推导出来

~~~typescript
export interface IContainerProps {
  visible: boolean;
  controller: () => void;
}

const Container = (props: IContainerProps): JSX.Element => {
  return <p>我没k！</p>;
};

export default Container;
~~~

> JSX 是一个命名空间，来自于 `@types/react`。ts会自动导入项目里`node_modules/@types/xxx`的所有类型定义。

#### 组件类型标注—FC

如下，`Container`函数直接被标注为了一个FC类型，即一个函数组件

~~~typescript
import React from 'react';

export interface IContainerProps {
  visible: boolean;
  controller: () => void;
}

const Container: React.FC<IContainerProps> = ({
  visible = false,
  controller = () => {},
}: IContainerProps) => {
  return <p>林不渡！</p>;
};
~~~

FC接口如下，可以看到调用签名部分，其实就是给泛型多加了个`children`属性，然后其它就是一些可以给组件函数添加的属性，比如`defaultProps`等。

~~~typescript
interface FunctionComponent<P = {}> {
  (props: PropsWithChildren<P>, context?: any): ReactElement<any, any> | null;
  propTypes?: WeakValidationMap<P> | undefined;
  contextTypes?: ValidationMap<any> | undefined;
  defaultProps?: Partial<P> | undefined;
  displayName?: string | undefined;
}

type PropsWithChildren<P> = P & { children?: ReactNode | undefined };
~~~

**FC并不是完美的，因为他严格描述了函数变量的类型细节，所以一些场景下会带来麻烦。**

比如在组件库开发中常见一个场景：我们使用一个组件同时这个组件作为命名空间（组件身上还挂载了一些子组件），如`Form.Item`，我们需要用交叉类型给这个父组件补充上子组件：

~~~typescript
import * as React from 'react';

// 如下交叉类型表示：Table组件本身是一个FC类型，它还有个Column属性也是FC类型
const Table: React.FC<{}> & {
  Column: React.FC<IColumnProps>;
} = () => {
  return <></>;
};

interface IColumnProps {}

const Column: React.FC<IColumnProps> = () => {
  return <></>;
};

Table.Column = Column;
~~~

对于简单函数来说就无需如此，因为我们只是标注了简单函数的`props`类型以及返回值类型为`JSX.Element`并没有对函数对象做更多的限制，所以如上我们想给函数组件挂载另一个组件作为属性，就非常容易：

~~~typescript
const Table = (): JSX.Element => {
  return <></>;
};

interface IColumnProps {}

const Column = (props: IColumnProps): JSX.Element => {
  return <></>;
};

Table.Column = Column;
~~~



### hook泛型坑位——useState

useState 声明中对是否提供初始值的两种情况做了区分重载，如下，对于没有提供初始值的情况，state 的类型是`S | undefined`。

~~~typescript
// 提供了默认值
function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

// 没有提供默认值
function useState<S = undefined>(): [S | undefined, Dispatch<SetStateAction<S | undefined>>];
~~~

对于某些业务场景，state的初始值是一个空对象，但是不推荐用类型断言把它标记为目标类型，因为这样会导致后续某些地方使用这个数据时某些属性的缺失不被发现：

~~~typescript
// 不推荐
const [data, setData] = useState<IData>({} as IData);

// 一个方案：用Partial标记其属性可能不存在
const [data, setData] = useState<Partial<IData>>({});
~~~



### useCallback

**`useCallback`的泛型等于其返回值的类型等于函数入参的类型，我们一般无需主动为`useCallback`提供泛型参数，使其默认推导即可**，因为我们已经明确传入了函数入参。

~~~typescript
// 泛型推导为 (input: number) => boolean
const handler1 = useCallback((input: number) => {
	return input > 599;
}, []);

// 显式提供为 (input: number, compare: boolean) => boolean，没必要
const handler2 = useCallback<(input: number, compare: boolean) => boolean>(
	(input: number) => {
		return input > 599;
	},
	[]
);
~~~



### useMemo

**`useMemo`的泛型等于其返回值的类型，一般会为 useMemo 提供泛型参数**，因为我们希望通过这种方式来约束 useMemo 最后的返回值。

~~~typescript
// 推导为 string
const result1 = useMemo(() => {
	return 'some-expensive-process';
}, []);

// 显式提供
const result2 = useMemo<{ name?: string }>(() => {
	return {};
}, []);
~~~



### useReducer

先看一下`useReducer`函数的类型定义：

~~~typescript
type Reducer<S, A> = (prevState: S, action: A) => S;
type ReducerState<R extends Reducer<any, any>> = R extends Reducer<infer S, any> ? S : never;

// 我们看下useReducer中入参，以及返回值之间的联系
// 首先，只有一个useReducer只有一个泛型R，通过extends限制其为一个Reducer（函数）类型，它的第一个参数reducer就是R类型，意为限制第一个参数应该是Reducer类型的一个函数
// 然后第二个参数initialState类型为ReducerState<R>，我们看ReducerState类型，其限制了它的泛型入参为Reducer类型，它的逻辑就是通过infer拿到Reducer类型的第一个泛型类型
// 返回值数组的第一个元素自然也是与initialState同类型
function useReducer<R extends Reducer<any, any>>(
  reducer: R,
  initialState: ReducerState<R>,
): [ReducerState<R>, Dispatch<ReducerAction<R>>];
~~~

**所以在React使用`useReducer`时只需要标注好第一个入参`Reducer`函数的类型**，那么其类型关系自然就被确定好了，如下示例，我们标注好了`reducer`函数的state的类型以及action的类型：

~~~tsx
import { useReducer } from 'react';

const initialState = { count: 0 };

type Actions =
  | {
      type: 'inc';
      payload: {
        count: number;
        max?: number;
      };
    }
  | {
      type: 'dec';
      payload: {
        count: number;
        min?: number;
      };
    };

function reducer(state: typeof initialState, action: Actions) {
  switch (action.type) {
    case 'inc':
      return {
        count: action.payload.max
          ? Math.min(state.count + action.payload.count, action.payload.max)
          : state.count + action.payload.count,
      };
    case 'dec':
      return {
        count: action.payload.min
          ? Math.max(state.count + action.payload.count, action.payload.min)
          : state.count - action.payload.count,
      };
    default:
      throw new Error('Unexpected Action Received.');
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <>
      Count: {state.count}
      <button
        onClick={() =>
          dispatch({ type: 'dec', payload: { count: 599, min: 0 } })
        }
      >
        -(min: 0)
      </button>
      <button
        onClick={() =>
          dispatch({
            type: 'inc',
            payload: {
              count: 599,
              max: 599,
            },
          })
        }
      >
        +(max: 599)
      </button>
    </>
  );
}
~~~



### useRef

**概括来说就是当useRef用来绑定dom时，需要显式传入dom的类型作为泛型参数，并且入参传null**

首先`useRef`的作用有两个，第一个就是把`useRef`返回的对象`xxx`当作一个容器，`xxx.current`用来持久化存储数据；第二个作用就是把`xxx`传递给dom元素的`ref`属性。

针对两个不同的作用`useRef`的返回值类型也是不同的，`useRef`的源码中通过函数重载来实现，`useRef`有三个重载签名：

> ts中的函数重载并不同于其它语言，一个函数名有多个函数实现，ts中的重载只是一个函数有多个类型定义，然后一个统一所有类型的通用函数实现，函数调用时会按函数定义的顺序从上到下匹配第一个符合的类型定义。说白了ts中的函数重载只是为了能有更精确的类型提示。

~~~typescript
// 下面三个重载签名按顺序定义
// 也就是说如果随便传入一个initialValue而不传入泛型参数，比如useRef(123)，第一个重载签名都可以匹配上，所以返回值是MutableRefObject<T>（mutable：可变的）
function useRef<T>(initialValue: T): MutableRefObject<T>;
// 第二个重载签名返回值为RefObject<T>，也就是对应绑定dom元素的情况，那么我们如何在项目中使其匹配第二个重载签名呢：首先我们需要在泛型参数中传入我们要绑定的dom元素的类型，然后initialValue初始化为null
// 如：useRef<HTMLDivElement>(null)，因为根据显式传入的泛型参数HTMLDivElement所以推断T为HTMLDivElement，但是initialValue类型为null，自然第一个重载签名就不匹配了，第二个正好匹配，最终useRef返回值类型为RefObject
function useRef<T>(initialValue: T|null): RefObject<T>;
// 如果useRef调用时没传initialValue，那么就会匹配第三个重载签名
function useRef<T = undefined>(): MutableRefObject<T | undefined>;

// 写个简单的demo模拟一下useRef函数重载类型的实现
function useRef<T>(initialValue: T): 'MutableRefObject<T>';
function useRef<T>(initialValue: T | null): 'RefObject<T>';
function useRef<T = undefined>(): 'MutableRefObject<T | undefined>';

function useRef(initialValue?: any) {
  return 123 as any;
}

let test = useRef(); // let test: "MutableRefObject<T | undefined>"

let test2 = useRef<number>(null); // let test2: "RefObject<T>"

let test3 = useRef(123); // let test3: "MutableRefObject<T>"
~~~

> HTMLDivElement 这一类型来自于 TypeScript 内置，在使用 ref 来引用 DOM 元素时，你应当使用尽可能精确的元素类型，如 HTMLInputElement、HTMLIFrameElement 等，而不是 HTMLElement 这样宽泛的定义，因为这些精确元素定义的内部封装了更加具体的类型定义，包括 HTML 属性、事件入参等。



### `@types/react`中的内置事件类型

可以给函数的事件对象标注类型，也可以直接给函数标注类型（事件对象的类型也会自动推断得到）

~~~jsx
import { useState } from 'react';
// 从react中导入类型
import type { ChangeEvent, MouseEvent } from 'react';

const Container = () => {
  const [v, setV] = useState('linbudu');
	
  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {}; // 标注事件对象：输入框改变时对应的事件对象ChangeEvent

  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {};

  return (
    <>
      <input value={v} onChange={handleChange} />
      <button onClick={handleClick}>Click me!</button>
    </>
  );
};
~~~

直接标注函数类型：

~~~jsx
import type { ChangeEventHandler } from 'react';

const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {};
~~~



### CSS对象类型

某些js对象描述的是css样式，那么可以用**CSSProperties**类型来标注（css是一个语言，每个样式key-value以`;`结尾，css对象自然还是一个对象，以`,`分隔key-value属性）

~~~tsx
import type { CSSProperties } from 'react';

export interface IContainerProps {
  style: CSSProperties;
}

const css: CSSProperties = {
  display: 'flex',
  alignContent: 'center',
  justifyContent: 'center',
};

const Container = ({ style }: IContainerProps): JSX.Element => {
  return <p style={style}>林不渡！</p>;
};
~~~



### 工程实践（小册内容cv）

介绍了上面的项目配置与组件声明、泛型坑位相关内容以后，我们其实已经基本了解了 React 项目中使用 TypeScript 的注意事项。然而，还有一些概念涉及到项目的规范部分，我们在这里统一进行讲解。

需要注意的是，这些项目规范具有强烈的个人偏好风格，它们并不是必须严格遵守的规则，只是我个人在项目开发中习惯使用的一套规范，你可以按照自己的喜好来调整这些规范。

#### 项目中的类型声明文件

在实际应用中使用 TypeScript 进行开发时，我们往往需要大量的类型代码，而如何存放这些类型代码，其实就需要预先有一个明确的规范。目前我使用的方式是，在项目中使用一个专门的文件夹存放类型代码，其中又按照这些类型的作用进行了划分，其分布大致是这样的：

```text
PROJECT
├── src
│   ├── types
│   │   ├── shared.ts
│   │   ├── [biz].ts
│   │   ├── request.ts
│   │   ├── tool.ts
│   ├── typings.d.ts
└── tsconfig.json
```

我们来依次讲解下这些类型声明文件的作用：

- `shared.ts`，被其他类型定义所使用的类型，如简单的联合类型封装、简单的结构工具类型等。

- `[biz].ts`，与业务逻辑对应的类型定义，比如 `user.ts` `module.ts` 等，推荐的方式是在中大型项目中尽可能按照业务模型来进行细粒度的拆分。

- `request.ts`，请求相关的类型定义，推荐的方式是定义响应结构体，然后使用 biz 中的业务逻辑类型定义进行填充：

  ```typescript
  import type { Status } from "./shared";
  
  export interface IRequestStruct<TData = never> {
      status: Status;
      code: number;
      data: TData;
  }
  
  export interface IPaginationRequestStruct<TData = never> {
      status: Status;
      curPage: number;
      totalCount: number;
      hasNextPage: boolean;
      data: TData[];
  }
  ```

  实际使用时：

  ```typescript
  import type { IPaginationRequestStruct } from "@/types/request";
  import type { IUserProfile } from "@/types/user";
  
  export function fetchUserList: Promise<IPaginationRequestStruct<IUserProfile>> {}
  ```

  通过这种方式，你的类型代定义之间就能够建立起清晰的、和业务逻辑一致的引用关系。

- `tool.ts`，工具类型定义，一般是推荐把比较通用的工具类型抽离到专门的工具类型库中，这里只存放使用场景特殊的部分。

- `typings.d.ts`，全局的类型声明，包括非代码文件的导入、无类型 npm 包的类型声明、全局变量的类型定义等等，你也可以进一步拆分为 `env.d.ts` `runtime.d.ts` `module.d.ts` 等数个各司其职的声明文件。

在实际场景中，这一规范的粒度并不一定能够满足你的需要，但你仍然可以按照这一思路进行类型定义的梳理和妥善放置。另外，我们并不需要将所有的类型定义都专门放到这个文件夹里，比如仅被组件自身消费的类型就应该使用就近原则，直接和组件代码一起即可。

#### 组件与组件类型

在 React 父子组件中一个常见的场景是，父组件导入各个子组件，传递属性时会进行额外的数据处理，其结果的类型被这多个子组件共享，而这个类型又仅被父子组件消费，不应当放在全局的类型定义中。此时我推荐的方式是，将这个类型定义在父组件中，子组件使用仅类型导入去导入这个类型，由于值空间与类型空间是隔离的，因此我们并不需要担心循环引用：

```tsx
// Parent.tsx

import { ChildA } from "./ChildA";
import { ChildB } from "./ChildB";
import { ChildC } from "./ChildC";

//  被多个子组件消费的类型
export interface ISpecialDataStruct {}

const Parent = () => {
  const data: ISpecialDataStruct = {};

  return (
    <>
    <ChildA inputA={data} />
    <ChildB inputB={data} />
    <ChildC inputC={data} />
    </>
  )
}

// ChildA.tsx
import type { ISpecialDataStruct } from "./parent";

interface IAProp {
  inputA: ISpecialDataStruct;
}

export const ChildA: FC<IAProp> = (props) => {
  // ...
}
```