如何查找 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 函数