$t does not have TypeScript auto-completions

[innocenzi]

Reporting a bug?

The $t global function in SFCs' templates don't seem to support global TypeScript definitions.

The documentation regarding this topic doesn't mention $t but its definition look like it should support auto-completion.

Expected behavior

$t should provide auto-completion through the overriden DefineLocaleMessage interface, like t exported from useI18n does.

Reproduction

Create a i18n.json file with the following content:

Details

{
	"en": {
		"login": {
			"welcome_text_title": "Welcome back!",
			"welcome_text_help_text": "Enter your credentials to access the app.",
			"email_field_placeholder": "Enter your email",
			"password_field_placeholder": "Enter your password",
			"sign_in_button_label": "Sign in",
			"quick_login_cta_text": "Wanna login quickly?",
			"quick_login_link_text": "Click here."
		}
	}
}

Create a i18n.ts file with the following content:

import { createI18n } from 'vue-i18n'
import messages from './i18n.json'

export type MessageSchema = typeof messages['en']

declare module 'vue-i18n' {
	export interface DefineLocaleMessage extends MessageSchema {}
}

const i18n = createI18n<[MessageSchema], 'en'>({
	locale: 'en',
	inheritLocale: true,
	messages,
})

export default i18n

Create a Vue 3 application, import ./i18n.ts and register the exported plugin.

System Info

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Pro
    Memory: 91.94 MB / 16.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.11.0 - /opt/homebrew/bin/node
    Yarn: 1.22.18 - /opt/homebrew/bin/yarn
    npm: 8.19.2 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 107.0.5304.87
    Firefox: 106.0.5
    Safari: 16.0
  npmPackages:
    @vitejs/plugin-vue: ^3.2.0 => 3.2.0 
    @vue/runtime-core: ^3.2.41 => 3.2.41 
    vite: ^3.2.2 => 3.2.2 
    vite-plugin-run: ^0.2.0 => 0.2.0 
    vue: ^3.2.41 => 3.2.41 
    vue-i18n: ^9.0.0 => 9.2.2

Screenshot

No response

Additional context

No response

Validations

• Read the Contributing Guidelines
• Read the Documentation
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion
• The provided reproduction is a minimal reproducible example of the bug.

[TheVaan]

Any news about $t having TypeScript autocomplete?

[wJoenn]

In the meantime you can use the non-global method and you'll have all the intellisense you need, just like in the script

<template>
  <div>{{ t("foo") }}</div>
</template>

<script setup lang="ts">
  const { t } = useI18n()
</script>

[beqacrc]

Any updates?

[mitjans]

I was looking for this feature, is there any update on this?

I am open to contributing!

[mitjans]

When declaring types for $t in packages/vue-i18n/src/vue.d.ts, there's this parameter type Path added:

$t<...>(
  key: Key | ResourceKeys | Path
): TranslateResult

The definition of this type Path comes from packages/core-base/src/resolver.ts and is:

/** @VueI18nGeneral */
export type Path = string

This is breaking type inference for translations when using $t, $tc, and others. I've tried to remove | Path from all $t declarations and it works!

[kazupon]

close via #1883 1883