Question

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

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

interface Modal {
    type: keyof types;
}

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

Answer 1

您可以获得此信息，但是问题是types扩展为string[]，这丢失了有关数组中哪些特定字符串以及其中哪些字符串的信息。订单。

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

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开始，将有this issue，它也使您可以跟踪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
}

基于静态数组创建TypeScript接口

2 个答案: