如何为非官方Vue模块（如vue-clickaway）编写TypeScript声明文件？

先针对你遇到的报错，咱们一步步来搞定：

1. 优先尝试安装官方类型包 #

TypeScript社区很多常用包都有对应的@types/xxx类型声明包，先试试安装vue-clickaway的官方类型：

npm install @types/vue-clickaway --save-dev
# 用yarn的话就执行
yarn add @types/vue-clickaway --dev

如果安装成功，重启你的代码编辑器和TypeScript编译器，报错应该就自动消失了。

2. 官方类型包不存在？手动写声明文件 #

如果上面的命令报错（比如提示找不到这个包），那就自己动手创建类型声明文件：

步骤1：创建类型文件目录 #

在项目的src文件夹下新建一个types目录（如果还没有的话），然后在里面创建vue-clickaway.d.ts文件。

步骤2：编写声明内容 #

把下面的代码复制到这个文件里：

declare module 'vue-clickaway' {
  // 导入Vue的类型，确保能正确识别mixin的类型
  import type { ComponentOptionsMixin } from 'vue';

  // 声明包导出的mixin
  export const mixin: ComponentOptionsMixin;
}

步骤3：配置TypeScript识别这个文件 #

打开项目根目录的tsconfig.json，找到include数组，把咱们新建的类型目录加进去：

{
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "./src/types/**/*.d.ts" // 加上这一行
  ]
}

保存后重启编译器，报错应该就解决了。

其实写自定义声明文件的核心就是搞清楚包的导出内容，然后用TypeScript语法把它描述出来，下面是通用步骤：

1. 先搞清楚包的导出结构 #

先看包的官方文档，或者直接打开node_modules里对应包的源码，弄明白它到底导出了什么：

• 是单个函数？还是一个对象？
• 是Vue的mixin、自定义指令？还是普通工具函数？
• 有没有默认导出和命名导出？

2. 创建对应的.d.ts文件 #

在项目的类型目录（比如src/types）下，新建一个和包名同名的.d.ts文件，比如包叫my-custom-vue-package，就创建my-custom-vue-package.d.ts。

3. 编写类型声明 #

根据包的导出内容写声明，举几个常见例子：

例子1：导出Vue自定义指令的包 #

如果包导出一个自定义指令，比如：

// 包的源码
export const myDirective = {
  mounted(el, binding) { /* ... */ },
  updated(el, binding) { /* ... */ }
}

那声明文件这么写：

declare module 'my-custom-vue-package' {
  import type { Directive } from 'vue';

  export const myDirective: Directive;
}

例子2：导出工具函数的包 #

如果包导出一个加法函数：

// 包的源码
export function add(a, b) {
  return a + b;
}

声明文件：

declare module 'my-utils-package' {
  export function add(a: number, b: number): number;
}

例子3：默认导出一个对象的包 #

如果包是默认导出一个配置对象：

// 包的源码
export default {
  apiUrl: 'https://example.com',
  fetchData() { /* ... */ }
}

声明文件：

declare module 'my-default-package' {
  export default {
    apiUrl: string;
    fetchData: () => Promise<any>;
  }
}

4. 让TypeScript识别你的声明文件 #

最后确保tsconfig.json的include数组包含了你的类型文件目录，这样TypeScript编译时就能读取到这些自定义声明了。

内容的提问来源于stack exchange，提问作者wrahim