空数组的打字稿初始化

Question

我有一个这样定义的 promises 数组。

export type PromisesArray = [
  Promise<IApplicant> | null,
  Promise<ICampaign | ICampaignLight> | null,
  Promise<IApplication[]> | null,
  Promise<IComment[]> | null,
  Promise<{ status: number; message: IActionTag[] }> | null,
  Promise<IHistoryEntry[]> | null,
  Promise<IDocs> | null,
  Promise<IForm> | null,
];

我想像const promisesArray = <PromisesArray>[]这样初始化为一个空值。

但是，我遇到了以下错误：

Conversion of type '[]' to type 'PromisesArray' may be a mistake because neither type sufficiently overlaps with the other. If this was intentional, convert the expression to 'unknown' first.
  Type '[]' is missing the following properties from type '[Promise<IApplicant>, Promise<ICampaign | ICampaignLight>, Promise<IApplication[]>, ... 4 more ..., Promise<...>]': 0, 1, 2, 3, and 4 more.ts(2352)

然后我像这样在数组中推送一些项目：

if (this._printOptions[EPrintOption.Tags]) {
  const applicantActionsTagsPromise = ApplicantService.getActions(this._applicantId);
  promisesArray.push(applicantActionsTagsPromise); // On this line
} else {
  promisesArray.push(null);
}

然后遇到这个错误。

Argument of type 'Promise<IActionTag[]>' is not assignable to parameter of type 'Promise<IApplicant> | Promise<ICampaign | ICampaignLight> | Promise<IApplication[]> | ... 4 more ... | Promise<...>'.
  Type 'Promise<IActionTag[]>' is not assignable to type 'Promise<IApplicant>'.
    Type 'IActionTag[]' is missing the following properties from type 'IApplicant': address, advertiseid, applicantid, birthdate, and 14 more.ts(2345)

我想在不使用any 类型运行的情况下解决这个问题。

Answer 1

这应该可以解决您在这两种情况下的问题。它必须如此复杂，因为您一次只将一个元素推入数组，而不是一次分配整个数组。如果您要更改代码以便同时分配整个 Promise 数组，那么您可以毫无问题地使用原始定义：

export type PromisesArray = []
  | [
    Promise<IApplicant> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null,
    Promise<{ status: number; message: IActionTag[] }> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null,
    Promise<{ status: number; message: IActionTag[] }> | null,
    Promise<IHistoryEntry[]> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null,
    Promise<{ status: number; message: IActionTag[] }> | null,
    Promise<IHistoryEntry[]> | null,
    Promise<IDocs> | null
  ]
  | [
    Promise<IApplicant> | null,
    Promise<ICampaign | ICampaignLight> | null,
    Promise<IApplication[]> | null,
    Promise<IComment[]> | null,
    Promise<{ status: number; message: IActionTag[] }> | null,
    Promise<IHistoryEntry[]> | null,
    Promise<IDocs> | null,
    Promise<IForm> | null
  ]
;

Answer 2

我认为这个解决方案有两个问题：

首先，您的类型定义了一个可以包含 null 值的数组，而不是 undefined 值。

所以要获得正确的初始值，您应该使用：

const promisesArray = <PromisesArray>[null, null, null, null, null, null, null, null];

其次，Array.push 不知道您当前所处的索引，因此它无法帮助您推断该特定数组元素的正确类型。

一种解决方案是一次声明整个数组as const。这将允许 TypeScript 将您的数组视为一个元组。每个元素都有自己的类型，而不是所有类型的联合。

enum Tags {
    String,
    Number,
    Boolean
}

type Options = {
    [key in Tags]?: boolean;
};

const options: Options = {
    [Tags.String]: true,
    [Tags.Boolean]: true
};

// Use `as const` to infer the type of the array as a tuple. 
const promiseArray1 = [
    options[Tags.Number] ? Promise.resolve(5) : null,
    options[Tags.Boolean] ? Promise.resolve(true) : null,
    options[Tags.String] ? Promise.resolve('string') : null
] as const;

// Alternatively declare the type as you did before.
type PromiseArray = [
    Promise<number> | null,
    Promise<boolean> | null,
    Promise<string> | null
];
const promiseArray2: PromiseArray = [
    options[Tags.Number] ? Promise.resolve(5) : null,
    options[Tags.Boolean] ? Promise.resolve(true) : null,
    options[Tags.String] ? Promise.resolve('string') : null
];

Playground

Answer 3

如果你最终定义了一个数组类型，每个位置都有如此特殊的类型。也许使用数组根本不是最好的选择。 如果您定义具有以下命名属性的类型，您似乎会受益：

interface MyPromisesBundle {
  promiseIApplicant?: Promise<IApplicant>;
  promiseICampaign?: Promise<ICampaign>;
  ...
}