Type check with typescript v5 throws error in template $t

[freakzlike]

Reporting a bug?

After upgrade to typescript v5. The type check with vue-tsc throws errors with the usage of $t in vue template syntax. I think this might come from the exports definition in package.json, where you can set types per entry level. https://www.typescriptlang.org/docs/handbook/esm-node.html#packagejson-exports-imports-and-self-referencing

Expected behavior

Don't throw a type error on check

Reproduction

https://stackblitz.com/edit/vitest-dev-vitest-ztvbls?file=package.json

Run npm run type-check-v5 to check types with typescript@v5

This should print the following errors:

src/Hello.vue:7:8 - error TS2339: Property '$t' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => ...'.

7     {{ $t('test') }}
         ~~

src/Hello.vue:8:8 - error TS2339: Property '$t' does not exist on type '{ $: ComponentInternalInstance; $data: {}; $props: Partial<{}> & Omit<Readonly<ExtractPropTypes<{}>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>; ... 10 more ...; $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => ...'.

8     {{ $t('test_with_label', { label }) }}
         ~~


Found 2 errors in the same file, starting at: src/Hello.vue:7

Run npm run type-check-v4 to check types with typescript@v4

System Info

System:
    OS: Linux 5.15 Ubuntu 20.04.6 LTS (Focal Fossa)
    CPU: (5) x64 AMD Ryzen 5 4500U with Radeon Graphics
    Memory: 3.42 GB / 6.78 GB
    Container: Yes
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node
    npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm
  npmPackages:
    @vitejs/plugin-vue: 4.1.0 => 4.1.0
    @vue/eslint-config-standard-with-typescript: 8.0.0 => 8.0.0
    @vue/eslint-config-typescript: 11.0.2 => 11.0.2
    @vue/test-utils: 2.3.2 => 2.3.2
    @vue/tsconfig: 0.3.2 => 0.3.2
    vite: 4.3.1 => 4.3.1
    vitest: 0.30.1 => 0.30.1
    vue: 3.2.47 => 3.2.47
    vue-i18n: 9.2.2 => 9.2.2
    vue-router: 4.1.6 => 4.1.6
    vue-tsc: 1.4.4 => 1.4.4

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 Discussions

[lupas]

Related to #1327, should be fixed with #1388

[laterdayi]

some problem

[laterdayi]

@kazupon

[kazupon]

If you will avoid this issue, I would recommend installing the next tag version, (i.e. vue-i18n v9.3).
Currently in beta, this version has not changed much in terms of functionality from v9.2. Actually, It's used in nuxt i18n v8 beta.

[laterdayi]

@kazupon when is the next release planned

[Alia5]

This is beyond stupid.

Every one of the packages [...] is misconfigured.

microsoft/TypeScript#49160 (comment)

The package.json should've been fixed a long time ago.

[dkern]

If you will avoid this issue, I would recommend installing the next tag version, (i.e. vue-i18n v9.3). Currently in beta, this version has not changed much in terms of functionality from v9.2. Actually, It's used in nuxt i18n v8 beta.

I have exactly the same issue using vite and ts5. While build I get the exact same issue. I've tried using 9.3.0-beta.19 but have the same issue again. So it seems the newest version has the same problem ...

[dkern]

I was able to suppress this warning with a custom typescript definition. Therefore it's not needed to change the package.json in node_modules. Of course, this is not a real fix, but at least I can build the project again.

i18n.d.ts:

export {};

declare module 'vue' {
  interface ComponentCustomProperties {
    $t: (key: string) => string;
    $tm: (key: string) => []|{[p: string]: any};
  }
}

If you use more/other function of i18n you may need to add the to the interface.

[RamonDonadeu]

This will sound stupid but... i just updated all my packages and it worked again...

[rajmondx]

This is the current workaround I'm using to address the issue. The project has extensive $t usage from Vue 2, so once we’ve migrated all $t instances to const { t } = useI18n(), we’ll remove this.

import { ComposerTranslation, createI18n } from 'vue-i18n';

export const i18n = createI18n({
  globalInjection: true, // injects "this.$t" into vue components
  legacy: false
});

// todo: Remove me when CRL-52152 is done 
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    /**
     * @deprecated Official way is to use `const { t } = useI18n()` as described in https://vue-i18n.intlify.dev/guide/migration/vue3#migration-to-composition-api-from-legacy-api
     */
    $t: ComposerTranslation
  }
}