如何将别名添加到打字稿中的数字数组

Question

我正在尝试向数字数组添加一些别名，但打字稿不接受它，这是代码：

  interface FontSizeAliases {
  micro: number
  small: number
  default: number
  large: number
}


const fontSizes: number[] & FontSizeAliases = [12, 14, 16, 18, 22, 30, 40]
fontSizes.micro = fontSizes[0]
fontSizes.small = fontSizes[1]
fontSizes.default = fontSizes[2]
fontSizes.large = fontSizes[3]

编译器错误：

Type 'number[]' is not assignable to type 'number[] & FontSizeAliases'.
  Type 'number[]' is missing the following properties from type 'FontSizeAliases': micro, small, default, large

Answer 1

问题是当您将数组分配给 fontSizes 常量时，您的数组没有 micro 等，但该常量的类型需要它。

Object.assign 通常用于构建类似的东西（但请继续阅读，我会考虑第三个选项，我认为这可能是最好的）：

interface FontSizeAliases {
    micro: number;
    small: number;
    default: number;
    large: number;
}

const rawSizes = [12, 14, 16, 18, 22, 30, 40];
const fontSizes: number[] & FontSizeAliases = Object.assign(rawSizes, {
    micro: rawSizes[0],
    small: rawSizes[1],
    default: rawSizes[2],
    large: rawSizes[3],
});

Playground link

另一种选择是在 Partial<FontSizeAliases>:

中构建它们

interface FontSizeAliases {
    micro: number;
    small: number;
    default: number;
    large: number;
}

const rawSizes: number[] & Partial<FontSizeAliases> = [12, 14, 16, 18, 22, 30, 40];
rawSizes.micro = rawSizes[0];
rawSizes.small = rawSizes[1];
rawSizes.default = rawSizes[2];
rawSizes.large = rawSizes[3];
const fontSizes = rawSizes as number[] & FontSizeAliases;

Playground link

不过，在这两种情况下，您都可能会错过其中一种尺寸（例如 small）。要修复 that，您可以通过完整的类型检查单独创建尺寸，然后将它们合并：

interface FontSizeAliases {
    micro: number;
    small: number;
    default: number;
    large: number;
}

const rawSizes = [12, 14, 16, 18, 22, 30, 40];
const sizeNames: FontSizeAliases = {
    micro: rawSizes[0],
    small: rawSizes[1],
    default: rawSizes[2],
    large: rawSizes[3],
};
const fontSizes = Object.assign([], rawSizes, sizeNames);

Playground link

Answer 2

我建议稍微修改您的类型，如下所示：

interface FontSizeAliases {
    micro?: number
    small?: number
    default?: number
    large?: number
}

const fontSizes: number[] & FontSizeAliases = [12, 14, 16, 18, 22, 30, 40]

fontSizes.micro = fontSizes[0]
fontSizes.small = fontSizes[1]
fontSizes.default = fontSizes[2]
fontSizes.large = fontSizes[3]

我已将 micro 设置为可选，这将为您提供智能感知并确保您不会忘记检查 undefined

Link to the playground

如何将别名添加到打字稿中的数字数组

How can I add aliases to an array of numbers in typescript

typescript

styled-system