对象成员的打字稿内联类型声明

Question

在以下代码块中，使用<>-Notation 定义了属性笔的类型：

return {
    ...defaultValues, 
    pens: 
      <[{penStrokeColor: string, penStrokeWidth: number, penOpacity: number}]>
      [...Array(5).keys() ].map((_)=> { 
        return {
          penStrokeColor: defaultValues.currentItemStrokeColor,
          penStrokeWidth: defaultValues.currentItemStrokeWidth,
          penOpacity: defaultValues.currentItemOpacity
        }})
  }

上面的代码有效，但我的 linter 抱怨这个类型提示应该以不同的方式声明：

Use 'as [{ penStrokeColor: string; penStrokeWidth: number; penOpacity: number }]' instead of '<[{ penStrokeColor: string; penStrokeWidth: number; penOpacity: number }]>'  @typescript-eslint/consistent-type-assertions

这也可以内联完成吗？如果可以，怎么做？

Answer 1

正如错误所说 - 使用 as 而不是尖括号表示法来断言类型。

return {
    ...defaultValues, 
    pens: 
      [...Array(5).keys() ].map((_)=> { 
        return {
          penStrokeColor: defaultValues.currentItemStrokeColor,
          penStrokeWidth: defaultValues.currentItemStrokeWidth,
          penOpacity: defaultValues.currentItemOpacity
        }}) as [{penStrokeColor: string, penStrokeWidth: number, penOpacity: number}]
  }

但我认为这不是你想要的——你真的想告诉 TS 创建的数组是一个元组，只有一个项目吗？由于您要创建 5 个元素，因此您可能需要一个数组类型。

如果是这种情况，则根本不需要类型断言 - TS 可以正确推断出创建的数组是所需的类型。

return {
    ...defaultValues, 
    pens: [...Array(5).keys() ].map((_)=> { 
        return {
          penStrokeColor: defaultValues.currentItemStrokeColor,
          penStrokeWidth: defaultValues.currentItemStrokeWidth,
          penOpacity: defaultValues.currentItemOpacity
        };
    })
};

无需任何 TypeScript 语法即可推断出正确的类型。