初始设定

发表于 本文字数： 阅读时长 ≈ NaN:aN
const p1 = new Promise((resolve, reject) => { reject('error') }) p1.then(() => { console.log(1) }) .catch((err) => { console.log(err) }) .then(() => { console.log(2) })

发表于 本文字数： 阅读时长 ≈ NaN:aN
// Promise的状态需要 完成时 才会加入微队列 Promise.resolve() .then(() => { Promise.resolve() .then(() => console.log(1)) .then(() => console.log(3)) }) .then(() => { console.log(2) })

发表于 本文字数： 阅读时长 ≈ NaN:aN
// 主线程从上到下按顺序执行 // 遇到宏任务会将宏任务放入宏队列中，遇到微任务会将其放入微队列中。 // 主线程运行完毕，然后清空微队列，之后会从宏队列取出一个宏任务作为主线程运行新的一轮循环 // 宏任务 setTimeout, setImmediate, requestAnimationFrame // 微任务 Promise, Process.nextTick console.log(1) setTimeout(() => { console.log(4) Promise.resolve().then(() => console.log(5)) }, 0) Promise.resolve().then(() => { console.log(3) setTimeout(() => console.log(6), 0) }) console.log(2)

发表于 本文字数： 阅读时长 ≈ NaN:aN
// 宏 1 8 7 // 微 11 3 9 4 10 // log: 2 6 setTimeout(function () { console.log(1) }, 0); new Promise(function (resolve, reject) { console.log(2) for (var i = 0; i < 10000; i++) { if (i === 10) { console.log(10) } i == 9999 && resolve(); } console.log(3) }).then(function () { console.log(4) }) console.log(5); // 2, 10, 3, 5, 4, 1

发表于 本文字数： 阅读时长 ≈ NaN:aN
// 宏 1 7 8 // 微 11 3 9 4 10 // log: 2 6 setTimeout(function () { console.log(1) }, 0) Promise.resolve().then(() => console.log(11)) new Promise(function (resolve, reject) { console.log(2) resolve() }) .then(function () { console.log(3) Promise.resolve() .then(() => console.log(9)) .then(() => console.log(10)) setTimeout(function () { console.log(7) }, 0) }) .then(function () { console.log(4) setTimeout(function () { console.log(8) }, 0) }) console.log(6) // 2, 6, 3, 4, 1

发表于 本文字数： 3k 阅读时长 ≈ 3 分钟

TypeScript 提供了许多内置的工具类型（Utility Types），这些工具类型可以用来简化类型操作，帮助开发者更灵活地处理类型。以下是一些常用的工具类型：

TypeScript 提供了许多内置的工具类型（Utility Types），这些工具类型可以用来简化类型操作，帮助开发者更灵活地处理类型。以下是一些常用的工具类型：

# 1. Partial<T>

  • 定义：将类型 T 的所有属性都变为可选的。

  • 用途：常用于函数参数、配置对象或部分更新场景。

  • 示例：

    1
    2
    3
    4
    5
    type Person = {
        name: string;
        age: number;
    };
    type PartialPerson = Partial<Person>;

    等价于：

    1
    2
    3
    4
    type PartialPerson = {
        name?: string;
        age?: number;
    }

# 2. Readonly<T>

  • 定义：将类型 T 的所有属性都变为只读的。

  • 用途：用于防止对象的属性被修改，确保数据的不可变性。

  • 示例：

    1
    2
    3
    4
    5
    type Person = {
      name: string;
      age: number;
    };
    type ReadonlyPerson = Readonly<Person>;

    等价于：

    1
    2
    3
    4
    type ReadonlyPerson = {
      readonly name: string;
      readonly age: number;
    }

# 3. Omit<T, K>

  • 定义：从类型 T 中排除掉属性 K ，返回一个新类型。

  • 用途：用于创建一个不包含某些属性的新类型。

  • 示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    type Person = {
        name: string;
        age: number;
        address: string;
    };
    type PersonWithoutAddress = Omit<Person, "address">;

    // 等价于：

    type PersonWithoutAddress = {
      name: string;
      age: number;
    }

# 4. Pick<T, K>

  • 定义：从类型 T 中选择属性 K ，返回一个新类型。

  • 用途：用于提取类型中的部分属性。

  • 示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    type Person = {
        name: string;
        age: number;
        address: string;
    };

    type PersonNameAndAge = Pick<Person, "name" | "age">;

    // 等价于：

    type PersonNameAndAge = {
      name: string;
      age: number;
    }

# 5. Exclude<T, U>

  • 定义：从类型 T 中排除掉类型 U 的部分。

  • 用途：用于从联合类型中排除某些类型。

  • 示例：

    1
    2
    3
    4
    5
    6
    type StringOrNumber = string | number;
    type StringOnly = Exclude<StringOrNumber, number>;

    // 等价于：

    type StringOnly = string;

# 6. Extract<T, U>

  • 定义：从类型 T 中提取出类型 U 的部分。

  • 用途：用于从联合类型中提取某些类型。

  • 示例：

    1
    2
    3
    4
    5
    6
    type StringOrNumber = string | number;
    type NumberOnly = Extract<StringOrNumber, number>;

    // 等价于：

    type NumberOnly = number;

