基于静态数组创建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'].)

希望有所帮助.祝好运!