拾忆🍂

外观

TS

约 15204 字大约 51 分钟

2025-11-20

注意

包管理从始至终使用同一个

学习

ES6 入门教程 - ECMAScript 6入门 (ruanyifeng.com)

提示

此文档包含ES6及TS语法

node & npm

安装

Node.js — Download Node.js® (nodejs.org)

验证

node -v
npm -v

配置

  1. 首先, 找到node的安装路径

    D:\software\nodejs

    • Windows

      where node

    • Linux/macOS

      whereis node
# 或
which node

  2. 在此目录下创建两个文件夹

    • node_global

    • node_cache

  3. 在控制台分别运行以下两条命令(注意改成自己的路径)

    # 全局模块插件存放路径
npm config set prefix "D:\software\nodejs\node_global"
# 缓存路径
npm config set cache "D:\software\nodejs\node_cache"

  4. 配置npm安装源

    # 阿里云源
npm config set registry "https://registry.npmmirror.com/"

# 华为云源
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

  5. 把 D:\software\nodejs\node_global\node_modules 添加到系统环境变

    变量名: NODE_PATH 变量值: D:\software\nodejs\node_global\node_modules

  6. 验证

    npm config get prefix
npm config get cache
npm config get registry

  7. (可选)

    更新到最新版本 npm install npm@latest -g

    更新到指定版本 npm -g install npm@6.8.0

常用命令

# 查看npm配置
npm config list

# 查看当前版本（查看项目中某个包是否安装好）
npm list <package-name>
# 查看是否全局安装
npm list -g <package-name>

# 清理缓存
npm cache clean --force
# 验证缓存
npm cache verify
## 清空项目中的npm缓存、包等等数据
rm -rf node_modules .pnpm-store .cache

版本相关

# 查看可用更新 [全局]
npm outdated [-g] <package-name>

# 按 semver 规则更新到兼容版本 [全局]
npm update [-g] <package-name>

# 下载/更新到 最新版（强制更新到最新版本，不管是否大版本升级） [全局]
npm install [-g] <package-name>@latest

# 下载/更新到 特定版本 [全局]
npm install [-g] <package-name>@<version>

# 查看远程仓库中某个包的所有历史版本
npm view <package-name> versions
# 查看远程仓库中某个包的最新版本
npm view <package-name> version
# 查看该包的详细信息（包括依赖、作者等）
npm view <package-name>

yarn

安装

npm install -g yarn

验证

yarn config get registry
# 或者
yarn config list

配置

  1. 配置镜像源

    # 淘宝源
yarn config set registry "https://registry.npmmirror.com/"

# 华为云源
yarn config set registry https://mirrors.huaweicloud.com/repository/npm/

  2. 修改全局安装目录

    yarn config set global-folder "D:\software\nodejs\node_global"

  3. 修改bin目录

    # 在全局安装目录下新建./bin目录
yarn config set prefix "D:\software\nodejs\node_global"
# 会自动设置成./bin

  4. 修改缓存目录

    yarn config set cache-folder "D:\software\nodejs\node_cache"

  5. 验证所有配置

    yarn config list

    查看当前yarn的bin的位置

    yarn global bin

    查看当前yarn的全局安装位置

    yarn global dir

常用命令

npm init === yarn init

npm install === yarn 或者 yarn install

npm install taco --save === yarn add taco

npm uninstall taco --save === yarn remove taco

npm install taco --save-dev === yarn add taco --dev

npm update --save === yarn upgrade

npm install taco@latest --save === yarn add taco

npm install taco --global === yarn global add taco

npm init --yes/-y === yarn init --yes/-y

npm link === yarn link

npm outdated === yarn outdated

npm publish === yarn publish

npm run === yarn run

npm cache clean === yarn cache clean

npm login === yarn login

npm test === yarn test
初始化项目:
yarn init // 同npm init，执行输入信息后，会生成package.json文件

yarn的配置项：
yarn config list // 显示所有配置项
yarn config get <key> //显示某配置项
yarn config delete <key> //删除某配置项
yarn config set <key> <value> [-g|--global] //设置配置项

安装包：
yarn install //安装package.json里所有包，并将包及它的所有依赖项保存进yarn.lock
yarn install --flat //安装一个包的单一版本
yarn install --force //强制重新下载所有包
yarn install --production //只安装dependencies里的包
yarn install --no-lockfile //不读取或生成yarn.lock
yarn install --pure-lockfile //不生成yarn.lock

添加包（会更新package.json和yarn.lock）：
yarn add [package] // 在当前的项目中添加一个依赖包，会自动更新到package.json和yarn.lock文件中
yarn add [package]@[version] // 安装指定版本，这里指的是主要版本，如果需要精确到小版本，使用-E参数
yarn add [package]@[tag] // 安装某个tag（比如beta,next或者latest）

//不指定依赖类型默认安装到dependencies里，你也可以指定依赖类型：
yarn add --dev/-D // 加到 devDependencies
yarn add --peer/-P // 加到 peerDependencies
yarn add --optional/-O // 加到 optionalDependencies

//默认安装包的主要版本里的最新版本，下面两个命令可以指定版本：
yarn add --exact/-E // 安装包的精确版本。例如yarn add foo@1.2.3会接受1.9.1版，但是yarn add foo@1.2.3 --exact只会接受1.2.3版
yarn add --tilde/-T // 安装包的次要版本里的最新版。例如yarn add foo@1.2.3 --tilde会接受1.2.9，但不接受1.3.0

发布包
yarn publish

移除一个包
yarn remove <packageName>：移除一个包，会自动更新package.json和yarn.lock

更新一个依赖
yarn upgrade 用于更新包到基于规范范围的最新版本

运行脚本
yarn run 用来执行在 package.json 中 scripts 属性下定义的脚本

显示某个包的信息
yarn info <packageName> 可以用来查看某个模块的最新版本信息

缓存
yarn cache
yarn cache list # 列出已缓存的每个包 yarn cache dir # 返回 全局缓存位置 yarn cache clean # 清除缓存

pnpm

内容可寻址存储 + 硬链接：

  • 全局存储： PNPM 在本地磁盘上维护一个内容可寻址的存储库。所有从网络下载的包都会被整齐地存储在这个全局目录中（通常在 ~/.pnpm-store）。
  • 硬链接： 当你为项目安装依赖时，PNPM 并不会复制文件，而是在项目的 node_modules 目录中创建指向全局存储中文件的硬链接。

安装

npm install -g pnpm

配置

其他参考上方npm，配置方式都一样；

全局存储位置

  • 方法一：使用环境变量

    设置 PNPM_STORE_DIR 环境变量：

    # 临时设置（当前终端会话有效）
set PNPM_STORE_DIR=E:\new\path\to\pnpm-store

# 或者在 Windows 系统中永久设置：
# 1. 右键"此电脑" → 属性 → 高级系统设置
# 2. 环境变量 → 新建系统变量
# 3. 变量名: PNPM_STORE_DIR
# 4. 变量值: E:\new\path\to\pnpm-store

  • 方法二：使用 pnpm config 命令

    # 设置全局 store 路径
pnpm config set store-dir E:\new\path\to\pnpm-store

# 或者针对当前项目设置
pnpm config set store-dir E:\new\path\to\pnpm-store --location project

  • 方法三：在 .npmrc 文件中配置 在项目根目录的 .npmrc 文件或用户目录的 .npmrc 文件中添加：

    store-dir=E:\new\path\to\pnpm-store

提示

迁移现有store

  1. 停止所有正在运行的 Node.js 应用

  2. 复制现有 store 到新位置

  3. 设置新的 store 路径（使用上述方法之一）

  4. 删除旧的 store 目录（可选）

  5. 验证配置是否生效

    # 检查当前 store 配置
pnpm config get store-dir

# 或者查看所有配置
pnpm config list

常用命令

# 安装生产依赖（dependencies）
pnpm add <package-name>
# 安装开发依赖（devDependencies）
pnpm add -D <package-name>
# 全局安装
pnpm add -g <package-name>

# 移除开发依赖
pnpm remove <package-name>
## 如果包同时存在于多个依赖类型中
## 明确指定从开发依赖中移除
pnpm remove -D <package-name>
## 从生产依赖中移除
pnpm remove -S <package-name>

# 更改依赖类型
## 从开发依赖改为生产依赖
pnpm remove -D <package-name>
pnpm add -S <package-name>

