6Jyc5p+a

【笔记】uni-app学习笔记

2026-03-30T23:03:10.000Z

前言

uni-app是一个开放源代码的跨平台前端应用开发框架，由中华人民共和国的DCloud公司于2018年开发并维护。该框架基于Vue.js技术栈，允许开发者使用单一代码库构建可运行于iOS、Android、HarmonyOS NEXT、Web以及各类小程序（包括微信、支付宝、百度、今日头条、飞书、QQ、快手、钉钉、淘宝、360、京东、小红书）和快应用等多个平台的移动应用程序。（维基百科）

创建项目

Vue2

1 2	npm install -g @vue/cli vue create -p dcloudio/uni-preset-vue

Vue3（JS）

1 2	npx degit dcloudio/uni-preset-vue#vite npm install

Vue3（TS）

1	npx degit dcloudio/uni-preset-vue#vite-ts

Android

手动连接Android模拟器

如果HBuilder不能扫描到设备，可以手动建立adb连接

：端口号
腾讯手游助手：5555
网易MuMu：7555
夜神：62001
逍遥：21503
雷电：5555
BlueStacks：5555
Genymotion：5555

1	adb connect :

条件编译

main.js

1
2
3

// #ifdef VUE3
...
// #endif

main.js

1
2
3

// #ifndef VUE3
...
// #endif

生命周期函数

生命周期函数只能在App.vue中定义

App.vue

CSS样式

作用范围

全局样式

App.vue文件内定义的样式默认为全局样式

App.vue

局部样式

非App.vue文件内定义的样式默认为局部样式

pages/page/page.vue

预处理器

lang：指定预处理器

uni.scss

uni.scss可以定义新的或重写旧的全局样式
uni.scss可以全局引入其他样式文件中定义的变量，项目中的其他样式文件无需导入就可以直接使用

uni.scss

1
2
3

* {
  color: red;
}

当前组件的根样式

1
2
3

page {
  
}

完成

参考文献

DCloud官方文档
 知乎——赵青青

【笔记】Postman动态获取Token

2026-03-30T17:38:56.000Z

前言

Postman动态获取Token

正文

在登录接口的Tests中添加代码，将响应数据中的Token存放到环境变量

tokenToEnv：环境变量名
tokenFromResponse：响应数据中Token数据的字段名

1	pm.globals.set("tokenToEnv", pm.response.json().tokenFromResponse)

在其他接口的Authorization->Token中注入环境变量{{tokenToEnv}}

完成

【笔记】dotenv学习笔记

2026-03-25T22:09:14.000Z

前言

Dotenv is a zero-dependency module that loads environment variables from a .env file into process.env.（Github）

下载依赖

1	npm install dotenv

创建配置文件

.env

1	KEY="value"

针对于开发环境的配置

.env.development

1	KEY="value"

针对于生产环境的配置

.env.production

1	KEY="value"

不会上传到Git的配置

.env.local

1	KEY="value"

完成

【笔记】Vite学习笔记

2026-03-25T21:53:20.000Z

前言

Vite (French: [vit], like “veet”) is a local development server backed by VoidZero Inc.（维基百科）

创建项目

1	npm create vite@latest

运行项目

npx vite

1	npx vite run

打包项目

1	npx vite build

预览打包后的项目

1	npx vite preview

内置常量

环境变量

模式

1	const mode = import.meta.env.MODE;

是否是开发环境

1	const yes = import.meta.env.DEV;

是否是生产环境

1	const yes = import.meta.env.PROD;

是否是服务端渲染

1	const yes = import.meta.env.SSR;

读取自定义环境变量

环境变量需要以VITE_作为前缀才能被Vite识别

.env

1	VITE_KEY="value"

1	const key = import.meta.env.VITE_KEY;

完成

【笔记】IDEA保存JS文件时自动执行ESLint

2026-03-25T17:22:22.000Z

前言

IDEA保存JS文件时自动执行ESLint

正文

文件->设置->语言和框架->JavaScript->代码质量工具->ESLint->勾选自动ESLint设置->确定

完成