# 7. NonNullable<T>

  • 定义：从类型 T 中排除 null 和 undefined 。

  • 用途：用于确保类型中不包含 null 和 undefined 。

  • 示例：

    1
    2
    3
    4
    5
    6
    type NullableString = string | null | undefined;
    type NonNullableString = NonNullable<NullableString>;

    // 等价于：

    type NonNullableString = string;

# 8. ReturnType<T>

  • 定义：获取函数类型 T 的返回值类型。

  • 用途：用于从函数类型中提取返回值类型。

  • 示例：

    1
    2
    3
    4
    5
    6
    type GetPerson = () => { name: string; age: number };
    type PersonType = ReturnType<GetPerson>;

    // 等价于：

    type PersonType = { name: string; age: number };

# 9. Parameters<T>

  • 定义：获取函数类型 T 的参数类型。

  • 用途：用于从函数类型中提取参数类型。

  • 示例：

    1
    2
    3
    4
    5
    6
    type AddFunction = (a: number, b: number) => number;
    type AddFunctionParameters = Parameters<AddFunction>;

    // 等价于：

    type AddFunctionParameters = [number, number];

# 10. InstanceType<T>

  • 定义：获取构造函数类型 T 的实例类型。

  • 用途：用于从构造函数类型中提取实例类型。

  • 示例：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    class Person {
        constructor(public name: string, public age: number) {}
    }

    type PersonInstance = InstanceType<typeof Person>;
    // 等价于：
    // type PersonInstance = {
    //     name: string;
    //     age: number;
    // }

# 11. Record<K, T>

  • 定义：创建一个新类型，其键为 K ，值为 T 。

  • 用途：用于创建一个对象类型，其中键和值的类型是固定的。

  • 示例：

    1
    2
    3
    4
    5
    6
    7
    type Status = "active" | "inactive";
    type StatusMap = Record<Status, number>;
    // 等价于：
    // type StatusMap = {
    //     active: number;
    //     inactive: number;
    // }

# 12. Awaited<T>

  • 定义：获取 Promise 类型 T 的最终值类型。

  • 用途：用于从 Promise 类型中提取最终值类型。

  • 示例：

    1
    2
    3
    4
    type PromiseString = Promise<string>;
    type AwaitedString = Awaited<PromiseString>;
    // 等价于：
    // type AwaitedString = string;

# 总结

这些工具类型在 TypeScript 中非常强大，可以帮助开发者更灵活地操作类型，减少重复代码，提高代码的可维护性和可读性。根据具体的使用场景，选择合适的工具类型可以极大地提升开发效率。

发表于 本文字数： 342 阅读时长 ≈ 1 分钟

# 查看 conda 版本

1
conda --version

# 创建虚拟环境

1
conda create -n env_name python=3.8

这表示创建 python 版本为 3.8、名字为 env_name 的虚拟环境。

# 查看虚拟环境

1
2
3
conda env list
conda info -e
conda info --envs

# 激活虚拟环境

1
conda activate env_name

# 退出虚拟环境

1
conda deactivate

# 删除虚拟环境

1
conda remove -n env_name --all

# 查看当前虚拟环境中安装的包

1
conda list

# 安装包

1
conda install package_name

# 卸载包

1
conda remove package_name

# 更新包

1
conda update package_name

发表于 本文字数： 499 阅读时长 ≈ 1 分钟

# PyCharm 配置 designer

  1. 打开 PyCharm，点击 File -> Settings -> Tools -> External Tools
  2. 创建一个名为 Qt Designer 工具，配置如下：
1
2
3
Name: Designer
Program: ...\lib\designer.exe #Qt designer.exe的路径
Working directory: $FileDir$
  1. 复制 Designer 工具，改名为 Designer Edit ，添加参数 Arguments ，其余不变:
1
Arguments: $FileName$
  1. 创建一个名为 PyUIC 工具，配置如下：
1
2
3
4
Name: PyUIC
Program: python.exe #python.exe的路径
Arguments: -m PyQt5.uic.pyuic  $FileName$ -o $FileNameWithoutExtension$.py
Working directory: $FileDir$

  1. Designer 的作用是创建一个新的 ui 文件；
    Designer Edit 的作用是编辑已有的 ui 文件；
    PyUIC 的作用是将 ui 文件转换为 py 文件。

  2. 配置完成后，点击 OK 保存。

发表于 分类于 本文字数： 988 阅读时长 ≈ 1 分钟

flex是常见的布局方式，这里介绍flex和margin搭配使用的一些技巧。

阅读全文 »

发表于 分类于 本文字数： 940 阅读时长 ≈ 1 分钟

在Vue项目中，静态资源在动态访问的情况下，会存在找不到资源的问题，这是因为Vue在打包时，会将静态资源打包到dist目录下。而在动态访问静态资源时，vite打包无法正确解析路径，导致找不到资源。

阅读全文 »
0%