## 从生产依赖改为开发依赖
pnpm remove -S <package-name>
pnpm add -D <package-name>
pnpm install
# 临时使用官方源
pnpm install --registry=https://registry.npmjs.org/

# 根据 package.json 中的版本范围更新包
pnpm update`
# 忽略版本范围，直接更新到最新版本
pnpm update --latest
# 更新指定包
pnpm update <package>
# 在工作区中递归更新所有包
pnpm update -r

# 删除 node_modules
pnpm remove . --global
# 清理当前项目的依赖
pnpm prune
# 清理不在被任何项目依赖的包
pnpm store prune

nvm🥳

链接：

提示

原理：nvm创建一个固定名称的文件夹软链接动态指向某个版本的node文件夹。

Windows

注意

nvm 安装路径一定不要包含空格！在某些包中可能会产生奇怪问题...

  • 将压缩包解压到应用安装位置，命名 nvm

  • 管理员运行 install.bat 或者 install.cmd

    • 这一步应该会提示输入 nvm 解压之后的路径，例如 D:\software\nvm

  • 之后会在上方文件夹内创建一个 settings.txt ，修改其中的配置

    • root: nvm 安装路径（就算路径内包含空格也不需要使用 "" 包裹，下同。）
    • path: nodejs 的软链接路径（不需要手动创建这个文件夹，在使用 nvm use 之后会自动创建）

  • 新增环境变量

    • NVM_HOME: 对应上方 root 路径
    • NVM_SYMLINK: 对应上方 path
    • Path里加入：%NVM_HOME%，%NVM_SYMLINK%

  • nvm 软件源

    # 设置为 阿里云镜像
nvm node_mirror https://npmmirror.com/mirrors/node/
nvm npm_mirror https://npmmirror.com/mirrors/npm/

# 设置为 华为云镜像
nvm node_mirror https://mirrors.huaweicloud.com/nodejs/
nvm npm_mirror https://mirrors.huaweicloud.com/npm-software/

# 验证
nvm node_mirror
nvm npm_mirror

  • npm 源

    # 设置为 阿里云源
npm config set registry "https://registry.npmmirror.com/"

# 设置为 华为云源
npm config set registry https://mirrors.huaweicloud.com/repository/npm/

# 验证
npm config list

  • 通过settings.txt 配置（可选）

    node_mirror: https://npmmirror.com/mirrors/node/
npm_mirror: https://npmmirror.com/mirrors/npm/

    保存后生效。

    提示

    恢复官方默认镜像：

    nvm node_mirror https://nodejs.org/dist/
nvm npm_mirror https://github.com/npm/cli/archive/

使用

Windows
# 验证安装
nvm version

# 查看可安装的 Node.js 版本
nvm list available

# 安装指定版本
nvm install 18.18.0

# 使用已安装的版本
nvm use 18.18.0

# 查看已安装的版本
nvm list

库

库名安装启动命令备注
json-servernpm install -g json-serverjson-server data.json
# 配置参数(实时监测 + 自定义端口)
json-server data.json --watch --port 3000		1. GitHub - typicode/json-server
2. json-server 详解(cnblogs.com)
mockjsnpm install -g mockjsD:\WorkSpace\TypeScript\mock1. 修改server.js
2. node server.js
3. 保存为json
http-servernpm install -g http-serverhttp-server -p 8899 -o --cors可以将当前文件夹当成服务器根目录
可以访问静态html页面、播放本地视频
expressnpm install expressnode xxx.js直接运行js文件（将用js来处理http请求）
sort-package-jsonnpm install -g sort-package-jsonsort-package-json package.json排序当前项目中的package.json可以省略参数，直接执行：
sort-package-json

  • http-server

    警告

    当做视频服务器的时候，播放4K等高清视频可能会由于性能不及 python 的 http.server 库而导致卡顿。

    • 自己测试的时候，超过 100Mbps（10MB/s） 的网络请求时，就已经有明显卡顿，但python库不会。
    -p 端口号 (默认 8080)
-a IP 地址 (默认 0.0.0.0)
-d 显示目录列表 (默认 'True')
-i 显示 autoIndex (默认 'True')
-e or --ext 如果没有提供默认的文件扩展名(默认 'html')
-s or --silent 禁止日志信息输出
--cors 启用 CORS via the Access-Control-Allow-Origin header
-o 在开始服务后打开浏览器
-c 为 cache-control max-age header 设置Cache time(秒) , e.g. -c10 for 10 seconds (defaults to '3600'). 禁用 caching, 则使用 -c-1.
-U 或 --utc 使用UTC time 格式化log消息
-P or --proxy Proxies all requests which can't be resolved locally to the given url. e.g.: -P http://someurl.com
-S or --ssl 启用 https
-C or --cert ssl cert 文件路径 (default: cert.pem)
-K or --key Path to ssl key file (default: key.pem).
-r or --robots Provide a /robots.txt (whose content defaults to 'User-agent: *\nDisallow: /')

  • express（模仿下载clash的配置文件，真是的使用了gzip压缩了文件，示例代码里注释掉了，因为浏览器会自动解压，用其他应用来请求则需要自己处理解压数据）

    const express = require('express');
const fs = require('fs');
const path = require('path');
// const zlib = require('zlib');

const app = express();
const port = 2333;

// 文件路径
const filePath = path.join(__dirname, 'iggfeed.yaml'); // 确保文件a.yaml在同一目录下

// http://192.168.3.33:2333/file/clash-config
app.get('/file/clash-config', (req, res) => {
  // 检查文件是否存在
  fs.stat(filePath, (err, stats) => {
    if (err) {
      return res.status(404).send('File not found');
    }

    // 设置响应头
    res.setHeader('Content-Disposition', 'attachment; filename=iggfeed.yaml');
    // 要求客户端使用gzip解压缩响应
    // res.setHeader('Content-Encoding', 'gzip');
    res.setHeader('Content-Type', 'text/html; charset=utf-8');
    res.setHeader('Content-Length', stats.size);

    // 创建文件读取流
    const readStream = fs.createReadStream(filePath);

    // 创建gzip压缩流
    // const gzipStream = zlib.createGzip();

    // 管道传输：读取文件 -> 压缩 -> 返回响应
    // readStream.pipe(gzipStream).pipe(res);
    readStream.pipe(res);
  });
});

// 启动服务器
app.listen(port, () => {
  console.log(`Success: File server is running at http://192.168.3.33:${port}/file/clash-config`);
});

版本符号释义

文档

箭头函数

限制返回值类型

在 TypeScript 中，箭头函数的参数冒号右边的类型表示对该参数的类型进行限制。这是 TypeScript 中的函数参数类型注解，用于指定参数的预期类型。

例如，在以下箭头函数中：

codeconst exampleFunction = (x: number, y: string): void => {
  // 函数体
};

这里的 (x: number, y: string) 表示函数 exampleFunction 接受两个参数，其中 x 应该是一个 number 类型，y 应该是一个 string 类型。冒号右边的 void 则表示该函数没有返回值。

对于箭头函数的返回值类型，可以通过冒号及其右边的类型注解来指定。例如：

codeconst exampleFunction = (): number => {
  return 42;
};

这里的 (): number 表示该箭头函数不接受任何参数，而返回值应该是一个 number 类型。箭头函数的返回值类型注解是可选的，TypeScript 通常可以通过类型推断来自动推断函数的返回值类型。

在 Vue 3 中，使用 data 函数的方式和 Vue 2 中有一些不同。Vue 3 引入了 Composition API，其中的 setup 函数取代了 Vue 2 中的 data 函数。在 setup 函数中，你可以使用 ref、reactive 等 Composition API 提供的函数来创建响应式数据。

以下是一个简单的对比：

——————————

JS -> TS

从 JavaScript 转到 TypeScript 时，有一些语法和概念上的变化需要注意。以下是一些关键点：

1. 类型注解

允许你明确地指定变量、函数参数和返回值的类型。

// 基本类型
let name: string = "John";
let age: number = 25;
let isStudent: boolean = true;

// 函数参数、返回值类型注解
function greet(name: string): string {
  return `Hello, ${name}`;
}

提示

TypeScript 能自动推断变量类型，无需显式声明：

let message = "Hello, world!"; // 自动推断为 string 类型