【笔记】IDEA保存JS文件时自动执行Prettier

2026-03-25T17:18:19.000Z

前言

IDEA保存JS文件时自动执行Prettier

正文

文件->设置->语言和框架->JavaScript->Prettier->勾选自动Prettier设置->确定

完成

【笔记】EditorConfig学习笔记

2026-03-24T23:32:28.000Z

前言

EditorConfig is an open specification and file format for syntax highlighting, text editors and integrated development environment (IDEs) that aims to maintain a consistent coding style, particularly aimed at groups working together.（维基百科）

创建配置文件

charset：指定文件编码集
indent_style：指定缩进方式
space、tab
indent_size：指定缩进大小
end_of_line：指定换行符
lf、crlf、cr
trim_trailing_whitespace：指定是否删除行尾空白字符
insert_final_newline：指定是否添加文件末尾空行

.editorconfig

root = true

[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

[*.go]
indent_style = tab

完成

【笔记】Webpack打包Sass文件

2026-03-23T17:51:39.000Z

前言

Webpack打包Sass文件

下载依赖

下载sass-loader时会自动下载sass

1	npm install -D style-loader css-loader sass-loader

修改配置文件

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(sass|scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"]
      }
    ]
  }
};

引入Sass文件

1	require("./style.scss");

完成

【笔记】TS的配置文件

2026-03-22T22:44:17.000Z

前言

TS的配置文件学习笔记

配置文件

compilerOptions.target：指定编译后的目标JS兼容版本
compilerOptions.module：指定编译后的目标JS模块化规范
compilerOptions.strict：指定是否开启TS严格模式的所有选项
compilerOptions.allowJs：指定是否允许TS文件中编写JS代码
compilerOptions.jsx：指定是否转换JSX语法
preserve：保留标签
react：将标签转换为React.createElement()
compilerOptions.esModuleInterop：指定是否允许混用ESModule和CommonJS
compilerOptions.baseUrl：指定项目根目录
compilerOptions.paths：指定项目路径别名
compilerOptions.lib：指定项目种可以使用的内部库
include：指定哪些文件会被编译，可以使用通配符，缺省值为["./*"]
exclude：指定哪些文件会被排除，可以使用通配符，缺省值为["node_modules/**/*"]
files：指定哪些文件会被编译，不能使用通配符

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "allowJs": true,
    "jsx": "preserve",
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "lib": ["dom", "esnext"]
  },
  "include": ["./*"],
  "exclude": ["./node_modules/**/*"]
}

完成

【笔记】TS的类型声明文件

2026-03-22T19:28:23.000Z

前言

TS的.d.ts类型声明文件学习笔记

全局变量类型声明

types/global.d.ts

1 2	declare let 变量名: 数据类型; declare function 函数名(形参名: 数据类型): 返回值类型;

main.js

1 2	console.log(变量名); 函数名(实参);

模块变量类型声明

模块全部变量类型声明

types/global.d.ts

1	declare module "模块名"

main.js

import * as 模块名 from "模块名";

console.log(模块名.变量名);
模块名.函数名(实参);

模块指定变量类型声明

types/global.d.ts

declare module "模块名" {
  export let 变量名: 数据类型;
  export function 函数名(形参名: 数据类型): 返回值类型;
}

main.js

import { 变量名, 函数名 } from "模块名";

console.log(变量名);
函数名(实参);

文件变量类型声明

types/global.d.ts

1	declare module "*.png"

main.js

1
2
3

import 图片名 from "./图片名.png";

console.log(图片名);

完成

【笔记】Webpack打包TS文件

2026-03-19T23:05:46.000Z

前言

Webpack打包TS文件

下载依赖

1	npm install -D ts-loader

TS配置文件

tsconfig.json

{}

修改Webpack配置文件

webpack.config.js

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts$/,
        use: "ts-loader"
      }
    ]
  }
};

引入TS文件

index.ts

const data: object = {};

module.exports = {
  data: data
};

1
2
3

const { data } = require("./index.ts");

console.log(data); // {}

完成

【笔记】TS的模块化

2026-03-19T21:31:20.000Z

