TypeScript

TS自定义工具

获取对象中多有可选键

type OptionalKeys<T extends Record<string, unknown>> = {
  [K in keyof T]: T extends Record<K, T[K]> ? never : K;
}[keyof T]

获取对象类型的中每一个对应类型的集合

interface Tools {
  MOVE: 'dragOutlined'; //移动画布
  RESET: 'undoOutlined'; //还原画布
  RECTANGLE: 'borderOutlined'; //绘制矩形
  DELETE: 'deleteOutlined'; //删除选中
}

// 获取 Tools 接口中所有键对应的值的联合类型
type ToolsValues = Tools[keyof Tools];//type ToolsValues = 'dragOutlined' | 'undoOutlined' | 'borderOutlined' | 'deleteOutlined';

TS内置工具

1. Exclude<keyof T, OptionalKeys<T>>

   • Exclude 是 TypeScript 内置的工具类型，用于从第一个类型参数中排除第二个类型参数。
   • 这里的作用是从 T 的所有键（keyof T）中排除所有可选键（OptionalKeys<T>），剩下的就是所有必选键。

在 Vue + TypeScript 项目中，确保 TypeScript 正确地识别和使用 .d.ts 文件中的类型定义，通常涉及以下步骤：

1. 创建 .d.ts 文件：确保你有一个或多个包含类型定义的 .d.ts 文件，并将它们放置在适当的目录中（例如，types 文件夹）。
2. 配置 tsconfig.json：修改你的 tsconfig.json 文件，确保 TypeScript 编译器能够找到和使用这些类型定义文件。

以下是详细的步骤：

1. 创建 .d.ts 文件

例如，创建一个 types 文件夹，并在其中创建一个 custom.d.ts 文件：

// types/custom.d.ts
//分模块
declare module 'my-module' {
  export function myFunction(): void;
}
//全局定义类型
interface MyInterface {
  name: string;
  age: number;
}

2. 配置 tsconfig.json

打开你的 tsconfig.json 文件，并确保包含以下配置：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "types": ["types"]
    },
    "typeRoots": [
      "./node_modules/@types",
      "./types"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "types/**/*.d.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

3. 确保项目结构正确

确保你的项目结构如下：

css复制代码my-vue-project/
├── src/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   └── main.ts
├── types/
│   └── custom.d.ts
├── tsconfig.json
└── package.json

4. 使用类型定义

在你的 .ts 文件中，你可以直接使用 .d.ts 文件中定义的类型。例如：

typescript复制代码// src/main.ts

import { myFunction } from 'my-module';

const obj: MyInterface = {
  name: 'John Doe',
  age: 30
};

myFunction();

这样，TypeScript 会自动从 types/custom.d.ts 文件中获取类型定义。

5. 检查和重启 TypeScript 服务

确保你的开发环境（例如 VS Code）已经正确配置，并且 TypeScript 服务已重启，以确保它能够识别和加载新的类型定义文件。

注意事项

• 确保你的 .d.ts 文件包含有效的 TypeScript 类型定义。
• 如果你在 src 目录下有很多类型定义文件，确保它们都被包含在 tsconfig.json 的 include 部分中。

按照上述步骤配置项目后，TypeScript 应该能够自动识别并使用 .d.ts 文件中的类型定义。

获取对象实列类型

使用InstanceType结合typeof ：InstanceType

class Viewer  {
    constructor(config: any){};
    start(){};
    play(){};
}
let viewer:InstanceType<typeof Viewer>

忽略函数参数未使用（使用下划线）

确保你的 ESLint 配置中，@typescript-eslint/no-unused-vars 规则允许以下划线开头的变量被忽略。

在 .eslintrc.js 或 .eslintrc.json 中添加或修改以下配置：

{
  "rules": {
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "argsIgnorePattern": "^_", // 忽略以下划线开头的参数
        "varsIgnorePattern": "^_", // 忽略以下划线开头的变量
        "caughtErrorsIgnorePattern": "^_" // 忽略以下划线开头的 catch 参数
      }
    ]
  }
}

• argsIgnorePattern: "^_"：表示以下划线开头的参数不会被标记为未使用。
• varsIgnorePattern: "^_"：表示以下划线开头的变量不会被标记为未使用。
• caughtErrorsIgnorePattern: "^_"：表示以下划线开头的 catch 参数不会被标记为未使用。

2. 确保使用的是 @typescript-eslint/no-unused-vars

如果你使用的是 TypeScript，确保 ESLint 使用的是 @typescript-eslint/no-unused-vars 规则，而不是 ESLint 默认的 no-unused-vars 规则。默认的 ESLint 规则可能无法正确处理 TypeScript 的类型和语法。

在 .eslintrc.js 或 .eslintrc.json 中禁用默认的 no-unused-vars，并启用 @typescript-eslint/no-unused-vars：

json

复制

{
  "rules": {
    "no-unused-vars": "off", // 禁用默认规则
    "@typescript-eslint/no-unused-vars": "error" // 启用 TypeScript 规则
  }
}

ts字典相互限制

// ... existing code ...

type FileGroupMap = {
  1: '高等植物'
  2: '哺乳动物'
  3: '鸟类'
  4: '两栖动物'
  5: '陆生昆虫'
  6: '水生生物'
  7: '爬行动物'
  8: '大型真菌'
}

type FileGroupValue = keyof FileGroupMap
type FileGroupLabel = FileGroupMap[FileGroupValue]

type FileGroupItem = {
  [K in FileGroupValue]: {
    value: K
    label: FileGroupMap[K]
  }
}[FileGroupValue]

获取函数返回值类型

 let timer: ReturnType<typeof setTimeout> | null = null;