typescript - 如何查找 Vuejs 项目的所有未翻译字符串？

Question

我最近在使用 Typescript 处理 Vue.js 中的遗留代码。该项目集成了 vue-i18n 库来处理翻译，它们由 this.$t 管理。在项目的所有组件中，翻译也包含在目录 translations/[en/es]/FileName.ts 中喜欢:

//translations/en/Forms.ts

export default {
  Fields: {
    Name: "Name",
    LastName: "Last name",
    Direction: "Full direction",
    ZipCode: "Zip code",
    Phone: {
        Number: "Number",
        Prefix: "Prefix"
    }
  }
};

翻译用法是:

//pages/UserForm.vue

<div>
   <label> {{$t("Fields.Direction")}} </label>
   <input type="text" name="directionField" required />
</div>

但是，在 <templates> 内有许多字符串不使用该库，因为以前的开发人员手动包含这些字符串，例如:

<div v-if="hasError">
    Oops! There seem to be bugs
</div>

我的问题:是否有一种方法、库、插件或脚本可以在不翻译的情况下警告所有字符串？

Answer 1

实际上你有两个选择:

1. 通过验证方法进行运行时检查
2. 通过输入函数检查编译时间

运行时检查

这个非常简单，只需通过一些辅助函数运行所有翻译，如果不存在翻译，就会向控制台抛出错误。但我认为，vue-i18n 已经提供了这样的功能，您在这里选择了选项 2。

编译时检查

您可以通过为传入值提供类型来使您的翻译函数类型安全。

第一个问题

通过简单的字符串键入对深层嵌套结构的访问可能是一项非常困难的任务。如果您的目标是输入 $t它不会接受除翻译中存在的路径以外的任何字符串的方式。它只能使用new TypeScript 4.1 version来完成 。要更新到最新版本，请运行 npm i -D typescript .

我已经问过了similar question并在这方面走得很远。你可以看看github repo of my properly-typed project .可以找到适合您任务的类型 here .

它看起来像这样:

type TranslationsStructure = {
    Fields: {
        Name: string,
        LastName: string,
        Direction: string,
        ZipCode: string,
        Phone: {
            Number: string,
            Prefix: string
        }
    }
}

const typedTranslate = <
  T extends Record<string, unknown>,
  P extends Leaves<T, D>,
  D extends string = '.',
>(path: P): OutputType<T, P, D> => {
  return /* use `$t(path)` here to get translation */path as any;
};

// correct, because `Fields.Name` path exists in `TranslationsStructure`
typedTranslate<TranslationsStructure, 'Fields.Name'>('Fields.Name');

// errors, because `Foo.bar` path exists in `TranslationsStructure`
typedTranslate<TranslationsStructure, 'Foo.bar'>('Foo.bar');

Playground link

也许我会很快将它作为 NPM 包发布，当我有时间这样做时。我会及时更新此主题。

问题二

不同的语言可能缺少不同的翻译。在这种情况下，您将需要根据所选语言进行类型检查。所以你的 typedTranslate函数将需要为不同的翻译传递不同的类型。

const en = {
    Fields: {
        Name: "Name",
        LastName: "Last name",
        Direction: "Full direction",
        ZipCode: "Zip code",
        Phone: {
            Number: "Number",
            Prefix: "Prefix"
        }
    }
};

const typedTranslate = <
  T extends Record<string, unknown>,
  P extends Leaves<T, D>,
  D extends string = '.',
>(path: P): OutputType<T, P, D> => {
  return /* use `$t(path)` here to get translation */path as any;
};

// correct, because `Fields.Name` path exists in `en` object
typedTranslate<typeof en, 'Fields.Name'>('Fields.Name')

// errors, because `Foo.bar` path exists in `en` object
typedTranslate<typeof en, 'Foo.bar'>('Foo.bar')

Playground link

问题三

如我所见，每种语言都有文件夹结构，因此您需要以某种方式将其聚合到一个对象或类型中以使用 typedTranslate功能