vue-i18n使用$t導致的Typescript報錯問題及解決
更新時間：2025年08月04日 08:58:49 作者：下雪天的夏風
在Vue3項目中使用vue-i18n?v9.14.0時,$t屬性可能因類型未聲明導致TS報錯,解決方案是創(chuàng)建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>
所以根據(jù)報錯信息，猜測是 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使用微軟的開發(fā)接口Office?Web,實現(xiàn)線上文件預覽,預覽word，excel，pptx，pdf文件,有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
這篇文章主要介紹了vue3項目引入pinia報錯的簡單解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了Element Steps步驟條的使用方法,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
下面小編就為大家分享一篇搭建element-ui的Vue前端工程操作實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02
本文主要介紹了關于Vite項目打包后瀏覽器兼容性問題的解決方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-08-08
在vue項目中我們經常遇到圖標,下面這篇文章主要給大家介紹了關于如何基于Vue實現(xiàn)自定義組件的方式引入圖標的相關資料,文章通過示例代碼介紹的非常詳細,需要的朋友可以參考下2021-07-07
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組件問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-09-09
Vue.js中一個很重要的知識點是組件通信,不管是業(yè)務類的開發(fā)還是組件庫開發(fā),都有各自的通訊方法,下面這篇文章主要給大家介紹了關于Vue3常用的通訊方式的相關資料,需要的朋友可以參考下2022-05-05
vite5+vue3+?import.meta.glob動態(tài)導入vue組件圖文教程
import.meta.glob是Vite提供的一個特殊功能,它允許你在模塊范圍內動態(tài)地導入多個模塊,這篇文章主要給大家介紹了關于vite5+vue3+?import.meta.glob動態(tài)導入vue組件的相關資料,需要的朋友可以參考下2024-07-07