2. 联合类型（Union Types）

联合类型允许一个变量可以是多种类型之一。

let id: number | string
id = 101		// 合法
id = "202"		// 合法

3. 类型别名（Type Aliases）

为复杂类型创建别名：

type Point = {
  x: number
  y: number
}

let point: Point = {
  x: 10,
  y: 20
}

4. 类型断言（Type Assertions）

类型断言（Java中叫泛型）用于告诉编译器变量的具体类型。在这两种语法中，编译器将 someValue 视为 string 类型，因此可以访问 string 类型的方法和属性，例如 length。

let someValue: any = "this is a string";

// 尖括号语法
let strLength: number = (<string>someValue).length;

// as 语法
let strLength: number = (someValue as string).length;

提示

类型断言的应用场景

  1. 从 any 类型中恢复类型信息，如上。

  2. 操作 DOM 元素时，类型断言可以告诉编译器元素的具体类型，从而访问特定类型的方法和属性。

     let inputElement = document.getElementById("myInput") as HTMLInputElement;
 inputElement.value = "Hello, World!";

  3. 在处理联合类型时，类型断言可以帮助编译器确定变量的具体类型。

     function getLength(value: string | number): number {
   if ((value as string).length !== undefined) {
     return (value as string).length;
   } else {
     return value.toString().length;
   }
 }

    注意事项

    • 类型断言不会改变运行时的类型检查，它只是影响编译时的类型检查。
    • 在使用类型断言时需要谨慎，确保你对类型的判断是正确的，否则可能会导致运行时错误。

5. 接口（Interfaces）

接口用于定义对象的结构（可以确保对象符合特定的形状）。

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

let john: Person = {
  name: "John",
  age: 25
};

6. 枚举（Enums）

枚举用于定义一组命名的常量。

// 数字枚举（没有赋值的默认情况，值为从 `0` 开始依次递增 `1` 的数字类型）
enum Direction {
  Up,    // 0
  Down,  // 1
  Left,  // 2
  Right  // 3
}

let dir: Direction = Direction.Up; // 0

// 字符串枚举
enum Direction {
  Up = 'UP',
  Down = 'DOWN',
  // ... 其他属性
}
// 这样 Direction.Up 就相当于输入了字符串 `'UP'`

7. 元组（Tuples）

元组允许你定义一个已知元素数量和类型的数组。

let tuple: [string, number];
tuple = ["hello", 10];

可选元素

type OptionalTuple = [string, number?];
const a: OptionalTuple = ["Hello"];		// 合法（第二个元素可选）
const b: OptionalTuple = ["Hello", 42];	// 合法

剩余元素：类似数组展开语法，允许可变长度：

type StringNumberBooleans = [string, ...number[], boolean];
const c: StringNumberBooleans = ["TS", 1, 2, 3, true]; // 合法

解构赋值 与 函数返回值

元组常用于解构或返回多个值：

// 函数返回元组
function getUser(): [string, number] {
  return ["Bob", 25];
}

// 解构赋值
const [name, age] = getUser();
console.log(name); // "Bob"
console.log(age);  // 25

只读元组

通过 readonly 或 as const 创建不可变元组：

const readOnlyTuple: readonly [string, number] = ["Alice", 30];
readOnlyTuple = "Bob"; // 报错：只读属性不可修改

// 使用 as const 断言
const tupleConst = ["Alice", 30] as const; // 类型为 readonly ["Alice", 30]

8. 类型守卫（Type Guards）

类型守卫用于在代码中进行类型检查：

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

一些常见场景：

typeof 1			// 'number'
typeof '1'			// 'string'
typeof undefined	// 'undefined'
typeof true			// 'boolean'
typeof Symbol()		// 'symbol'
typeof null			// 'object' (JavaScript 历史遗留问题，使用 `变量 === null` 来判断)

typeof []			// 'object'
typeof {}			// 'object'
typeof console		// 'object'
typeof console.log	// 'function'

从上面例子，前6个都是基础数据类型。虽然 typeof null 为 object ，但这只是 JavaScript 存在的一个悠久 Bug，不代表 null 就是引用数据类型，并且 null 本身也不是对象。

同时，可以发现引用类型数据，用 typeof 来判断的话，除了 function 会被识别出来之外，其余的都输出 object。

判断一个变量是否存在，可以使用 typeof ：

if(typeof a !== 'undefined'){
    //变量存在
}

注意

不能使用 if(a) ， 若 a 未声明，则报错。

和 instanceOf 区别

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

使用如下：

object 为实例对象，constructor 为构造函数

构造函数通过 new 可以实例对象，instanceof 能判断这个对象是否是之前那个构造函数生成的对象：

// 定义构建函数
let Car = function() {}
let benz = new Car()
benz instanceof Car			// true
let car = new String('xxx')
car instanceof String		// true
let str = 'xxx'
str instanceof String		// false

关于 instanceof 的实现原理，可以参考下面：

function myInstanceof(left, right) {
    // 这里先用typeof来判断基础数据类型，如果是，直接返回false
    if(typeof left !== 'object' || left === null) return false;
    // `getProtypeOf` 是 `Object` 对象自带的 API，能够拿到参数的原型对象（仅上层一层）
    let proto = Object.getPrototypeOf(left);
    while(true) {                  
        if(proto === null) return false;
        if(proto === right.prototype) return true;//找到相同原型对象，返回true
        proto = Object.getPrototypeof(proto);
    }
}

也就是顺着原型链去找（原型链是嵌套一层一层的），直到找到相同的原型对象，返回 true ，否则为 false 。

总结：

typeof 与 instanceof 都是判断数据类型的方法，但都不能满足所有场景的需求。区别如下：

  • typeof 会返回一个变量的基本类型，instanceof 返回的是一个布尔值
  • instanceof 可以准确地判断复杂引用数据类型，但是不能正确判断基础数据类型
  • 而 typeof 也存在弊端，它虽然可以判断基础数据类型（ null 除外），但是引用数据类型中，除了 function 类型以外，其他的也无法判断

重要

判断数据类型通用方法：

通过使用 Object.prototype.toString.call(obj) 方法，该方法统一返回格式 "[object Xxx]" 的字符串，其中 Xxx 就是变量 obj 的数据类型：

提示

为什么要加上 .call() 是为了将 toString() 方法内部的 this 绑定到 obj 上 。

 Object.prototype.toString.call({})              // "[object Object]"
 Object.prototype.toString.call(1)               // "[object Number]"
 Object.prototype.toString.call('1')             // "[object String]"
 Object.prototype.toString.call(true)            // "[object Boolean]"
 Object.prototype.toString.call(function(){})    // "[object Function]"
 Object.prototype.toString.call(null)            // "[object Null]"
 Object.prototype.toString.call(undefined)       // "[object Undefined]"
 Object.prototype.toString.call(/123/g)          // "[object RegExp]"
 Object.prototype.toString.call(new Date())      // "[object Date]"
 Object.prototype.toString.call([])              // "[object Array]"
 Object.prototype.toString.call(document)        // "[object HTMLDocument]"
 Object.prototype.toString.call(window)          // "[object Window]"

了解了 toString.call() 的基本用法，下面就实现基本类型和引用类型通用的判断方法:

function getType(obj){
    // 先进行typeof判断，如果是基础数据类型，直接返回
    let type  = typeof obj
    if (type !== "object") {
        return type;
    }
    // 对于 `typeof` 返回结果是 `object` 的，再进行如下的判断，正则返回结果
    return Object.prototype.toString.call(obj).replace(/^\[object (\S+)\]$/, '$1'); 
}

// 使用
getType([])             // "Array" typeof []是object，因此toString返回
getType('123')          // "string" typeof 直接返回
getType(window)         // "Window" toString返回
getType(null)           // "Null"首字母大写（`typeof null` 结果是 `object`）
getType(undefined)      // "undefined" typeof 直接返回
getType()               // "undefined" typeof 直接返回
getType(function(){})   // "function" typeof能判断，因此首字母小写
getType(/123/g)         // "RegExp" toString返回

9. 类（Classes）

TypeScript 扩展了 JavaScript 的类，使其更强大和类型安全。

class Animal {
    // 属性
    name: string;
    // 构造函数
    constructor(name: string) {
        this.name = name;
    }
    // 方法
    move(distance: number = 0) {
        console.log(`${this.name} moved ${distance} meters.`);
    }
}

