如何在JavaScript数组map方法中正确声明TypeScript类型

你之前的写法出现问题是因为在对象解构语法中，冒号默认的作用是重命名变量，而非指定属性类型，所以你写的id: number会被识别为将id属性赋值给新变量number，和类型标注无关。

下面是两种常用的正确写法： #

方式1：直接给整个解构参数标注类型 #

直接在解构的参数括号后添加整体的对象类型声明即可：

x =  state.users.map(({id, firstName, lastName}: {id: number; firstName: string; lastName: string}) => 
    ({id, value: `${firstName} ${lastName}`}));

方式2：提前定义类型（更推荐，可复用） #

先定义对应的用户类型，后续所有用到User结构的地方都可以复用：

// 提前声明User接口
interface User {
  id: number;
  firstName: string;
  lastName: string;
  // 可补充User对象的其他属性
}

// 调用map时直接标注参数为User类型
x =  state.users.map(({id, firstName, lastName}: User) => 
    ({id, value: `${firstName} ${lastName}`}));

额外优化 #

如果你的state本身已经做了完整的类型定义，指定users属性为User[]类型，那么TypeScript会自动推断map回调的参数类型，不需要额外在回调里标注类型，代码会更简洁。

内容的提问来源于stack exchange，提问作者DrollDread