从推断出的 TypeScript 接口生成显式接口代码。

Question

假设我有一个代码片段:

const todo = {name: "Learn Some TS", isDone: true}

我该如何自动生成以下内容：

interface TodoInterface {
    name: string
    isDone: Boolean
}

我正在寻找一些工具，可以从代码片段中获取接口。这些工具不一定要解决这个确切的场景。

- jrhicks

---

我猜WebStorm可以做到。 - user12251399

我的做法是使用智能感知(IntelliSense)功能，在IDE中将鼠标悬停在todo上（例如，VS code会显示此信息），然后就可以看到const todo: { name: string; isDone: boolean; }的内容，然后我就可以将其复制粘贴。不确定这是否可以算作“自动”，如果可以的话，我可以撰写一个答案。 - jcalz

啊，我明白了。将鼠标悬停在变量“todo”上，然后您就可以从IntelliSense的快速信息中复制/粘贴。 - jrhicks

@jcalz提到的方法可能是最容易理解的，但请注意它会截断长类型（具有许多成员的联合、具有许多属性的接口等），并用“...”表示截断。根据您的数据复杂性，您可能会对第三方工具（如quicktype）感兴趣。 - jsejcksn

Answer 1

在我使用的集成开发环境（VSCode和TypeScript Playground），我将指针悬停在我想要捕获类型的值上。这会显示IntelliSense快速信息，描述该类型，您可以复制并粘贴它。

对于...

const todo = { name: "Learn Some TS", isDone: true }

提供的信息看起来像这样

/* const todo: {
    name: string;
    isDone: boolean;
} */

可以复制、粘贴和修改，以便为您提供。

interface TodoInterface {
  name: string;
  isDone: boolean;
}

补充屏幕截图演示：

---

请注意，编译器选项可能会截断长类型。例如，假设您有以下类型：

type SomeFiltered<T extends any[]> =
  T extends [infer F, ...infer R] ? [F, ...SomeFiltered<R>] | SomeFiltered<R> : []

它接受一个元组类型，并生成其所有可能过滤版本的联合类型。由于每个元素可以存在或不存在，因此您最终将元素的元组转换为 2 元组的联合类型。这是很多的。因此，这个……

type LongType = SomeFiltered<["A", "B", "C", "D", "E"]>

可以预计将有32个工会成员。使用默认编译器选项，您将无法在智能感知中看到完整的类型：

/*
type LongType = [] | ["A", "B", "C", "D", "E"] | ["B", "C", "D", "E"] | ["C", "D", "E"] |
  ["D", "E"] | ["E"] | ["D"] | ["C"] | ["C", "E"] | ["C", "D"] | ["B"] | ["B", "D", "E"] |
  ["B", "E"] | ... 18 more ... | [...]
*/

看到 ... 18 more ... 和 [...] 的截断。

您可以通过启用 --noErrorTruncation 编译器标志 来禁用此类截断。（这个名字有点不太好，因为它不仅在错误消息中，而且在任何地方都会抑制显示的类型名称的截断。）然后您会得到这个：

/* with --noErrorTruncation=true
type LongType = ["A", "B", "C", "D", "E"] | ["B", "C", "D", "E"] | ["C", "D", "E"] | 
  ["D", "E"] | ["E"] | [] | ["D"] | ["C", "E"] | ["C"] | ["C", "D"] | ["B", "D", "E"] | 
  ["B", "E"] | ["B"] | ["B", "D"] | ["B", "C", "E"] | ["B", "C"] | ["B", "C", "D"] | 
  ["A", "C", "D", "E"] | ["A", "D", "E"] | ["A", "E"] | ["A"] | ["A", "D"] | 
  ["A", "C", "E"] | ["A", "C"] | ["A", "C", "D"] | ["A", "B", "D", "E"] | 
  ["A", "B", "E"] | ["A", "B"] | ["A", "B", "D"] | ["A", "B", "C", "E"] | 
  ["A", "B", "C"] | ["A", "B", "C", "D"]
*/

---

代码操场链接

- jcalz