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

我最近正在使用Vue.js和Typescript中的遗留代码。该项目集成了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>

//pages/UserForm.vue
{{$t（“Fields.Direction”）}

但是，在

中有许多字符串不使用库，因为以前的开发人员手动包括这些字符串，如：

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

哎呀！好像有虫子

---

我的问题：是否有一种方法、库、插件或脚本可以警告所有未经翻译的字符串？

实际上，您有两种选择：

通过验证方法进行运行时检查

通过键入函数进行编译时检查

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

编译时检查 通过为传入值提供类型，可以使转换函数类型安全

问题一 通过简单字符串键入对深度嵌套结构的访问可能是一项非常困难的任务。如果您的目标是键入

$t

，则它将不接受翻译中存在的路径以外的任何字符串。只能使用进行操作。要更新到最新版本，请运行

npmi-D typescript

我已经问过了，这件事我做得很好。你可以退房。可以找到适合您的任务的类型

它可以看起来像这样：

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');

问题三

---

正如我看到的，每种语言都有文件夹结构，因此您需要以某种方式将其聚合为一个对象或类型，以使用

typedTranslate

function

从何处获取翻译字符串？您还提到，这是一个遗留项目。是否使用TypeScript？翻译是否在

.ts

文件或

.json

文件中？是。我很抱歉。我编辑了问题以添加信息。很好。请分享这些

.ts

文件的示例。我认为你的案子可以用纯打字机来处理。它只是一个带有键值对或键对象对的Typescript文件。对不起，我认为这是一个误解。项目中的所有键都有翻译。在VueJS项目中，有些元素（如

div

）的内容是字符串，但该内容不是

$t

函数：它是一个自然语言短语，如“这是一个错误”。所以，我想知道是否有任何工具（如爬虫或类似工具）可以检测这些字符串。嗯，所以你需要一些工具来标记每个

Ooops？是的<代码>Ooops

或任何未翻译的字符串。您计划如何区分未翻译的字符串？这是我的问题。我的问题是代码中分散了大量未翻译的字符串。

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')