前言

TS的模块化学习笔记

导出模块

demo.ts

1	export const obj = {};

导入模块

main.ts

1
2
3

import * as demo from "./demo";

console.log(demo.obj);

main.ts

1
2
3

import { obj } from "./demo";

console.log(obj);

完成

【笔记】ClaudeCode学习笔记

2026-03-19T18:25:39.000Z

前言

ClaudeCode学习笔记

下载依赖

1	npm install -g claude-code

修改配置文件

ANTHROPIC_BASE_URL：定义API的URL
ANTHROPIC_AUTH_TOKEN：定义API的令牌
ANTHROPIC_DEFAULT_OPUS_MODEL：定义OPUS模型
ANTHROPIC_DEFAULT_SONNET_MODEL：定义SONNET模型
ANTHROPIC_DEFAULT_HAIKU_MODEL：定义HAIKU模型

~/.claude/settings.json

{
  "env": {
    "ANTHROPIC_BASE_URL": "",
    "ANTHROPIC_AUTH_TOKEN": "",
    "ANTHROPIC_DEFAULT_OPUS_MODEL": "",
    "ANTHROPIC_DEFAULT_SONNET_MODEL": "",
    "ANTHROPIC_DEFAULT_HAIKU_MODEL": ""
  }
}

启动ClaudeCode

claude

完成

参考文献

小米MIMO开发文档

【笔记】TS的泛型

2026-03-19T00:19:37.000Z

前言

TS的泛型学习笔记

函数

定义函数时指定泛型类型

1
2
3

function 函数名<泛型类型>() {
  ...
}

1
2
3

function 函数名<泛型类型1, 泛型类型2>() {
  ...
}

1
2
3

function 函数名<泛型类型 = 默认数据类型>() {
  ...
}

调用函数时指定泛型类型

1	函数名<泛型类型>();

泛型自动类型推导

function 函数名<泛型类型>(形参名: 泛型类型) {
  ...
}

函数名(实参);

类

定义类时指定泛型类型

1
2
3

class 类名<泛型类型> {
  ...
}

1
2
3

class 类名<泛型类型1, 泛型类型2> {
  ...
}

1
2
3

class 类名<泛型类型 = 默认数据类型> {
  ...
}

创建对象时指定泛型类型

1	let 变量名 = new 类名<泛型类型>();

泛型自动类型推导

class 类名<泛型类型> {
  private _属性名: 数据类型;

  constructor(属性名: 泛型类型) {
    this._属性名 = 属性名;
  }
}

let 变量名 = new 类名(实参);

接口

定义接口时指定泛型类型

1
2
3

interface 接口名<泛型类型> {
  ...
}

1
2
3

interface 接口名<泛型类型1, 泛型类型2> {
  ...
}

1
2
3

interface 接口名<泛型类型 = 默认数据类型> {
  ...
}

使用接口时指定泛型类型

1	let 变量名: 接口名<泛型类型>;

泛型约束

约束泛型类型的数据结构

interface 接口名 {
  ...
}

function 函数名<泛型类型 extends 接口名>() {
  ...
}

约束泛型类型为对象所有属性的联合类型

interface 接口名 {
  属性名1: 数据类型;
  属性名2: 数据类型;
}

function 函数名<泛型类型 extends keyof 接口名>() {
  ...
}

约束泛型类型为能作为对象属性的联合类型

约束泛型类型为能作为对象属性的联合类型（string | number | symbol）

1
2
3

function 函数名<泛型类型 extends keyof any>() {
  ...
}

内置工具

获取函数返回值类型

1
2
3

type 函数类型 = () => any;

type 函数返回值类型 = ReturnType<函数类型>

1
2
3

function 函数名() {}

type 函数返回值类型 = ReturnType<typeof 函数名>

所有属性全部为可选

1	type 新类型 = Partial<数据类型>;

所有属性全部为必选

1	type 新类型 = Required<数据类型>;

所有属性全部为只读

1	type 新类型 = Readonly<数据类型>;

映射类型

1	type 新类型 = Record;

选择类型

