如何在TypeScript中定义Partials数组？

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属性 。

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

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

语法有效但类型不是。 预计Partial<User[]>会导致错误，因为类型不兼容。

Answer 2

选项A为您提供包含部分的数组：

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"}];

您正在尝试将用户数组转换为部分。 所以，用户还不是局部的，但是你试图将数组变成局部的。 你收到一个错误：

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/好的是你可以在typescript代码部分看到代码的问题。 代码的任何问题都会有一个红色下划线并将鼠标悬停在它上面以查看详细信息。