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

Question

比方说，我有一个代码片段：

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

如何自动生成以下内容：

interface TodoInterface {
    name: string
    isDone: Boolean
}

寻找任何可以从代码片段获取界面的工具。它不一定要解决这个确切的场景。

Answer 1

在我使用的 IDE（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名工会成员。使用默认编译器选项，您将看不到带有 IntelliSense 的完整类型：

/*
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"]
*/

Playground 代码链接