基于静态数组创建TypeScript接口

Question

我要创建一个静态字符串数组。 解释此问题的最佳方法是显示psedo接口的示例：

const types = ["error", "warning", "success"];

interface Modal {
    type: keyof types;
}

我需要按顺序在实际的js中使用这些类型，因此我希望有一种在接口中表达此类型的方法，因此不必重复数组和接口中的值。 这可能吗？

Answer 1

您可以得到它，但是问题在于types被扩展为string[] ，这丢失了有关数组中哪些特定字符串以及顺序的信息。

如果您只需要特定的字符串并且不关心顺序，则可以创建一个辅助函数，该函数使用技巧将types推断为较窄的类型（您可以阅读此问题以获取有关如何预防的更多信息扩大）：

const narrowArray = <K extends string>(...arr: K[]) => arr;

并使用它：

const types = narrowArray("error", "warning", "success");

现在推断types为Array<"error"|"warning"|"success"> 。 如果您希望Modal['types']是这些字符串之一（从您的帖子中不清楚... keyof当然不会这样做），则可以执行以下操作：

interface Modal {
    type: (typeof types)[number];  // "error" | "warning" | "success"
}

那应该为您工作。

---

也是相关的：从TypeScript 3.0开始，将有一种推断元组类型的方法，它也使您能够跟踪types的顺序。 它将是这样的：

// only works in TS3.0 and up
const narrowTuple = <K extends string[]>(...arr: K) => arr;
const types = narrowTuple("error", "warning", "success");
// types is inferred as type ["error", "warning", "success"]

现在，将types推断为三元组["error", "warning", "success"] ，因此TypeScript在编译时会知道，例如， types[1]特别是"warning" 。 （除非我不了解您希望Modal['type']是什么，否则您无需跟踪上面的Modal['type']定义的顺序。）

---

希望能有所帮助。 祝好运！

Answer 2

抱歉，无法在运行时动态创建接口。 它会破坏静态类型的全部目的。

但是，您可以执行以下操作：

export enum StatusCodes {
  error = 'error,
  success = 'success',
  warning = 'warning'
}
const types: Array<StatusCodes> = [StatusCodes.error, StatusCodes.success, StatusCodes.warning]

interface Modal {
  type: StatusCodes
}