vue-i18n使用$t导致的Typescript报错问题及解决

 更新时间:2025年08月04日 08:58:49   作者:下雪天的夏风  
在Vue3项目中使用vue-i18n v9.14.0时,$t属性可能因类型未声明导致TS报错,解决方案是创建src/vue-i18n.d.ts文件,添加至tsconfig.json的include项中,声明$t属性类型

问题

在 Vue3 项目中使用 vue-i18n v9.14.0 时,可以:

<template>
	<div>{{ t('xxx') }}</div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
</script>

也可以直接使用 $t

<template>
	<div>{{ $t('xxx') }}</div>
</template>

虽然可以正常渲染,但会有 Typescript 的报错:

解决

因为 vue-i18n 在 Vue 实例上添加了该属性,比如:

<script setup lang="ts">
// getCurrentInstance 需要在组件中使用。
import { getCurrentInstance } from "vue";
const {
	appContext: {
		config: { globalProperties },
	},
} = getCurrentInstance();
console.log(globalProperties.$t);
</script>

所以根据报错信息,猜测是 globalProperties 对象上没有定义这个属性,所以报错。那就看下这个属性的类型定义:

// node_modules\@vue\runtime-core\dist\runtime-core.d.ts

export declare const getCurrentInstance: () => ComponentInternalInstance | null;

export interface ComponentInternalInstance {
    // ...
    appContext: AppContext;
}

export interface AppContext {
    // ...
    config: AppConfig;
}

export interface AppConfig {
	// ...
	globalProperties: ComponentCustomProperties & Record<string, any>;
}

// 默认为空
export interface ComponentCustomProperties {
}

解决:手动添加类型声明文件,给 ComponentCustomProperties 添加 $t 属性即可。

目录 src/vue-i18n.d.ts

/* eslint-disable */
import Vue from "vue";
declare module "@vue/runtime-core" {
	export interface ComponentCustomProperties {
		$t: (key: string, ...args: any[]) => string;
	}
}

注意,要保证该声明文件在 tsconfig.json 配置文件的 include 配置项中。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue使用Office Web实现线上文件预览

    vue使用Office Web实现线上文件预览

    这篇文章主要为大家介绍了vue使用微软的开发接口Office Web,实现线上文件预览,预览word,excel,pptx,pdf文件,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • vue3项目引入pinia报错的简单解决

    vue3项目引入pinia报错的简单解决

    这篇文章主要介绍了vue3项目引入pinia报错的简单解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Element Steps步骤条的使用方法

    Element Steps步骤条的使用方法

    这篇文章主要介绍了Element Steps步骤条的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • 搭建element-ui的Vue前端工程操作实例

    搭建element-ui的Vue前端工程操作实例

    下面小编就为大家分享一篇搭建element-ui的Vue前端工程操作实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 关于Vite项目打包后浏览器兼容性问题的解决方案

    关于Vite项目打包后浏览器兼容性问题的解决方案

    本文主要介绍了关于Vite项目打包后浏览器兼容性问题的解决方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08
  • 基于Vue实现自定义组件的方式引入图标

    基于Vue实现自定义组件的方式引入图标

    在vue项目中我们经常遇到图标,下面这篇文章主要给大家介绍了关于如何基于Vue实现自定义组件的方式引入图标的相关资料,文章通过示例代码介绍的非常详细,需要的朋友可以参考下
    2021-07-07
  • Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

    Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例

    这篇文章主要介绍了Vue 2 项目中配置 Tailwind CSS 和 Font Awesome 的最佳实践举例,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2025-05-05
  • 解决vue3+vite配置unplugin-vue-component找不到Vant组件

    解决vue3+vite配置unplugin-vue-component找不到Vant组件

    这篇文章主要为大家介绍了vue3+vite配置unplugin-vue-component找不到Vant组件问题解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-09-09
  • Vue3常用的通讯方式总结与实例代码

    Vue3常用的通讯方式总结与实例代码

    Vue.js中一个很重要的知识点是组件通信,不管是业务类的开发还是组件库开发,都有各自的通讯方法,下面这篇文章主要给大家介绍了关于Vue3常用的通讯方式的相关资料,需要的朋友可以参考下
    2022-05-05
  • vite5+vue3+ import.meta.glob动态导入vue组件图文教程

    vite5+vue3+ import.meta.glob动态导入vue组件图文教程

    import.meta.glob是Vite提供的一个特殊功能,它允许你在模块范围内动态地导入多个模块,这篇文章主要给大家介绍了关于vite5+vue3+ import.meta.glob动态导入vue组件的相关资料,需要的朋友可以参考下
    2024-07-07

最新评论