// 实例化对象
let dog = new Animal("Dog");
dog.move(10);

/* 构造器语法糖（参数属性） */
class Student {
    constructor(public name: string, public age: number) {}
}
// 等价于
class Student {
    name: string;

    constructor(name: string) {
        this.name = name;
    }
}

提示

ES6 引入 class 语法后，函数 和 类（包括通过变量赋值的匿名类） 都自动具有 name 属性，类型为 `string 这是语言规范的一部分。

如上方示例代码中：

console.log(Animal.name) // 打印："Animal"

就像所有对象都有的 length、toString() 等等，因为他们都继承自 Object.prototype 原型链上的属性。

10. 模块（Modules）

TypeScript 使用 ES6 的模块系统，可以使用 import 和 export 关键字。 每个模块可以有一个默认导出（default export）和多个命名导出（named exports）。

静态导入

// math.ts
export function add(x: number, y: number): number {
  return x + y;
}
// 默认导出
export default sub(x: number, y: number): number {
  return x - y;
}

// main.ts
// 命名导入（命名导出在导入时必须使用导出时的名字，或者使用as关键字来重命名）
import { add } from './math';
// 默认导入（默认导出在导入时可以使用任何名字）
import sub from './math';
// 可以同时使用两种导入模式，中间使用逗号连接
import sub, { add } from './math';

console.log(add(5, 3));
console.log(sub(5, 3));

注意点

  1. exports 字段的 优先级：

    • 如果 package.json 中没有定义 exports （不建议，破坏模块的封装性）属性，则 Node.js 会默认加载 main 属性指定的文件。
    • 如果 package.json 中定义了 exports （建议），以精确控制模块的对外暴露路径，则所有未在 exports 中声明的子路径将无法访问（即使文件物理存在）。
    • 这是 Node.js 的强制规则，用于防止意外访问内部文件。
    场景无 exports 字段有 exports 字段
    入口文件优先级main 字段生效exports 覆盖 main
    子路径访问允许直接访问任意子路径文件仅允许访问 exports 声明的路径
    模块封装性低（易导致依赖内部实现）高（强制接口隔离）
    兼容性兼容旧版本 Node.js 和打包工具需较新 Node.js（≥12.0.0）支持

  2. 类型声明文件（.d.ts）：

    • 对于 TypeScript 项目，包需要提供类型声明（如 index.d.ts），否则即使代码存在，类型检查也会失败。

  3. 模块打包工具的影响：

    • Webpack/Rollup 等工具可能默认启用 exports 字段的严格解析，导致未声明的子路径导入失败。
场景能否访问其他文件导出？条件
直接导入包名仅主入口导出的内容主入口需显式导出
通过子路径导入✅ 可以包未限制 exports 或子路径在 exports 中声明
包使用严格 exports仅允许声明的路径未声明的子路径即使文件存在也会报错
主入口聚合所有导出✅ 可以主入口文件通过 export * 统一导出

动态导入

import() 导入规则和和静态导入的导入规则一致，其他区别在于：

  1. 运行时解析与条件加载 动态导入是运行时执行的，因此路径可以是动态生成的（如基于用户输入或环境变量）：

    const moduleName = someCondition ? 'utils' : 'other';
import(`package-name/$${moduleName}`).then(...);
    • 优势：支持按需加载和代码分割，减少初始加载体积。
    • 限制：若动态路径未在 exports 中声明，即使文件存在也会报错。

  2. 错误处理机制 静态导入在编译阶段会检查路径有效性，而动态导入的错误在运行时通过 Promise 捕获：

    // 静态导入：编译时报错
import { missing } from 'package-name'; // 直接报错

// 动态导入：运行时捕获
import('package-name/missing')
  .then(...)
  .catch(err => console.error('加载失败', err));

  3. 打包优化差异

    • 静态导入：打包工具（如 Webpack、Rollup）可静态分析依赖关系，实现 Tree Shaking（删除未使用代码）。
    • 动态导入：由于路径可能动态生成，打包工具难以提前分析，可能导致未使用的代码仍被包含在产物中。

——————————

TS & ES6

TypeScript 在其基础上支持并扩展了很多 ES6（ES2015） 的特性。以下用法和示例：

1. let 和 const

let 和 const 用于声明 块部作用域 局部变量，区别在于 let 变量可以重新赋值，而 const 变量不能重新赋值。

let mutableVariable = "I can change";
const immutableVariable = "I cannot change";

mutableVariable = "New value"; // 正常
// immutableVariable = "New value"; // 错误，const 变量不能重新赋值

2. 箭头函数

箭头函数提供了一种更简洁的函数语法，并且不会绑定自己的 this。

const add = (x: number, y: number): number => x + y;
console.log(add(5, 3)); // 输出: 8

3. 模板字符串

模板字符串使用反引号（`）包围，可以包含嵌入变量和表达式的模板。

let name = "John";
let message = `Hello, ${name}!`;
console.log(message); // 输出: Hello, John!

4. 解构赋值

解构赋值允许从数组或对象中提取值，并赋值给变量。

// 1. 数组解构
let [first, second] = [1, 2, 3];
console.log(first, second); // 输出: 1 2

// 2.1 对象解构
let person = { name: "Jane", age: 25 };
let { name, age } = person;
console.log(name, age); // 输出: Jane 25

// 2.2 重命名（相当于 personName = person.name）
const { name: personName, age: personAge } = person;
console.log(personName); // 'Jane'

嵌套对象的解构：解构 只提取你明确列出的变量（冒号后面是变量而不是 {} ） ，不会创建中间变量。

// 一个嵌套结构对象
const user = {
  id: 1,
  info: {
    name: '李四',
    address: {
      city: '上海',
      street: '南京路'
    }
  }
};

const { info: { name, address: { city } } } = user;
console.log(name); // '李四'
console.log(city); // '上海'
// console.log(info);    // ❌ 错误！info 未定义
// console.log(address); // ❌ 错误！address 未定义

// 上方解构等价于
const name = user.info.name;
const city = user.info.address.city;

提示

解释：

// 对象解构的模式
const { 
  属性名: 变量名或嵌套模式 
} = 源对象;

// 当冒号后面是：
// 1. 变量名 → 提取该属性的值赋给变量
// 2. { } → 继续向深层解构

如果想保留中间变量：

// 方式1：分层解构
const { info } = user;
const { name, address } = info;
const { city } = address;

console.log(info);    // { name: '李四', address: { city: '上海', street: '南京路' } }
console.log(address); // { city: '上海', street: '南京路' }
console.log(name);    // '李四'
console.log(city);    // '上海'


// 方式2：混合解构（同时提取中间变量和深层变量）
const { 
  info,                          // info 是变量
  info: { 
    name,                        // name 是变量
    address,                     // address 是变量
    address: { city }            // city 是变量
  } 
} = user;

console.log(info);    // { name: '李四', address: {...} }
console.log(address); // { city: '上海', street: '南京路' }
console.log(name);    // '李四'
console.log(city);    // '上海'

示例说明：

const obj = {
  a: 1,
  b: {
    c: 2,
    d: 3
  }
};

// a: aValue → 把 obj.a 的值赋给变量 aValue
// b: { c } → b 不是变量，继续解构 b，提取 c
const { a: aValue, b: { c } } = obj;

console.log(aValue); // 1
console.log(c);      // 2
// console.log(a);   // ❌ 错误
// console.log(b);   // ❌ 错误

重命名与嵌套的区别（这是最容易混淆的地方）：

const user = {
  name: '张三',
  info: {
    age: 25
  }
};

// 情况1：重命名（冒号后面是变量名）
const { name: userName } = user;
console.log(userName); // '张三'
// console.log(name);   // ❌ 错误

// 情况2：嵌套解构（冒号后面是花括号）
const { info: { age } } = user;
console.log(age); // 25
// console.log(info); // ❌ 错误

5. 默认参数

函数参数可以有默认值，当调用函数时未提供对应参数时使用默认值。

function greet(name: string = "Guest"): string {
  return `Hello, ${name}!`;
}
console.log(greet()); // 输出: Hello, Guest!
console.log(greet("John")); // 输出: Hello, John!

6. 展开操作符（Spread Operator）

展开操作符用于展开数组或对象。

// 数组展开
let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2); // 输出: [1, 2, 3, 4, 5]

