对象数组表示法中的打字稿类型

Question

我无法理解我在文件中看到的这段代码。这到底是干什么的？

const user = rowData as NonNullable<ApiResult["getUsers"]["data"][number]["users"]>[number];

如何使用类型（数字）来查看对象的属性？请注意，ApiResult 是一些 graphql 生成的类型，并且此代码在 mui 数据网格 GridColumns 数组的 renderCell 中找到。

Answer 1

How can you use a type (number) to look at the property of an object?

数组是一个对象，并且在编号的键上有值，因此 ArrayType[number] 将是数组中每个元素的类型的并集。

NonNullable<Type> 通过从 Type.

中排除 null 和 undefined 构造一个类型

这里是数据结构预期扩展的示例，使用任意 User 类型。您可以访问 TS playground link 并将鼠标悬停在字母类型名称 A 到 F 上，以查看 IntelliSense 认为这些类型是什么：

TS Playground

type User = {
  one: 'This is';
  two: 'the targeted type';
};

type ApiResult = {
  getUsers: {
    data: Array<{
      users: Array<User> | null | undefined;
    }>;
  };
};

declare const rowData: unknown;
const user = rowData as NonNullable<ApiResult["getUsers"]["data"][number]["users"]>[number];

// examine hierarchy:
type A = ApiResult
type B = ApiResult["getUsers"]
type C = ApiResult["getUsers"]["data"]
type D = ApiResult["getUsers"]["data"][number]
type E = ApiResult["getUsers"]["data"][number]["users"]
type F = NonNullable<ApiResult["getUsers"]["data"][number]["users"]>[number]

Answer 2

下面是数组成员查找的一些简单示例：

const fruitsArray = ["apple", "orange"] as const;
type AvilableFruits = typeof fruitsArray[number]; // will be: "apple" | "orange"

const carsArray = [
  { make: "mercdes", class: "C" },
  { make: "mercdes", class: "S" }
] as const;
type AvilableMercedesClasses = typeof carsArray[number]["class"] // will be "C" | "S"

对象数组表示法中的打字稿类型

Typescript type within object array notation

typescript

graphql