如何在 TypeScript 中定义一个 Partials 数组?

Posted

技术标签:

【中文标题】如何在 TypeScript 中定义一个 Partials 数组?【英文标题】:How do you define an array of Partials in TypeScript? 【发布时间】:2019-01-31 23:15:31 【问题描述】:

例如,

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。

提前致谢。

【问题讨论】:

它只是一个部分users的数组。 (例如const users: Partial&lt;User&gt;[] = [ first_name: 'Name' ]; @bradcush 所以,Option A?这就是我最初的结果,然后出现了一堆 TypeScript 错误! 您还应该使用“接口”而不是“类型别名”,这可能是您的问题。 @bradcush 何时使用type 有a detailed post by Martin Hochel explaining the difference between types and interfaces in TypeScript 2.7,所以我会让它来解释,但是当您需要union types 时,您可以从使用类型中受益的一个常见用例。 (例如type something = string | number; 【参考方案1】:

正确的方法是

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

Partial&lt;User[]&gt; 表示它有一些Array properties。

[Partial&lt;User&gt;] 表示它是一个包含 1 个元素的部分 User 数组。

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

语法有效,但类型无效。应该是Partial&lt;User[]&gt; causes an error,因为类型不兼容。

【讨论】:

【参考方案2】:

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

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

如果它有助于您理解,请考虑如果类型不是通用的,您将如何定义 Partials 数组。那将是Partial[]

如果您从选项 B 中删除泛型类型,您将得到一个 Partial 而不是数组。

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

【讨论】:

【参考方案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&lt;User&gt;] 还指定数组的长度正好是 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 代码部分看到你的代码存在的问题。代码的任何问题都将带有红色下划线并将鼠标悬停在其上以查看详细信息。

【讨论】:

以上是关于如何在 TypeScript 中定义一个 Partials 数组?的主要内容,如果未能解决你的问题,请参考以下文章

如何在 TypeScript 接口中定义静态属性

如何在带有 Typescript 的 React 项目中组织类型定义

如何在 Typescript 中检查未定义

如何在 TypeScript 定义文件中使用外部模块的类型?

如何在 TypeScript 中使用 Apollo Client 自定义钩子?

当父组件在其子组件中注入道具时,如何在 Typescript 中定义道具?