javascript - TypeScript:映射强类型集合

Question

我有一个强类型集合，如下所示:

interface IUser {
  id: number,
  name: string
}

const users: IUser[] = [
  { id: 1, name: 'Bob' },
  // ...
];

然后，我使用 map 创建一个新集合功能:

const nextUsers: IUser[] = users.map((user: IUser) => ({
  ID: 3, // wrong field name
  name: 'Mike',
  id: 3,
}));

如您所见，有一个字段名称错误 - ID 。好吧，问题是为什么会work ？))

Answer 1

这是 typescript 检查多余属性的副产品。一点背景知识:

如果类型 B 至少具有类型 A 的所有属性，则类型 A 通常可以从类型 B 进行赋值。因此，例如，执行此赋值时不会出现错误:

let someObject = { id: 3, name: 'Mike', lastName: 'Bob' }
let user: { id: number, name: string } = someObject // Ok since someobject has all the properties of user
let userWithPass : { id: number, name: string, pass: string } = someObject // Error since someobject does not have pass

Typescript 唯一一次提示过多的属性是当我们尝试直接将对象文字分配给某个具有已知类型的对象时:

// Error excess property lastName
let user: { id: number, name: string } =  { id: 3, name: 'Mike', lastName: 'Bob' }

现在，在您的情况下， typescript 将首先将结果的类型推断为 map 返回的对象文字的类型，该类型都是有效的，然后将检查该类型是否与IUser 数组，所以没有错误，因为我们从未直接尝试将对象文字分配给 IUser 类型的内容。

如果我们显式设置传递给 map 的箭头函数的返回类型，我们可以确保收到错误

const nextUsers: IUser[] = users.map((user: IUser) : IUser => ({
    id: 3,
    name: 'Mike',
    ID: 152,
}));