打字稿数组映射返回对象

Question

我有以下代码.

array.map(val => { return {
  key1: val.key1,
  key2: val.key2
}});

有没有办法将代码减少到这样的东西？

array.map(val => {
  key1: val.key1,
  key2: val.key2
});

Answer 1

如果将其放在括号中,编译器会将其视为对象文字而不是代码块:

array.map(val => ({
  key1: val.key1,
  key2: val.key2
}));

如果您有对象文字的接口(但不是类型安全的),则类型断言也有效:

interface IKeys { key1: string; key2: string }
array.map(val => <IKeys>{
  key1: val.key1,
  key2: val.key2
});

Answer 2

对于 React 的 TSX 文件，上述选项都不适合我。

这是对我有用的代码：

interface IKeys { key1: string; key2: string }

array.map((val: any): IKeys => ({
    key1: val.key1,
    key2: val.key2
}));

Answer 3

作为上面@Titian Cernicova-Dragomir 回答的更新，值得一提的是as操作符（用于类型断言），在处理 React 的 TSX(JSX) 文件时特别有用，相当于<Type>语法：

interface IKeys { key1: string; key2: string }
// notice the parentheses, to avoid confusion with a block scope
array.map(val => ({
    key1: val.key1,
    key2: val.key2
} as IKeys));

引入它是因为尖括号语法 ( <ComponentOrElement>) 是为组件/ JSX 元素保留的。