1	type 新类型 = Pick"key1" \| "key2">;

过滤类型

1	type 新类型 = Omit"key1" \| "key2">;

提取类型

1	type 新类型 = Extract"key1" \| "key2">;

非空类型

1	type 新类型 = NonNullable<数据类型>;

实例类型

1
2
3

class 类名 {}

type 新类型 = InstanceType<typeof 类名>;

条件类型

通过泛型提取返函数返回值类型

1	type 函数返回值类型<泛型类型> = () => infer R ? R : never;

通过泛型提取形参类型

1	type 函数形参类型 = (...args: infer A) => any;

类型分发

如果泛型参数传递的是联合类型，则实际会进行类型分发

完成

【笔记】TS的枚举

2026-03-19T00:15:02.000Z

前言

TS的枚举学习笔记

定义枚举

默认枚举值是从0开始的数字序列

1
2
3

enum 枚举类名 {
  枚举名1, 枚举名2
}

自定义枚举值

enum 枚举名 {
  枚举属性1 = 枚举值,
  枚举属性2 = 枚举值
}

如果枚举值有序，且步长为1，则可以省略后续枚举值定义

enum 枚举名 {
  枚举属性1 = 0,
  枚举属性2
}

使用枚举作为变量类型

1	let 变量名: 枚举名 = 枚举名.枚举值;

完成

【笔记】TS的面向对象

2026-03-18T23:54:05.000Z

前言

TS的面向对象学习笔记

类

定义类

class 类名 {
  属性名: 数据类型;

  方法名(形参名: 数据类型): 返回值类型 {
    ...
  }
}

可选的属性

通过?定义可选的属性

1
2
3

class 类名 {
  属性名?: 数据类型;
}

只读的属性

通过权限修饰符readonly定义只读的属性

1
2
3

class 类名 {
  readonly 属性名: 数据类型;
}

创建对象

1	let 变量名: 类名 = new 类名();

权限修饰符

关键字	权限	类内是否可以访问成员	类外是否可以访问成员变量	是否可以被继承
`public`	缺省值，公共权限	✓	✓	✓
`protected`	保护权限	✓	×	✓
`private`	私有权限	✓	×	×

class 类名 {
  public 属性名1: 数据类型;
  protected 属性名2: 数据类型;
  private 属性名3: 数据类型;
}

构造方法

class 类名 {
  private _属性名: 数据类型;

  constructor(属性名: 数据类型) {
    this._属性名 = 属性名;
  }
}

参数属性

参数属性是一种语法糖，如果为构造方法的形参添加任意修饰符，那么可以省略属性的定义与初始化

1
2
3

class 类名 {
  constructor(private 属性名: 数据类型) {}
}

Getter和Setter方法

class 类名 {
  private _属性名: 数据类型;

  set 属性名(形参名: 数据类型) {
    this._属性名 = 形参名;
  }

  get 属性名(): 数据类型 {
    return this._属性名;
  }
}

类的继承

1
2
3

class 类名 extends 父类名 {
  ...
}

类实现接口

1
2
3

class 类名 implements 接口名 {
  ...
}

1
2
3

class 类名 implements 接口名1, 接口名2 {
  ...
}

抽象类

1
2
3

abstract class 抽象类名 {
  abstract 抽象方法名();
}

接口

定义接口

1
2
3

interface 接口名 {
  属性名: 数据类型;
}

可选的属性

通过?定义可选的属性

1
2
3

interface 接口名 {
  属性名?: 数据类型;
}

补充接口的定义

通过同名接口补充接口的定义

interface 接口名 {
  属性名1: 数据类型;
}

interface 接口名 {
  属性名2: 数据类型;
}

使用接口作为变量数据类型

1	let 变量名: 接口名;

通过交叉类型使用多个接口作为变量数据类型

1	let 变量名: 接口名1 & 接口名2;

接口的继承

1
2
3

interface 接口名 extends 父接口名 {
  ...
}

函数的调用签名

定义一个变量本身是一个可以调用的函数

声明

1
2
3

interface 接口名 {
  (形参名: 形参数据类型): 返回值类型;
}