// 对象展开
let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2); // 输出: { a: 1, b: 2, c: 3 }

7. 类（Classes）

ES6 类提供了一种更简单、更清晰的方式来创建对象和处理继承。

class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance} meters.`);
  }
}

let dog = new Animal("Dog");
dog.move(10); // 输出: Dog moved 10 meters.

8. 模块（Modules）

ES6 模块系统允许你通过 import 和 export 关键字导入和导出代码。

// math.ts - 导出
export function add(x: number, y: number): number {
  return x + y;
}
export default function sub(x: number, y: number): number {
  return x - y;
}

// main.ts - 导入
import { add } from './math';					// 命名导入
import sub from './math';						// 默认导入
import sub, { add } from './math';				// 混合导入
import * as math from './math';					// 命名空间导入
import sub, { add as addNumber } from './math';	// 使用别名导入

9. Promise

Promise 提供了一种处理异步操作的方式。

let promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    try {
      // 一些业务代码
      // ...
      if (一些业务逻辑) {
      	resolve("Success!");
      } else {
        // 手动包装异常，因为直接抛出业务自定义异常throw new XxxException()是同步异常，并不会被Promise调用链上的`catch`捕获到，需要包装成Promise异常，这里调用reject方法
        reject(new Error(""))
      }
    } catch (err) {
      console.error("Error in custom promise:", err);
      reject(new Error(""))
      // return Promise.reject(err);  // 把错误传递给 catch
    }
  }, 1000);
});

promise
  .then(result => {
  	console.log(result); // 一秒后输出: Success!
	})
  .catch(error => {
  	console.log("ERROR: ", error);
	});

调用链

调用链有三种需求：

  1. 期中有异常，统一处理异常并且中断调用链
  2. 期中有异常，分别处理每个then中的异常，并且中断调用链（和1的区别就是分别处理异常）
  3. 期中有异常，分别处理每个then中的异常，但是不中断调用链

异常时机：

  1. 同步异常：代码中运行时错误，或手动直接抛出的throw new Error()，不会被链式的catch捕获，会直接在控制台抛出这个异常。如果是在普通方法中发生了异常，那么这个方法会直接停止执行，这个方法中调用的未完成的Promise调用链也会停止执行。
  2. 异步异常：被包装成 Promise.reject(new XxxException("xxx")) 的错误，或是自定义Promise对象调用了``reject方法，这种异常才可以被调用链中的catch`捕获到。

示例代码：

定义调用链

function method1(): Promise<number> {
  return new Promise<number>((resolve, reject) => {
    setTimeout(() => {
      console.log("Method 1 executed");
      // 返回数字 10
      resolve(10);
    }, 200);
  });
}

function method2(value: number): Promise<string> {
  return new Promise<string>((resolve, reject) => {
    setTimeout(() => {
      console.log(`Method 2 executed with value: ${value}`);
      // 返回字符串
      resolve(`Result from method 2: ${value * 2}`);
    }, 200);
  });
}

function method3(value: string): Promise<boolean> {
  return new Promise<boolean>((resolve, reject) => {
    setTimeout(() => {
      try {
        /**
         * 模拟程序可能会发生异常
         * （这里没有使用直接throw错误，因为直接throw错误是同步错误，不会被调用链中的catch捕获到，会直接终止程序的运行并抛出该错误）
         * 如果需要让Promise调用链调用到就要使用`try-catch`包裹该代码，并在`catch`中调用`reject()`方法
         */
        Math.random() > 0.5 ? JSON.parse(`abcdefg`) : JSON.parse(`{"name": "enlin"}`);
        // throw new Error("Error occurred in method 3");
        console.log(`Method 3 executed with value: ${value}`);
        // 返回布尔值，字符串长度大于 10 时返回 true
        resolve(value.length > 10);
      } catch (err) {
        reject(err);
      }
    }, 200);
  });
}

function method4(value: boolean): Promise<void> {
  return new Promise<void>((resolve, reject) => {
    setTimeout(() => {
      console.log(`Method 4 executed with value: ${value}`);
      // 不返回值
      resolve();
    }, 200);
  });
}

function method5(): Promise<string> {
  return new Promise<string>((resolve, reject) => {
    setTimeout(() => {
      console.log("Method 5 executed");
      resolve("Final result from method 5");
    }, 200);
  });
}
  • ：期中有异常，统一处理异常，并且中断调用链
    method1()
  // 隐式 return，因为method2方法本身就返回了一个Promise对象
  .then((result1) => method2(result1))
  .then((result2) => method3(result2))
  .then((result3) => method4(result3))
  .then(() => method5())
  .then((finalResult) => {
    // 输出最终结果
    console.log(finalResult);
  })
  .catch((err) => {
    // 任何步骤出现错误，都会跳到这里，后续的步骤都不会继续执行
    console.error("#Error: occurred:", err);
  });

    • 运行结果

      // 无异常
Method 1 executed
Method 2 executed with value: 10
Method 3 executed with value: Result from method 2: 20
Method 4 executed with value: true
Method 5 executed
Final result from method 5

// 有异常
Method 1 executed
Method 2 executed with value: 10
Method 3 executed with value: Result from method 2: 20
#Error in method2 or method3: SyntaxError: Unexpected token a in JSON at position 0
    at JSON.parse (<anonymous>)
    at Timeout._onTimeout (D:\WorkSpace\TypeScript\study\promise-study.js:39:44)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7)
  • ：期中有异常，处理每个`then`中的异常，并且调用链：在每一个catch中重新抛出该异常，变相避免了调用链的执行
    method1()
  .then((result1) => method2(result1))
  .catch((err) => {
    console.error("#Error in method1 or method2:", err);
  	// 重新抛出错误，将直接传递给下一个链条中的catch（不执行下一个then）
  	throw err; 
  	// ArkTS 中不支持直接throw err，可以return一个Promise包装对象，状态为rejected
  	// return Promise.reject(err)
  })
  .then((result2) => method3(result2))
  .catch((err) => {
    console.error("#Error in method2 or method3:", err);
  	throw err; 
  })
  .then((result3) => method4(result3))
  .catch((err) => {
    console.error("#Error in method3 or method4:", err);
  	throw err; 
  })
  .then(() => method5())
  .catch((err) => {
    console.error("#Error in method4 or method5:", err);
  	throw err; 
  })
  .then((finalResult) => {
    console.log(finalResult);  // 输出最终结果
  })
  .catch((err) => {
    // 任何步骤出现错误，都会跳到这里，后续的步骤都不会继续执行
    console.error("#Error: occurred:", err);
  });

    • 运行结果

      Method 1 executed
Method 2 executed with value: 10
Method 3 executed with value: Result from method 2: 20
#Error in method2 or method3: SyntaxError: Unexpected token a in JSON at position 0
    at JSON.parse (<anonymous>)
    at Timeout._onTimeout (D:\WorkSpace\TypeScript\study\promise-study.js:39:44)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7)
#Error in method3 or method4: SyntaxError: Unexpected token a in JSON at position 0
    at JSON.parse (<anonymous>)
    at Timeout._onTimeout (D:\WorkSpace\TypeScript\study\promise-study.js:39:44)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7)
#Error in method4 or method5: SyntaxError: Unexpected token a in JSON at position 0
    at JSON.parse (<anonymous>)
    at Timeout._onTimeout (D:\WorkSpace\TypeScript\study\promise-study.js:39:44)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7)
#Error: occurred: SyntaxError: Unexpected token a in JSON at position 0
    at JSON.parse (<anonymous>)
    at Timeout._onTimeout (D:\WorkSpace\TypeScript\study\promise-study.js:39:44)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7)
  • ：期中有异常，处理每个`then`中的异常，但是调用链
    method1()
  .then((result1) => method2(result1))
  .catch((err) => {
    console.error("#Error in method1 or method2:", err);
    // 隐式返回一个Promise.resolve(undefined)，后一个then方法会接收到这个Promise对象
  })
  .then((result2) => method3(result2))
  .catch((err) => {
    console.error("#Error in method2 or method3:", err);
  })
  .then((result3) => method4(result3))
  .catch((err) => {
    console.error("#Error in method3 or method4:", err);
  })
  .then(() => method5())
  .catch((err) => {
    console.error("#Error in method4 or method5:", err);
  })
  .then((finalResult) => {
  	// 输出最终结果
    console.log(finalResult);
  })
  .catch((err) => {
    // 任何步骤出现错误，都会跳到这里，后续的步骤都不会继续执行
    console.error("#Error: occurred:", err);
  });

    • 运行结果

      Method 1 executed
