从数组创建计算的 class 属性

Question

我有一个字符串文字数组，我想将其用作 class 的属性名称。

const propNames = ["a", "b", "c"] as const;

我想创建一个class喜欢

class Test {
    [name in typeof propNames[number]]: any;
}

但这给出了错误（在 WebStorm 检查中）：

TS1166: A computed property name in a class property declaration must refer to an expression whose type is a literal type or a 'unique symbol' type.
TS2464: A computed property name must be of type 'string', 'number', 'symbol', or 'any'.
TS2361: The right-hand side of an 'in' expression must be of type 'any', an object type or a type parameter.
TS2693: 'number' only refers to a type, but is being used as a value here.

我可以用

这样的属性定义一个类型

type Test = {
    [name in typeof propNames[number]]: any;
}

但我不知道如何将它变成具有这些属性的 class。

我有一个额外的问题，我认为目前不可能，但我可以通过将另一个字符串文字连接到它们来创建这些属性名称吗？

type Test = {
    [name + 'Prop' in typeof propNames[number]]: any;
}

Answer 1

为什么不定义一个类型，然后通过以下方式使用它：

type Test = {
    [key: TEST]: any;
}

其中 TEST 是类型。我从来没有冒险这样做过，但我知道它适用于原始类型。

希望它能带你去你想去的地方！

Answer 2

我通过定义中间类型并像命名空间一样使用它们来解决这个问题（包括额外的问题）：

const propNames = ["a", "b", "c"] as const;

// using DOM types for demonstration
type Canvases {
    [name in typeof propNames[number]]?: HTMLCanvasElement;
}
type Contexts {
    [name in typeof propNames[number]]?: CanvasRenderingContext2D;
}

// define class
class Test {
    canvases: Canvases = {};
    ctxs: Contexts = {};
}

// now access on instances
const t = new Test();
t.canvases.a; // HTMLCanvasElement
t.ctxs.b;     // CanvasRenderingContext2D

从数组创建计算的 class 属性

Creating computed class properties from array

literals

typescript

computed-properties