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+js点击箭头实现图片切换

    vue+js点击箭头实现图片切换

    这篇文章主要为大家详细介绍了vue+js点击箭头实现图片切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-06-06
  • Vue项目打包并部署nginx服务器的详细步骤

    Vue项目打包并部署nginx服务器的详细步骤

    vue项目开发好之后需要部署到服务器上进行外网访问,下面这篇文章主要给大家介绍了关于Vue项目打包并部署nginx服务器的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

    vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)

    这篇文章主要介绍了vue中实现点击按钮滚动到页面对应位置的方法,这段代码主要使用c3平滑属性实现,需要的朋友可以参考下
    2019-12-12
  • VUE跨域问题Access to XMLHttpRequest at

    VUE跨域问题Access to XMLHttpRequest at

    今天发现一个错误,VUE发送请求的时候不能请求到正确数据,VUE跨域问题Access to XMLHttpRequest at,本文就详细的来介绍一下解决方法,感兴趣的可以了解一下
    2022-05-05
  • Element Input组件分析小结

    Element Input组件分析小结

    这篇文章主要介绍了Element Input组件分析小结,详细的介绍了Input组件的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-10-10
  • IntelliJ IDEA编辑器配置vue高亮显示

    IntelliJ IDEA编辑器配置vue高亮显示

    这篇文章主要为大家详细介绍了IntelliJ IDEA编辑器配置vue高亮显示,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-09-09
  • vue如何动态给data中添加变量

    vue如何动态给data中添加变量

    这篇文章主要介绍了vue如何动态给data中添加变量问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • 解决vue-cli项目打包出现空白页和路径错误的问题

    解决vue-cli项目打包出现空白页和路径错误的问题

    今天小编就为大家分享一篇解决vue-cli项目打包出现空白页和路径错误的问题。具有很好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue前端动态导入文件之import.meta.glob导入图片详细过程

    vue前端动态导入文件之import.meta.glob导入图片详细过程

    在Vue3中你可以使用import.meta.glob来动态加载主题文件,并通过TypeScript实现精确的类型推断,这篇文章主要介绍了vue前端动态导入文件之import.meta.glob导入图片的相关资料,需要的朋友可以参考下
    2025-07-07
  • vue如何还原data中数据-重置

    vue如何还原data中数据-重置

    这篇文章主要介绍了vue如何还原data中数据-重置问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05

最新评论