1. 问题描述

Vue3项目中，使用vue-i18n，在模版中使用$t时，页面可以正常渲染，但是类型报错。

相关依赖版本如下：

"dependencies": {
    "vue": "^3.4.29",
    "vue-i18n": "^9.14.0",
    // 其它依赖
},

2. 解决方法

手动给 $t 添加类型声明。

创建一个类型声明文件vue-i18n.d.ts，并将其添加到 tsconfig.json 配置文件的 include 配置项中。文件内容如下：

export {};

declare module '@vue/runtime-core' {
    // 提供全局属性 `$t`
    interface ComponentCustomProperties {
        $t: (message: string) => string;
    }
}

参考文档

• 博客：vue-i18n 使用 $t 导致的 Typescript 报错问题
• Vue3官网 ：扩展全局属性