定义

1
2
3

let 变量名: 接口名 = function (形参名: 形参数据类型): 返回值类型 {
  return 返回值;
}

调用

1	console.log(变量名(实参值)); // 返回值

构造函数调用签名

定义一个变量本身是一个可以new的构造函数

声明

1
2
3

interface 接口名 {
  new (形参名: 形参数据类型): 返回值类型;
}

定义

1
2
3

let 变量名: 接口名 = function (形参名: 形参数据类型): 对象类型 {
  return 对象;
} as unknown as 接口名;

调用

1	console.log(new 变量名(实参值)); // 对象

索引签名

定义一个变量本身是可以通过[]取值的可迭代对象

声明

索引数据类型：只能是number或string

1
2
3

interface 接口名 {
  [索引名: 索引数据类型]: 索引返回值类型;
}

如果除了声明索引数据类型的属性之外还声明了其他属性，且这个索引数据类型是string类型，则其他的属性的返回值类型必须是索引数据类型的属性的返回值类型的同集或子集

interface 接口名 {
  [索引名: string]: any;
  key: string;
}

如果同时声明2个索引数据类型的属性，索引数据类型number的返回值类型必须是索引数据类型string的返回值类型的同集或子集
- 原因是通过索引获取数据时，变量名[0]实质上会被JS转换为变量名["0"]

interface 接口名 {
  [索引名: 索引数据类型1]: 索引返回值类型;
  [索引名: 索引数据类型2]: 索引返回值类型;
}

定义

1	let 变量名: 接口名 = [值, 值]

1	let 变量名: 接口名 = { 属性名1: 值, 属性名2: 值 }

调用

如果索引数据类型为number，则索引名为数字，否则索引名为属性名

1	console.log(变量名[索引名]);

this

this的数据类型默认是any

修改配置文件

修改配置文件，禁止this自动推导数据类型为any

{
  "compilerOptions": {
    "noImplicitThis": true
  }
}

显式指定`this`的数据类型

将this作为函数的第一个形参，并指定数据类型

1
2
3

function fn(this: {}, arg: number) {}

fn.call({}, 0);

`this`的内置工具

提取this的数据类型

function fn() {}

type FnType = typeof fn;
type FnThisType = ThisParameterType<FnType>;

删除this的数据类型

function fn() {}

type FnType = typeof fn;
type FnNoThisType = OmitThisParameter<FnType>;

绑定上下文的`this`类型

interface Inf {
  key: InfKey;
  fn(): void;
}

interface InfKey {
  k: string;
}

let obj: Inf & ThisType<InfKey> = {
  key: {
    k: "v"
  },
  fn: function () {
    console.log(this.k);
  }
}

obj.fn.call(obj.key)

完成

【笔记】jsDelivr学习笔记

2026-03-18T19:34:42.000Z

前言

JSDelivr是一款开源的免费公共CDN。它是目前第二受欢迎的公共CDN。2020年10月14日，JSDelivr成为Bootstrap的官方CDN。（维基百科）

npm的CDN

request

1	https://cdn.jsdelivr.net/npm/package@version/file

清除缓存

request

1	https://purge.jsdelivr.net/npm/package@version/file

ESM的CDN

request

1	https://esm.run/package@version/file

清除缓存

request

1	https://purge.run/package@version/file

Github的CDN

request

1	https://cdn.jsdelivr.net/gh/user/repo@version/file

清除缓存

request

1	https://purge.jsdelivr.net/gh/user/repo@version/file

WordPress的CDN

request

1	https://cdn.jsdelivr.net/wp/plugins/project/tags/version/file

清除缓存

request

1	https://purge.jsdelivr.net/wp/plugins/project/tags/version/file

完成

参考文献

官方文档
 腾讯云开发者社区——极客中心

【笔记】TypeScript学习笔记

2026-03-16T03:51:31.000Z

前言

TypeScript是由微软进行开发和维护的一种开源的编程语言。TypeScript是JavaScript的严格语法超集，提供了可选的静态类型检查。（维基百科）