Method 2 executed with value: 10
Method 3 executed with value: Result from method 2: 20
#Error in method2 or method3: SyntaxError: Unexpected token a in JSON at position 0
    at JSON.parse (<anonymous>)
    at Timeout._onTimeout (D:\WorkSpace\TypeScript\study\promise-study.js:39:44)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7)
Method 4 executed with value: undefined
Method 5 executed

  • 总结

    2. 同步异常不会被调用链中的 catch 捕获到进而导致这个应用程序崩溃。需要手动使用 try-catch 处理成 Promise 异常

  • 全部代码，可以用 tsc 编译（编译报错不影响生成js以及js的运行），node 运行测试：

    /**
 * Description: Promise 链式调用示例
 * 
 * Promise 是一种异步编程的解决方案，它是一个对象，可以获取异步操作的消息。
 * Promise 对象有三种状态：pending（进行中）、fulfilled（已成功）和 rejected（已失败）。
 * Promise 对象的状态改变只有两种可能：从 pending 变为 fulfilled 和从 pending 变为 rejected。
 * Promise 对象的状态一旦改变，就永久保持该状态，不会再变。
 */

// 定义几个异步方法
function method1(): Promise<number> {
  return new Promise<number>((resolve, reject) => {
    setTimeout(() => {
      console.log("Method 1 executed");
      // 返回数字 10
      resolve(10);
    }, 200);
  });
}

function method2(value: number): Promise<string> {
  return new Promise<string>((resolve, reject) => {
    setTimeout(() => {
      console.log(`Method 2 executed with value: ${value}`);
      // 返回字符串
      resolve(`Result from method 2: ${value * 2}`);
    }, 200);
  });
}

function method3(value: string): Promise<boolean> {
  return new Promise<boolean>((resolve, reject) => {
    setTimeout(() => {
      try {
        console.log(`Method 3 executed with value: ${value}`);
        /**
         * 模拟程序可能会发生异常
         * （这里没有使用直接throw错误，因为直接throw错误是同步错误，不会被调用链中的catch捕获到，会直接终止程序的运行并抛出该错误）
         * 如果需要让Promise调用链调用到就要使用`try-catch`包裹该代码，并在`catch`中调用`reject()`方法
         */
        Math.random() > 0.5 ? JSON.parse(`abcdefg`) : JSON.parse(`{"name": "enlin"}`);
        // throw new Error("Error occurred in method 3");
        // 返回布尔值，字符串长度大于 10 时返回 true
        resolve(value.length > 10);
      } catch (err) {
        reject(err);
      }
    }, 200);
  });
}

function method4(value: boolean): Promise<void> {
  return new Promise<void>((resolve, reject) => {
    setTimeout(() => {
      console.log(`Method 4 executed with value: ${value}`);
      // 不返回值
      resolve();
    }, 200);
  });
}

function method5(): Promise<string> {
  return new Promise<string>((resolve, reject) => {
    setTimeout(() => {
      console.log("Method 5 executed");
      resolve("Final result from method 5");
    }, 200);
  });
}

// 定义链式调用
function executedMethod() {
  console.log("#Start executing methods");
  console.log("#Before promise definition: something...\n")

  method1()
  // 隐式 return，因为method2方法本身就返回了一个Promise对象
  .then((result1) => method2(result1))
  .then((result2) => method3(result2))
  .then((result3) => method4(result3))
  .then(() => method5())
  .then((finalResult) => {
    // 输出最终结果
    console.log(finalResult);
  })
  .catch((err) => {
    // 任何步骤出现错误，都会跳到这里，后续的步骤都不会继续执行
    console.error("#Error: occurred:", err);
  });

  
  console.log("\n#After promise definition: something...")
  console.log("#End executing methods\n");
  setTimeout(() => {
    console.log("#After 2 seconds, the final result will be printed.")
  }, 2000)
  // 发生同步异常之后，代码会直接停止执行，未执行完的Promise链式调用也不会继续执行
  // JSON.parse(`enlin`)
}

// 执行方法
executedMethod();

异常传播机制

Promise.resolve()
  .then(() => {
    console.log('then1');
    return 'value1';
  })
  .then(() => {
    console.log('then2');
    throw new Error('error in then2'); // 假设代码运行时发生异常
  })
  .then(() => {
    console.log('then3'); // ❌ 被跳过
  })
  .then(() => {
    console.log('then4'); // ❌ 被跳过
  })
  .catch((err) => {
    console.log('catch1:', err.message); // ✅ 执行，接收到error in then2
  })
  .then(() => {
    console.log('then5'); // ✅ 执行，因为错误已被catch处理
  })
  .catch((err) => {
    console.log('catch2:', err); // ❌ 不执行，因为前面没有错误
  });
  1. 一旦发生异常（ throw 、Promise.reject 等），就会跳过后续所有的 then；
  2. 直到遇到第一个 catch 来处理错误；
  3. catch 处理完后，后续的链式调用恢复正常（除非 catch 本身也出错）；
  4. 如果没有 catch ，异常会一直传播到最末端；

事件循环（Event Loop）

在看下一章题目 执行优先级 之前，先了解一下什么是时间循环机制:

一句话：事件循环是 JavaScript 引擎处理“当前任务做完后，接下来该做什么”的调度机制。JavaScript 是单线程的，只有一个调用栈（Call Stack），一次只能做一件事。事件循环就是那个不停检查“调用栈空了没？空了就把排队等候的任务拿过来执行”的循环。

两类“排队”的任务

类型例子执行时机
宏任务setTimeout / setInterval、用户点击事件、网络请求完成后的回调每轮事件循环末尾执行
微任务Promise.then/catch/finally、await 后面的代码、MutationObserver当前宏任务执行完后立即清空，再执行下一个宏任务

重要

其实正确的优先级只是 宏任务 -> 微任务 -> 宏任务 ，首先 主程序 是 第一个宏任务，所以依次往下执行。

  • 当遇到了下一个宏任务时，例如 setTimeout，把回调函数注册为宏任务，塞进“宏任务队列”后面。
  • 遇到了 Promise.then 时，把回调注册为微任务，塞进“微任务队列”。
  • 待主程序，也就是第一个宏任务执行完毕之后，先执行并清空微任务队列，事件循环从宏任务队列里取下一个任务。

这就是 JS 的事件循环调度机制。

提示

await 在事件循环里怎么跑？

console.log('1');

async function run() {
  	console.log('2');
  	await Promise.resolve();	// await 一个立刻 resolve 的 Promise
  	console.log('4');					// 这部分是微任务
}

run();

console.log('3');

输出：

1
2
3
4

拆解：

  1. 输出 1。
  2. 执行 run()，输出 2。
  3. 遇到 await Promise.resolve()。虽然 Promise 已经完成，但 await 总会把后面的代码（console.log('4')）包装成微任务，放进微任务队列。
  4. run() 暂停，主程序继续，输出 3。
  5. 当前宏任务（主程序）结束，清空微任务队列，输出 4。

这就解释了为什么 await 后面跟上 Promise 不会像同步方法一样是主线程卡主的原因。

与同步代码执行优先级

  1. 主线程同步代码：立即执行（包括 Promise 构造函数）
  2. 微任务队列：Promise 的 then / catch / finally 回调
  3. 事件循环机制：
    • 执行所有同步代码
    • 检查微任务队列并执行所有微任务
    • 执行渲染（浏览器）
    • 执行宏任务（setTimeout等）
console.log('同步代码 1');

setTimeout(() => {
    console.log('宏任务 - setTimeout');
}, 0);

let promise = new Promise((resolve) => {
    console.log('同步代码 2 - Promise构造器');
    resolve('成功');
});

promise.then(() => {
    console.log('微任务 1 - then回调');
}).then(() => {
    console.log('微任务 2 - 链式then');
});

console.log('同步代码 3');

/* 输出顺序*/

// 同步代码 1
// 同步代码 2 - Promise构造器
// 同步代码 3
// 微任务 1 - then回调
// 微任务 2 - 链式then
// 宏任务 - setTimeout

