diff --git a/.changeset/cool-trains-roll.md b/.changeset/cool-trains-roll.md new file mode 100644 index 0000000..134dce2 --- /dev/null +++ b/.changeset/cool-trains-roll.md @@ -0,0 +1,19 @@ +--- +'@vintl/vintl': minor +--- + +Added Vue types augmentation to type the global mixin properties + +Mixin-provided global properties like `$t`, `$fmt` and `$i18n` should be properly typed now. + +If you don't use the global mixin, the below augmentation will remove these unusable properties. + +```ts +declare global { + namespace VueIntlController { + interface Options { + globalMixin: false + } + } +} +``` diff --git a/README.md b/README.md index 74ff1d9..2036999 100644 --- a/README.md +++ b/README.md @@ -374,6 +374,14 @@ You can declare your messages by creating an ambient declaration file where you A map of locale resources provided by the load event listeners. +- `interface` `Options` + + A map of options affecting type augmentation. + + Currently supported options: + + - `globalMixin` (`boolean`, default `true`) - whether to augment Vue types to type mixin-provided global properties. +
Example @@ -394,6 +402,10 @@ import type { ExampleObject } from '~/utils/convertibleObject.ts' declare global { namespace VueIntlController { + interface Options { + globalMixin: false // Remove types for mixin-provided properties. + } + interface MessageValueTypes { // key doesn't matter as long as it does not collide with other key; // the interface used here solely for extensibility since you cannot diff --git a/src/types/index.ts b/src/types/index.ts index b2f3499..d04c6a7 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -1,3 +1,4 @@ +import './vue-augment.js' export * from './messages.js' export * from './locales.js' export * from './sources.js' diff --git a/src/types/vue-augment.ts b/src/types/vue-augment.ts new file mode 100644 index 0000000..1ec7faa --- /dev/null +++ b/src/types/vue-augment.ts @@ -0,0 +1,22 @@ +import type { InjectedProperties } from '../plugin.js' +import type { MessageValueType } from './messages.js' + +declare global { + namespace VueIntlController { + interface Options {} + } +} + +type ConditionalExtensions = VueIntlController.Options extends { + globalMixin: infer GlobalMixin +} + ? [GlobalMixin] extends [true] + ? InjectedProperties + : {} + : InjectedProperties + +declare module 'vue' { + export interface ComponentCustomProperties extends ConditionalExtensions {} +} + +export {} diff --git a/typings/globals.d.ts b/typings/globals.d.ts deleted file mode 100644 index c0f7fea..0000000 --- a/typings/globals.d.ts +++ /dev/null @@ -1,15 +0,0 @@ -import '@vintl/vintl/dist/types/messages.js' -// @ts-expect-error - self-import -import { InjectedProperties } from '@vintl/vintl' -// @ts-expect-error - self-import -import { MessageValueType } from '@vintl/vintl/plugin' - -declare module '@vue/runtime-core' { - interface ComponentCustomProperties - extends InjectedProperties {} - - interface GlobalComponents { - // @ts-expect-error -self-import - IntlFormatted: typeof import('@vintl/vintl/components').IntlFormatted - } -}