TypeScript本质上是JavaScript的超集，所以JavaScript的所有用法都可以在TypeScript上直接使用，本文只介绍TypeScript的特殊用法

编译器

下载依赖

1	npm install -g typescript

编译生成JS文件

-w：监视模式，每当源码发生改变就立即执行编译

编译指定文件

tsc .ts

1	tsc .ts .ts

根据配置文件编译指定文件

初始化配置文件

1	tsc --init

修改配置文件

compilerOptions.outDir：指定输出目录
include：指定包含的文件或目录
exclude：指定排除的文件或目录

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./",
  },
  "include": ["./"],
  "exclude": ["./dist"]
}

tsc

变量

声明变量

1	let 变量名: 数据类型;

自动类型推导，声明变量时的数据类型为any类型

let 变量名;

定义变量

1	let 变量名: 数据类型 = 值;

自动类型推导，定义变量时的数据类型根据值的类型决定

1	let 变量名 = 值;

常量

定义常量

1	let 变量名: 数据类型 = 值;

自动类型推导，常量的数据类型为字面量类型

1	let 变量名 = 值;

基本数据类型

let 变量名: number = 0;

let 变量名: string = "";

let 变量名: boolean = false;

let 变量名: null = null;

let 变量名: undefined = undefined;

进制表示

描述二进制的数值，需要以0b开头

1	var binary = 0b1;

描述八进制的数值，需要以0o开头

1	var octal = 0o7;

描述十六进制的数值，需要以0x开头

1	var hexadecimal = 0xF;

数组类型

数组中只能存放相同类型的元素

定义数组元素的数据类型

1	let 变量名: 数据类型[] = [值, 值];

元组类型

元组中可以存放不同类型的元素

定义元祖元素的数据类型

1	let 变量名: [数据类型, 数据类型] = [值, 值];

对象类型

定义对象数据类型

1
2
3

let 变量名: object = {
  属性名: 值
};

1
2
3

let 变量名: {} = {
  属性名: 值
};

定义对象属性的数据类型

1
2
3

let 变量名: { 属性名: 数据类型 } = {
  属性名: 值
};

let 变量名: { 属性名1: 数据类型, 属性名2: 数据类型 } = {
  属性名1: 值,
  属性名2: 值
};

如果通过多行定义多个属性，可以省略,

let 变量名: {
  属性名1: 数据类型
  属性名2: 数据类型
} = {
  属性名1: 值,
  属性名2: 值
};

自动类型推导，属性的数据类型为any类型

1
2
3

let 变量名: { 属性名 } = {
  属性名: 值
};

可选的属性

通过?定义可选的属性

1
2
3

let 变量名: { 属性名?: 数据类型 } = {
  属性名: 值
};

可选的对象属性的数据类型实质上是这个数据类型与undefined类型的联合类型（数据类型 | undefined）

1
2
3

let 变量名: { 属性名?: 数据类型 | undefined } = {
  属性名: 值
};

只读的属性

通过权限修饰符readonly定义只读的属性

1
2
3

let 变量名: { readonly 属性名: 数据类型 } = {
  属性名: 值
};

严格字面量赋值检测

首次给类型为非空对象的变量赋值时，TypeScript会采用严格字面量赋值检测，此时要求对象属性与类型定义的接口完全相同，不能出现多余属性
如果不是首次给变量赋值，TypeScript不会采用严格字面量赋值检测，可以出现多余属性

let 变量名1: { 属性名1: 数据类型, 属性名2: 数据类型 } = {
  属性名1: 值,
  属性名2: 值
};

let 变量名2: { 属性名1: 数据类型 } = 变量名1;

对象所有属性的联合类型

interface 接口名 {
  属性名1: 数据类型;
  属性名2: 数据类型;
}

let 变量名: keyof 接口名;

相当于对象所有属性的联合类型

interface 接口名 {
  属性名1: 数据类型;
  属性名2: 数据类型;
}

let 变量名: "属性名1" | "属性名2";

函数类型

定义函数数据类型

通过函数声明定义函数

1	function 函数名() {}

通过函数表达式定义函数

1	let 函数名: () => void = function () {};