执行优先级：

同步代码 > 微任务(Promise) > 宏任务(setTimeout)

警告

特别注意：使用 new Promise() 语句的时候，构造器中的方法会立即执行，但它对应的 then 回调依然会等待主线程同步代码执行完毕之后。 而且 Promise.then 的回调不是简单排队，而是有优先级的微任务。

与同步代码差异

重要

  • 同步方法：阻塞主线程。
  • await：本质是 Promise.then 的 语法糖 ，不阻塞主线程(UI不会卡顿)，将执行权交还给事件循环。
  • 解释“等待”的区别：同步是站着干等；await是留个纸条（Promise），先去干别的，等结果好了再回来处理。

同步方法一旦执行，就会一直占着主线程，直到跑完，期间页面无法响应用户操作。

异步处理 await 后面通常跟一个 Promise（只有跟了一个 Promise 才是一个有效异步处理方式）。当遇到 await 时，它会把当前 async 函数 暂停 ，然后把主线程的控制权交还给 JavaScript 引擎，引擎可以继续处理其他任务（事件、定时器等）。等 Promise 完成，再把函数剩余部分作为 微任务 放回主线程执行。

提示

通俗比喻

  • 同步方法：你去柜台点餐，店员说“等着”，然后开始做，你站在柜台前一步不动，后面排队的人全被你堵住，直到你的餐做好。
  • 异步方法：await：你去点餐，店员给你一个取餐呼叫器（Promise），然后你可以离开座位去玩手机，店员继续服务下一个顾客。等餐好了，呼叫器响了，你再过去拿。主线程（店员）全程没被你一个人占着。但这也有两个前提：
    • 你 await 的必须是一个 Promise；
    • 这个 Promise 的耗时操作是 真异步 的（比如 setTimeout、网络请求、文件读取等），而不是包了一层 Promise 的同步计算。
async function run() {
  console.log('开始')
  await asyncTask()   // 这里会暂停run，但主线程不会卡住
  console.log('结束')
}

// `await`：本质是 `Promise.then` 的 语法糖，上方的run方法等价于：

function run() {
  console.log('开始')
  return asyncTask().then(() => {
    // 注意，在异步方法内，`await` 下面的代码碰到await关键字，会“等待” `await` 后面的 **Promise** 执行完毕才会执行。
    console.log('结束')
  })
}

10. 迭代器（Iterators） 和 生成器（Generators）

迭代器和生成器提供了遍历集合的功能。

// `*` 号，表示生成器函数
function* generator() {
  yield 1;  // yield = 暂停，返回1（yield 是生成器专用关键字）
  yield 2;  // 再次调用时，从这里继续，返回2
  yield 3;  // 再次调用时，从这里继续，返回3
}

let iter = generator();
console.log(iter.next().value); // 输出: 1
console.log(iter.next().value); // 输出: 2
console.log(iter.next().value); // 输出: 3

提示

实际应用场景：

// 生成无限序列
function* infiniteNumbers() {
  let i = 0;
  while (true) {
    yield i++;
  }
}

const numbers = infiniteNumbers();
console.log(numbers.next().value); // 0
console.log(numbers.next().value); // 1
console.log(numbers.next().value); // 2
// 可以无限调用，但生成器是"惰性"的，只在需要时才计算下一个值，不会卡死
其他几种实现方式

  1. 使用普通函数 + 闭包

    function createCounter() {
  let count = 0;
  return function() {
    return count++;
  };
}

const counter = createCounter();
console.log(counter()); // 0
console.log(counter()); // 1
console.log(counter()); // 2

  2. 使用迭代器协议（不用 yield）

    const iterator = {
  current: 0,
  next() {
    return { value: this.current++, done: false };
  }
};

console.log(iterator.next().value); // 0
console.log(iterator.next().value); // 1

11. Symbol

Symbol 是一种基本数据类型，表示唯一的标识符。

let sym1 = Symbol();
let sym2 = Symbol("description");

console.log(sym1 === sym2); // 输出: false

语法

索引签名

假如有一个函数需要的参数类型为：

export type MultipartFormFields = {
  [k: string]: MultipartFormFieldValue | MultipartFormFieldValue[];
};
  • 键（key）: 索引签名，表示对象可以有任意数量的字符串类型的键
  • 值（value）: MultipartFormFieldValue 类型或 MultipartFormFieldValue[] 数组。

使用方式：

functionName({
  // 这个类型可以有任意数量的字符串键
  'param1': { ... }, // MultipartFormFieldValue 类型
  'param2': [ {...},{...}，... ], // MultipartFormFieldValue 数组类型
})
  • 传入任意数量的参数（1个、2个、3个...甚至0个）

这种设计很常见于需要处理动态字段的场景，比如表单数据、配置对象等。

构造签名接口

构造签名接口是告诉 TypeScript：“这个变量不是一个普通的对象或函数，而是一个可以 new 的类（构造函数）”。

普通接口描述“对象长什么样”，构造签名接口描述“构造函数长什么样”。


基本语法：

interface 接口名 {
  new (参数: 类型, ...): 返回类型;
}
  • new：关键字，表示这是构造签名
  • 参数：构造函数需要的参数
  • 返回类型：new 出来的实例类型

一个简单示例解释：

// 定义：什么样的构造函数可以创建 Car
interface CarFactory {
  new (brand: string): Car;
}

// Car 类
class Car {
  constructor(public brand: string) {}
}

// 使用：这个函数只接受 Car 的构造函数
function createCar(factory: CarFactory, brand: string): Car {
  return new factory(brand); // ✅ TypeScript 知道 factory 可以 new
}

createCar(Car, "Toyota"); // ✅ 正确
// createCar(Date, "Toyota"); // ❌ 错误：Date 不是 Car 的构造函数

类比解释

想象你去租车：

  1. 普通函数：给你一辆现成的车
  2. 构造函数：给你一个汽车工厂，你可以用它生产新车

构造签名接口就是描述“这个工厂长什么样，能生产什么车”。

// ❌ 没有构造签名的写法（会报错）
function createThing(ThingClass: any, name: string) {
  return new ThingClass(name); // TypeScript：我不知道 ThingClass 能不能 new！
}

// ✅ 使用构造签名的写法
interface AnimalConstructor {
  new (name: string): Animal; // 明确告诉TS：这玩意儿可以用 new 调用！
}

function createAnimal(AnimalClass: AnimalConstructor, name: string): Animal {
  return new AnimalClass(name); // TypeScript：好的，我知道你能 new！
}

// 使用
class Dog implements Animal {
  constructor(public name: string) {}
  bark() { console.log("汪汪！") }
}

const myDog = createAnimal(Dog, "旺财");
myDog.bark(); // 完全类型安全！

意义：TypeScript 需要知道 AnimalClass 是一个构造函数，否则它无法类型检查 new AnimalClass(name) 这个操作。也确保了传入的参数类型安全。

提示

一句话总结：

当你需要把“类”（不是对象）当作参数传递时，就用构造签名接口。

——————————

import & export

在JavaScript和TypeScript中，import 语句确实可以使用别名，但它的使用方式取决于导出方式。以下是导入时使用别名的几种常见情况：

1. 默认导出（Default Export）

当一个模块默认导出一个值或函数时，导入时可以使用任何名称：

// module.ts
export default function() {
  console.log("Hello from default export!");
}

// 使用默认导出的函数
import myFunction from './module';
myFunction(); // 输出：Hello from default export!

在这种情况下，myFunction 是一个你自己选择的名称，可以是任何名称。

2. 命名导出（Named Export）

当一个模块导出多个命名导出时，你可以选择导入哪些具体的导出，并且可以使用别名：

// module.ts
export const foo = 42;
export const bar = () => console.log("Hello from bar");

// 导入命名导出的值和函数
import { foo, bar } from './module';
console.log(foo); // 输出：42
bar(); // 输出：Hello from bar

// 使用别名导入
import { foo as myFoo, bar as myBar } from './module';
console.log(myFoo); // 输出：42
myBar(); // 输出：Hello from bar

在这种情况下，foo 和 bar 可以使用别名 myFoo 和 myBar 来导入。

3. 命名空间导入

你还可以导入整个模块作为一个对象，并使用这个对象来访问导出的成员：

// module.ts
export const foo = 42;
export const bar = () => console.log("Hello from bar");

