Typescript error when using pluralization and formatting

[jangxx]

Reporting a bug?

I'm trying to use pluralization and formatting together. This works as it should, but the TypeScript types seem to be incorrect, which makes it impossible to build the project properly.

Expected behavior

The types match the actual call signature of the t function and I can successfully build my project.

Reproduction

// messages.json
{
  "contacts": "{count} contact | {count} contacts"
}

// somewhere else
console.log(t("contacts", 1, { count: 1})) // prints "1 contact" correctly, but raises an error while building

The error in question:

  The last overload gave the following error.
    Argument of type 'number' is not assignable to parameter of type 'Record<string, unknown>'.

1   console.log(t("contacts", 1, { count: 1 }));
                              ~

  node_modules/vue-i18n/dist/vue-i18n.d.ts:1244:5
    1244     <Key extends string>(key: Key | ResourceKeys | number, named: NamedValue, defaultMsg: string): string;
             ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    The last overload is declared here.

System Info

System:
    OS: Linux 5.15 Linux Mint 21.1 (Vera)
    CPU: (32) x64 AMD Ryzen 9 7950X3D 16-Core Processor
    Memory: 45.44 GB / 61.96 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.17.1 - /usr/bin/node
    npm: 9.6.7 - /usr/bin/npm
  Browsers:
    Chrome: 117.0.5938.92
  npmPackages:
    @vitejs/plugin-vue: ^4.0.0 => 4.1.0 
    @vue/tsconfig: ^0.1.3 => 0.1.3 
    vite: ^4.1.4 => 4.3.9 
    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.2.0 => 1.2.0

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

[github-actions]

Would you be able to provide a reproduction 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritise it based on its severity and how many people we think it might affect.

If Status: Need More Info labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 Reproduction mininal starter
👉 Reproduction starter with unpluguin-vue-i18n

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[jangxx]

https://stackblitz.com/edit/vitejs-vite-mtgsgc?file=src%2FApp.vue

It works correctly in the live preview, but when you enter npm run build into the terminal, it fails with the error I described.

[BobbieGoede]

This is actually correct behaviour but I think it differs from v8, the reason it only throws an error on build is due to the type-check, at runtime the passed options are unused/ignored but during type check it throws as count is not a valid option property.

// passing `plural` as options
t('results', null, { plural: 2 }) // works
// ^ confused with legacy 
$tc('results', 10, { count: 10 }) // does not work!

// passing named object with number
t('results', { count: 2 }) // works

So I suppose we could improve the docs, it's not exactly breaking per se as it's a different but similar function t() vs $tc.