如何从 TypeScript 转到 JSON(i18next)并启用“转到声明”功能

huangapple go评论59阅读模式
英文:

How to enable "Go to declaration" from typescript to json (i18next)

问题

I'm working on a project that uses i18next with React and TypeScript, where translation keys are defined in .json files.

One drawback of switching to JSON for the translation files is that we can no longer use IntelliJ IDEA's "Go to declaration" or Ctrl + left-click feature to quickly navigate from a key usage in TypeScript to its declaration in the JSON file.

Is there any way to enable this without requiring all developers to download some third-party IntelliJ plugin?

I've googled for hours for any information about this.

I've made a .d.ts file to enable strong typing for where translation keys are used. What strikes me as odd is that IntelliJ/TypeScript is able to know when a key doesn't exist and warns about it, but at the same time, it doesn't know "where" that key exists whenever I type a correct key.

I also set resolveJsonModule: true in tsconfig, but to my limited understanding, it doesn't seem relevant.

英文:

Im working on a project that uses i18next with react and typescript, where translationkeys are defined in .json files.

One drawback of switching to json for the translation files, is that we can no longer use the intellij idea "Go to declaration" or ctrl + left-click feature, to quickly navigate from a key usage in typescript, to its declaration in the json file.

Is there any way to enable this without requiring all developers to download some third-party intellij plugin?

I've googled for hours for any information about this.

I've made a d.ts file to enable strong typing for where translationkeys are used. What strikes me as odd is that intellij/typescript is able to know when a key doesent exist and warns about it, but at the same time doesent know "where" that key exists whenever i type a correct key.

I also set resolveJsonModule:true in tsconfig, but to my limited understanding it doesent seem relevant.

答案1

得分: 0

这在技术上是不可能的,因为像“转到声明”这样的命令会在源代码文件(比如 .ts.js.d.ts)中查找声明,而你想要去_...到 JSON 文件中的声明。_

resolveJsonModule 标志也不能帮助你,因为根据文档的描述:

> 允许导入具有 '.json' 扩展名的模块,这在 Node 项目中是一种常见做法。这包括生成基于静态 JSON 结构的导入类型。

一个可能的解决方案是创建一个构建脚本,将你的 .json 文件转换为包含相同内容的 .js.ts 文件,然后 IDE 中的“转到声明”命令将跳转到该文件。

总之,你需要一种插件或自定义构建脚本。

免责声明: 我不使用 i18nextreact,这个回答基于我对 TypeScript 和 JetBrains Rider IDE(类似于 IntelliJ)的理解。

英文:

This is not technically possible because commands like Go To Declaration will look for a declaration in a source code file (think .ts or .js or .d.ts) whereas you want to go ...to its declaration in the json file.

The resolveJsonModule flag won't help you either because as per the docs:

> Allows importing modules with a ‘.json’ extension, which is a common practice in node projects. This includes generating a type for the import based on the static JSON shape.

One possible solution is to create a build script to take your .json file and output a .js or .ts file containing the same content, then IDE commands like Go To Declaration will jump to that file.

In summary: you will need some kind of plugin, or a custom build script.

DISCLAIMER: I don't use i18next or react, this answer is based on my understanding of both TypeScript and the JetBrains Rider IDE (which is like IntelliJ).

huangapple
  • 本文由 发表于 2023年2月14日 06:46:21
  • 转载请务必保留本文链接:https://go.coder-hub.com/75441892.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定