自动类型推导

1	let 函数名 = function () {};

定义形参的数据类型

1	function 函数名(形参名: 数据类型) {}

1	function 函数名(形参名1: 数据类型, 形参名2: 数据类型) {}

自动类型推导，形参的数据类型为any类型

1	function 函数名(形参名) {}

不定长形参

1	function 函数名(...形参名: 数据类型[]) {}

可选的形参

通过?定义可选的形参

1	function 函数名(形参名?: 数据类型) {}

可选的函数形参的数据类型实质上是这个数据类型与undefined类型的联合类型（数据类型 | undefined）

1	function 函数名(形参名?: 数据类型 \| undefined) {}

函数具有多个形参时，可选的形参应该放在末尾

1	function 函数名(形参名1: 数据类型, 形参名2?: 数据类型) {}

形参的默认值

1	function 函数名(形参名: 数据类型 = 默认值) {}

数据类型推导

1	function 函数名(形参名 = 默认值) {}

有默认值的形参可以不传递实参，也可以接收unedfined值作为实参，最终实参的值都是默认值

function 函数名(形参名 = "默认值") {
  console.log(形参名);
}

函数名(); // "默认值"
函数名(undefined); // "默认值"

函数作为实参

函数作为其他函数的实参时，这个函数的形参最好直接数据类型推导，因为在其他函数已经定义了这个函数的形参类型

1
2
3

function 函数名(f: (形参名: 数据类型) => void) {}

函数名(function (形参名) {});

函数作为其他函数的实参时，这个函数的形参个数无需匹配

1
2
3

function 函数名(f: (形参名1: 数据类型, 形参名2: 数据类型) => void) {}

函数名(function (形参名1) {});

定义返回值的数据类型

1
2
3

function 函数名(): 数据类型 {
  return 返回值;
}

自动类型推导，返回值的数据类型为void类型

1	function 函数名() {}

空类型

void类型用于描述一个函数没有返回值

1	function 函数名(): void {}

如果如果函数的返回值类型为void，返回值也可以是undefined

1
2
3

function 函数名(): void {
  return undefined;
}

如果函数的返回值类型void是由上下文推导而得来的，那么不强制要求_不返回任何数据或返回undefined，否则必须_不返回任何数据或返回undefined

永无类型

never类型可以用于描述一个函数永远不会成功得到返回值，比如：死循环、抛出异常

1
2
3

function 函数名(): never {
  while (true);
}

1
2
3

function 函数名(): never {
  throw new Error();
}

never类型也可以用于描述不应当被赋值为这个类型的变量，如果被赋值为这个类型的变量，则会编译期报错

function 函数名(形参名: 数据类型) {
  if (typeof 形参名 === "string") {
    let 变量名: never = 形参名;
  }
}

函数的重载

编写重载签名
编写通用的实现
调用重载函数，而不要调用通用函数

function fn(arg1: string, arg2: string)
function fn(arg1: number, arg2: number)
function fn(arg1: any, arg1: any) {
  console.log(arg1 + arg2);
}

fn(0, 0); // 0
fn("0", "0"); // "00"

字面量类型

1	let 变量名: 值 = 值;

任意类型

1	let 变量名: any = 值;

any类型的变量可以赋值给非any类型的变量，所以会污染原本有数据类型的变量，这个变量的数据类型最终会根据传递的数据重新自动推导

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

b = a;
console.log(typeof b); // "string"

any类型的变量可以直接调用属性和方法

1
2
3

let a: any = "";

console.log(a.length);

未知类型

1	let 变量名: unknown = 值;

unknow类型的变量不可以赋值给非unknow类型的变量，所以不会污染原本有数据类型的变量

let a: unknown;
let b: number;
let c: unknown;

// b = a;
c = a;

unknown类型的变量不可以直接操作任意属性和方法，但是可以通过数据类型转换，从而调用属性和方法

let a: unknown = "";
let b: string;

// console.log(a.length);

if (typeof a === "string") {
  b = a;
  console.log(b.length);
}

b = a as string;
console.log(b.length);

b = <string>a;
console.log(b.length);