// 导入整个模块作为一个对象
import * as myModule from './module';
console.log(myModule.foo); // 输出：42
myModule.bar(); // 输出：Hello from bar

在这种情况下，myModule 是整个模块的别名，可以用来访问模块中的所有导出成员。

扩展

当你使用 export default 导出一个没有命名的函数时，在使用 import * as myModule from './module'; 这种方式导入时，可以通过 myModule.default 来访问和调用这个函数。

举例来说，假设你有一个模块 module.ts，里面导出了一个没有命名的默认函数：

// module.ts
export default function() {
  console.log("Hello from default export!");
}

然后在另一个文件中，比如 main.ts 中，你可以这样导入和调用该函数：

// main.ts
import * as myModule from './module';

// 调用默认导出的函数
myModule.default(); // 输出：Hello from default export!

在这个例子中，myModule.default 就是对默认导出的函数的引用，通过它可以调用导出的函数。

这种方式是因为 import * as myModule from './module'; 将整个模块作为一个对象导入，而默认导出的内容会被放在 default 属性中。

4. 混合导入

你可以同时导入默认导出和命名导出：

// module.ts
export default function() {
  console.log("Hello from default export!");
}
export const foo = 42;

// 同时导入 默认导出 和 命名导出
import myFunction, { foo } from './module';
myFunction();		// 输出：Hello from default export!
console.log(foo);	// 输出：42

总结：

  • 默认导出：可以使用任何名称来导入。
  • 命名导出：可以使用别名来导入。
  • 整个模块：可以使用别名来导入整个模块作为一个对象。

扩展

import * from ./xxx.js 为静态加载，无法在运行时动态加载；

ES6(2020)时提出了 import()：

import() 类似于 Node 的 require 方法，区别主要是前者是异步加载，后者是同步加载（会缓存已经require过的模块）。

import()

  1. 按需加载

    button.addEventListener('click', event => {
  import('./dialogBox.js')
  .then(dialogBox => {
    dialogBox.open();
  })
  .catch(error => {
    /* Error handling */
  })
});

  2. 条件加载

    if (condition) {
  import('moduleA').then(...);
} else {
  // 允许方法返回动态路径
  import(f()).then(...);
}

import() 加载模块成功以后，这个模块会作为一个对象，当作 then 方法的参数。因此，可以使用对象解构赋值的语法，获取输出接口。

import('./myModule.js')
.then(({export1, export2}) => {
  // ...·
});

上面代码中，export1 和 export2 都是 myModule.js 的输出接口，可以解构获得。

如果模块有 default 输出接口，可以用参数直接获得。

import('./myModule.js')
.then(myModule => {
  console.log(myModule.default);
});

上面的代码也可以使用具名[1]输入的形式。

import('./myModule.js')
.then(({default: theDefault}) => {
  console.log(theDefault);
});

如果想同时加载多个模块，可以采用下面的写法。

Promise.all([
  import('./module1.js'),
  import('./module2.js'),
  import('./module3.js'),
])
.then(([module1, module2, module3]) => {
   ···
});

import() 也可以用在 async 函数之中。

async function main() {
  const myModule = await import('./myModule.js');
  const {export1, export2} = await import('./myModule.js');
  const [module1, module2, module3] =
    await Promise.all([
      import('./module1.js'),
      import('./module2.js'),
      import('./module3.js'),
    ]);
}
main();
注意

在Vue3项目 main.js 中这两种导入方式的差异

import aaa from '@/Aaa.js' 和 import './bbb.js'

特性import aaa from '@/Aaa'import './bbb'
目的导入模块/组件导入文件（通常用于副作用）
用法获取模块的默认，不获取导出
常见用途导入Vue组件、工具函数等导入样式文件、初始化脚本
示例import App from './App.vue'import './style.css'

require()

// 导入内置模块
const fs = require('fs');

// 导入自定义模块
const myModule = require('./myModule');

// 导入JSON文件
const data = require('./data.json');

替代单例模式

利用 ES6 模块的缓存特性实现单例模式：

// 标识模块初始化状态
let isModuleInitialized = false

class ConfigManager{
    theme: string = 'dark'
    language: string = 'zh_CN'

    // 可以 `private` 私有构造函数防止外部 new
    constructor() {
        if (isModuleInitialized) {
            console.debug(`[Runtime] ConfigManager constructor()`)
        } else {
            console.debug(`[Module Init] ConfigManager constructor()`)
        }
    }

    // getter & setter ...
}


const configManager: ConfigManager = new ConfigManager()

// 标识模块初始化完毕
isModuleInitialized = true

// 导出单例实例
export { configManager }

提示

构造函数只会在第一次 import 之后打印一次 [Module Init] ，并且不会被外部初始化。

re-erxport

在 ES6 和 TypeScript 中，re-export 是指从一个模块中导入某些东西，并将它们再次导出。这种方式可以用来组织和组合模块，使得代码结构更加清晰和模块化。re-export 主要有两种形式：导入并导出整个模块或特定的导出。

1. 导入并导出整个模块

这种方式将整个模块导入并再次导出。它可以用于创建一个“聚合模块”，将多个模块的内容组合在一起，从而简化导入路径。

// module1.ts
export const a = 1;
export const b = 2;

// module2.ts
export const c = 3;
export const d = 4;

// index.ts (聚合模块)
export * from './module1';
export * from './module2';

在这种情况下，index.ts 文件将 module1 和 module2 中的所有导出重新导出。这意味着你可以从 index.ts 文件中导入所有这些内容：

// main.ts
import { a, b, c, d } from './index';
console.log(a, b, c, d); // 输出: 1 2 3 4

2. 导入并导出特定的导出

有时你可能只想导入并重新导出某些特定的导出，而不是整个模块。这可以通过以下语法实现：

// module1.ts
export const a = 1;
export const b = 2;

// module2.ts
export const c = 3;
export const d = 4;

// index.ts (聚合模块)
export { a, b } from './module1';
export { c } from './module2';

在这种情况下，index.ts 文件只会重新导出 module1 中的 a 和 b 以及 module2 中的 c。这使得导出的内容更加具体和控制：

// main.ts
import { a, b, c } from './index';
console.log(a, b, c); // 输出: 1 2 3
// console.log(d); // 错误：d 未导出

3. 重新导出默认导出

默认导出也可以重新导出，但语法稍有不同：

// module1.ts
const defaultExport = 1;
export default defaultExport;

// module2.ts
const anotherDefaultExport = 2;
export default anotherDefaultExport;

// index.ts (聚合模块)
export { default as module1Default } from './module1';
export { default as module2Default } from './module2';

这种情况下，index.ts 文件重新导出 module1 和 module2 的默认导出，并给它们指定了新的名称：

// main.ts
import { module1Default, module2Default } from './index';
console.log(module1Default); // 输出: 1
console.log(module2Default); // 输出: 2

总结

Re-export 是一种非常强大的工具，可以帮助你组织代码，创建更清晰的模块结构。无论是导入并导出整个模块，还是只导出特定的部分，亦或是处理默认导出，这些技术都能让你的代码更加模块化和可维护。通过巧妙地使用 Re-export，你可以减少导入路径的混乱，并使代码的依赖关系更加透明。

——————————

坑

forEach

forEach 的设计是同步的，它会遍历数组中的每个元素，并立即调用回调函数。如果回调函数是 async 的，forEach 会将其视为一个普通的函数调用，不会等待 await 的完成。因此，forEach 会继续执行下一个回调，而不会等待前一个回调中的异步操作完成。

示例代码

const array = [1, 2, 3];

array.forEach(async (item) => {
  await new Promise(resolve => setTimeout(resolve, 1000)); // 模拟异步操作
  console.log(item);
});

console.log("forEach finished");

输出结果：

forEach finished
1
2
3

Map

正确的写法

new Map([
    ["key1", "value1"],  // 第一个元素：数组包含键和值
    ["key2", "value2"],  // 第二个元素：数组包含键和值
    // ...
])

提示

嵌套两层 [] 的原因：

  • 外层 [] ：表示整个参数是一个数组（可迭代对象）
  • 内层 [] ：表示每个键值对是一个数组 [key, value]

——————————

名词释义

  1. 具体的名字，结合匿名可以更好的理解 ↩︎

「 Enlin的文档♪(^∇^*) - 使用 VuePress 构建🥳 」