typescript - 将对象数组映射到 typescript 中具有不同对象的另一个数组

Question

如果我有类似的东西

array1: string[] = ['foo', 'bar'];

和一个界面

export interface MyObject { name: string; }

如何将 array1 映射到另一个 MyObject 类型的数组？

array2 : MyObject[];
array2 = array1.map(s => ...);

我想过类似的事情

array2 = array1.map<MyObject>(s => new MyObject(...));

Answer 1

这通常是我离题的地方 long lecture关于 TypeScript 中类型和值之间的区别，但在这里我会尽量简短:因为 MyObject只知道是一个类型而不是构造函数值，你不能调用 new MyObject() .相反，如果你想创建一个 MyObject 类型的值，你可以只使用一个普通的旧对象 of the right shape ，例如通过 object literal notation :

const myObject: MyObject = {name: "Alice"}; // no error

所以你的 map函数可以如下:

const array2: MyObject[] = array1.map(s => ({name: s})); // no error

很简单吧？

呃，好吧，请注意上面的评论中 {name: s} 周围的括号是 necessary ，因为无论好坏，JavaScript 解析器都会解释形式 (x => {...}) 的箭头函数因为有 block body花括号里面的东西是语句。而当你解释 name: s作为声明，这意味着 name是 label , 和 s只是一个字符串 expression statement与 optional semicolon omitted .解释为函数体， {name: s}只是评估 s并且不返回定义的值(它是 void ，它本质上与 undefined 相同)，这就是为什么如果省略括号会出现以下奇怪的错误:

let array2: MyObject[] = array1.map(s => { name: s }); // error!
// Type 'void[]' is not assignable to type 'MyObject[]'.
// at runtime, array2 will be [undefined, undefined] which is not what you wanted 🙁

JavaScript 解析这种方式有点棘手。添加括号使 s => (...)修复它。现在箭头后面的东西只能解释为 concise body ... 即，单个表达式。和口译 ({name: s})作为表达式产生我们想要的对象字面量。

是的，我避免写一本关于类型和值的书，最终以某种方式写了一本关于表达式和语句的不同的书。那好吧。

希望能帮到你。祝你好运!