We have developed a basic landing page that showcases countries specified in a Vue-i18n language.json file. While the functionality is working well, we are encountering the following TypeScript errors:
[vue-tsc] Property 'code' does not exist on type 'never'.
[vue-tsc] Property 'name' does not exist on type 'never'.
It appears that the properties of a country cannot be found in the .json file. Even though we have defined the MessageSchema as enUS, per the instructions in the official documentation. No errors are present for other strings in the lang.json files; only when dealing with a list or array, it seems to not default to String.
You can access a test version in a CodeSandBox here. Below are the key files.
File 'en-US.json'
"page": {
"landing": {
"title": { "selectCountry": "Select your country" },
"countries": [
{ "code": "BEL", "name": "Belgium" },
{ "code": "NLD", "name": "The Netherlands" }
]
},
File '/boot/i18n.ts'
import enUS from 'src/i18n/en-US.json'
import nlBE from 'src/i18n/nl-BE.json'
export default boot(({ app }) => {
// Type-define 'enUS' as the master schema for the resource
type MessageSchema = typeof enUS
const i18n = createI18n<[MessageSchema], 'en-US' | 'nl-BE'>({
legacy: false,
locale: Quasar.lang.getLocale(),
fallbackLocale: 'en-US',
messages: { 'en-US': enUS, 'nl-BE': nlBE },
})
app.use(i18n)
})
File 'LandingPage.vue'
<template>
<q-page>
<div>
<q-card v-for="country in $tm('page.landing.countries')" :key="country.code">
<q-card-section>
<q-card-section>
<div> {{ $rt(country.name) }} </div>
</q-card-section>
</q-card-section>
</q-card>
</div>
</q-page>
</template>
Your assistance is greatly appreciated.