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

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 语法即可推断出正确的类型。

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

Typescript inline type declaration for object-member

javascript

typescript

eslint