Any way to use this with TypeScript and not have "as string" all over the codebase?

This is part question, part feature request.

In my code, I constantly have to typecast:

this.$notify.error({
  title: this.$t('auth.invalidSignupTitle') as string,
  message: this.$t('general.error') as string,
});

If I don’t, I get this error: Type ‘TranslateResult’ is not assignable to type ‘string’

Is there some workaround for this? Maybe something we can declare once, so it always returns string?

[alexeigs]

You could also use $tc instead of $t whenever you just need the translation without further ado as this function returns a string always.

[piktur]

// vue-i18n.d.ts

import VueI18n, {
  Path, Values, Locale,
} from 'vue-i18n/types'

/**
 * Overloads VueI18n interface to avoid needing to cast return value to string.
 * @see https://github.com/kazupon/vue-i18n/issues/410
 */
declare module 'vue-i18n/types' {
  export default class VueI18n {
    t(key: Path, locale: Locale, values?: Values): string;
    t(key: Path, values?: Values): string;
  }
}

declare module 'vue/types/vue' {
  interface Vue {
    $t: typeof VueI18n.prototype.t;
  }

  interface VueConstructor<V extends Vue = Vue> {
    i18n: typeof VueI18n.prototype;
  }
}

export {}

Did the trick for me.