联合类型

只要满足一种数据类型就可以匹配成功

1	let 变量名: 数据类型 \| 数据类型;

交叉类型

必须满足两种数据类型才可以匹配成功
- 如果是非类或接口之间的交叉类型，那么实际为never类型
- 如果是类或接口之间的交叉类型，那么必须满足两者定义的所有属性才可以匹配成功

1	let 变量名: 数据类型 & 数据类型;

类型别名

定义类型别名

1	type 类型别名 = 数据类型;

使用类型别名

1	let 变量名: 类型别名;

类型守卫

类型守卫可以实现类型缩小

typeof操作符

let a: string | null;
let b: string;

if (typeof a === "string") {
  b = a;
}

instanceof操作符

let a: Date | null;
let b: Date;

if (a instanceof Date) {
  b = a;
}

in操作符

let a: { key1: string } | { key2: number };
let b: string;

if ("key1" in a) {
  b = a.key;
}

类型断言

类型断言可以实现类型缩小，也可以实现类型放大

let a: unknown = "";
let b: string;

b = a as string;

let a: unknown = "";
let b: string;

b = <string>a;

非空类型断言

告诉编译器，这个变量一定不为空

let a: string | null;
let b: string;

b = a!;

常量类型断言

告诉编译器，自动类型推导时，全部按照字面量类型

let a = { key: "value" } as const;
let b: "value";

b = a.key;

映射类型

将旧数据类型映射为新数据类型

type 映射类型 = {
  [Property in keyof T]: T[Property]
}

type 新数据类型名 = 映射类型<旧数据类型名>

添加或移除修饰符

readonly、+readonly：添加readonly修饰符，+为缺省值
?、+?：添加?修饰符，+为缺省值

type 映射类型 = {
  +readonly [Property in keyof T]+?: T[Property]
}

type 新数据类型名 = 映射类型<旧数据类型名>

-readonly：移除readonly修饰符
-?：移除?修饰符

type 映射类型 = {
  -readonly [Property in keyof T]-?: T[Property]
}

type 新数据类型名 = 映射类型<旧数据类型名>

完成

【笔记】OpenClaw学习笔记

2026-03-11T17:36:19.000Z

前言

OpenClaw学习笔记

初始化

1	openclaw onboard

修改配置

1	openclaw config

网关

启动网关

1	openclaw gateway start

停止网关

1	openclaw gateway stop

重启网关

1	openclaw gateway restart

查看网关状态

1	openclaw gateway status

插件

查看已安装的插件列表

1	openclaw plugin list

安装插件

：npm包名

1	openclaw plugin install

完成

【踩坑】OpenClaw报错

2026-03-10T21:25:26.000Z

前言

OpenClaw报错

报错

WebUI报错：openclaw origin not allowed (open the Control UI from the gateway host or allow it in gateway.controlUi.allowedOrigins)

原因

当前域不允许访问

解决方法

修改配置文件，配置允许访问的域

~/.openclaw/openclaw.json

{
  "gateway": {
    "controlUi": {
      "allowedOrigins": [
        "*"
      ]
    }
  }
}

报错

WebUI报错：control ui requires device identity (use HTTPS or localhost secure context)

原因

不允许非HTTPS访问

解决问题

修改配置文件，允许非HTTPS访问

~/.openclaw/openclaw.json

{
  "gateway": {
    "controlUi": {
      "allowedOrigins": [
        "*"
      ],
      "dangerouslyDisableDeviceAuth": true
    }
  }
}

踩坑

WebUI报错：device identity required

原因

缺少身份认证

解决方法

访问WebUI时添加查询字符串参数?token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

踩坑

WebUI报错：unauthorized: gateway token mismatch (open the dashboard URL and paste the token in Control UI settings)

原因

身份验证错误

解决方法

添加正确的token作为访问WebUI时添加查询字符串参数?token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
查询token

~/.openclaw/openclaw.json

{
  "gateway": {
    "auth": {
      "token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
    }
  }
}

完成

参考文献

CSDN——临水逸
 CSDN——熟悉开机关机重启