如何为Vue3插件函数添加TypeScript类型标注——解决unknown类型错误

这个错误是因为TypeScript无法自动推断inject注入值的类型，默认返回unknown。解决核心是给注入的函数添加明确的类型定义，同时用类型安全的方式完成provide和inject的配对。

步骤1：定义明确的类型 #

首先替换掉代码中宽泛的Object类型，定义具体的类型接口：

import type { InjectionKey, App } from 'vue';

// 定义单个翻译项的类型
interface TranslationItem {
  locale: string;
  // 允许任意自定义键，对应翻译内容
  [key: string]: string | number | boolean;
}

// 定义翻译函数的类型
type TranslateFn = (translations: TranslationItem[], key: string) => TranslationItem | undefined;

// 创建类型安全的注入键，避免字符串键冲突
export const TranslateInjectionKey = Symbol() as InjectionKey<TranslateFn>;

步骤2：修改插件的install函数 #

在插件中使用类型化的注入键，并确保函数符合定义的类型：

export default {
  install: (app: App) => {
    // 假设lang是你已定义的当前语言变量，这里示例为zh-CN
    const lang = 'zh-CN';

    const translate: TranslateFn = (translations, key) => {
      return translations.find(item => {
        // 修正判断逻辑，确保key存在且locale匹配
        return item[key] !== undefined && item.locale === lang;
      });
    };

    // 使用类型化的注入键提供函数
    app.provide(TranslateInjectionKey, translate);
  }
};

步骤3：在组件中安全注入 #

在组件中使用定义好的注入键，TypeScript会自动推断正确的类型：

import { inject } from 'vue';
import { TranslateInjectionKey } from './你的插件文件路径';

// 此时translate的类型为TranslateFn | undefined
const translate = inject(TranslateInjectionKey);

// 如果确定该函数一定存在，可以用非空断言（谨慎使用）
// const translate = inject(TranslateInjectionKey)!;

// 或者提供默认实现，确保类型安全
// const translate = inject(TranslateInjectionKey, () => {
//   return (translations, key) => translations.find(item => item.locale === 'zh-CN' && item[key]);
// });

替代方案（不使用Symbol键） #

如果坚持使用字符串键'translate'，可以在inject时直接指定泛型：

import { inject } from 'vue';
import type { TranslateFn } from './你的类型定义文件';

const translate = inject<TranslateFn>('translate');

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