Working with a library called vue-i18n, I came across the following declaration in its types/index.d.ts file (edited for brevity):
declare class VueI18n {
t(key: VueI18n.Path, values?: VueI18n.Values): VueI18n.TranslateResult;
t(key: VueI18n.Path, locale: VueI18n.Locale, values?: VueI18n.Values): VueI18n.TranslateResult;
}
declare module 'vue/types/vue' {
interface Vue {
$t: typeof VueI18n.prototype.t;
}
}
I'm interested in changing the return type of the t function from TranslateResult to a string without extending it into a new interface. To achieve this, I tried creating a custom declarations.d.ts file:
import VueI18n from 'vue-i18n';
declare module 'vue/types/vue' {
interface Vue {
$t(key: VueI18n.Path, values?: VueI18n.Values): string;
$t(
key: VueI18n.Path,
locale: VueI18n.Locale,
values?: VueI18n.Values
): string;
}
}
However, I encountered an error:
[ts] Duplicate identifier '$t'.
Is there a way to modify the existing type without extending it or creating a new interface? Any suggestions?
EDIT:
It seems like in-place override may not be possible. How can I avoid repeating as string when using $t function?
this.msg = this.$t('blah') as string;
this.str2 = this.$t('thisToo') as string;
this.strX = this.$t('another') as string;
this.g = this.$t('test') as string;