Typescript object 数组符号内的类型

Question

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

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

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

Answer 1

如何使用类型（数字）查看 object 的属性？

数组是 object，并且在编号键处具有值，因此ArrayType[number]将是数组中每个元素的类型的联合。

---

NonNullable<Type>通过从 Type 中排除null和undefined来构造Type 。

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

TS游乐场

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"