如何为打字稿中的数字数组添加别名答案

【问题标题】：How can I add aliases to an array of numbers in typescript如何为打字稿中的数字数组添加别名
【发布时间】：2022-01-16 17:51:06
【问题描述】：

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

  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

【问题讨论】：

标签： typescript styled-system

【解决方案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）。要修复那个，您可以使用完整的类型检查单独创建大小，然后将它们组合起来：

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

【讨论】：

【解决方案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

【讨论】：

这里的问题是它们在任何地方都将继续是可选的。
是的。我比我们需要与 OP 澄清有未填充对象的可能性。如果不是这种情况-您的答案会更好。 @T.J.克劳德
我同意@T.J.Crowder。谢谢 Drag13