如何在TypeScript中定义部分数组？

Question

例如，

type User = {
  first_name: string,
  last_name: string,
  notes: string
}

以下哪一项有效？

const users:Partial<User>[] = [{first_name: "Name"}]; // A

const users:Partial<User[]> = [{first_name: "Name"}]; // B

const users:[Partial<User>] = [{first_name: "Name"}]; // C

奇怪的是，所有这些在编译时似乎都是有效的TypeScript。

谢谢。

Answer 1

正确的方法是

const users:Partial<User>[] = [{first_name: "Name"}];

Partial<User[]>表示它包含Array properties中的一些。

[Partial<User>]表示它是包含1个元素的部分User的数组。

  

奇怪的是，所有这些在编译时似乎都是有效的TypeScript

语法有效，但类型无效。预计Partial<User[]> causes an error是因为类型不兼容。

Answer 2

选项A为您提供了一个包含Partials的数组：

const users:Partial<User>[] = [{first_name: "Name"}]; // A

如果可以帮助您理解，请考虑一下如果类型不是通用的，则如何定义Partials数组。那就是Partial[]。

如果从选项B中删除通用类型，则会得到一个Partial而不是一个数组。

选项C是元组而不是数组。

Answer 3

即使在编译的JavaScript中所有结果都相似，但是这三者之间还是有很大差异。

const users:Partial<User>[] = [{first_name: "Name"}];

这是Partial的有效数组。通过在末尾附加[]，可以指定长度未知，并且可以是任意长度。因此，您可以根据需要在此数组中包含任意数量的User元素。记住这一点，因为它将有助于下一个示例。

在第二个示例中，您尝试执行相同的操作，但这是不同的并且无效。

const users:Partial<User[]> = [{first_name: "Name"}];

您正在尝试将User（用户）数组转换为Partial（部分）。因此，用户还不是局部的，但是您正在尝试将数组转换为局部的。您收到错误消息：

Type '{ first_name: string; }[]' is not assignable to type 'Partial<User[]>'.
  Types of property 'pop' are incompatible.
    Type '() => { first_name: string; }' is not assignable to type '() => User'.
      Type '{ first_name: string; }' is not assignable to type 'User'.
        Property 'last_name' is missing in type '{ first_name: string; }'.

在您的第三个示例中：

const users: [Partial<User>] = [{ first_name: "Name" }]; // C

您的操作与第一个示例相同，并且有效。创建Partial数组，但是有所不同。在此，此数组中只能有一个元素。如果尝试添加另一个元素，则会出现错误，因为使用[Partial<User>]还会指定数组的长度恰好为1。

让我们看看下面的错误是什么

const users: [Partial<User>] =    [{ first_name: "Name" }, { first_name: "Name" }];

这里的错误是：

    Type '[{ first_name: string; }, { first_name: string; }]' is not assignable to type '[Partial<User>]'.
  Types of property 'length' are incompatible.
    Type '2' is not assignable to type '1'.

奇怪的是，TypeScript确实将您的所有示例编译为相似的数组，但确实为您提供了在线编译器中的错误。

有一个TypeScript在线工具可以播放并查看您的代码变成JavaScript。 https://www.typescriptlang.org/play/的好处是，您实际上可以在打字稿代码部分中看到代码问题。代码的任何问题都将带有红色下划线，并将其悬停在其上以查看详细信息。