Typescript 在不同类型的数组中查找

Question

I have an array of objects, each object has different type. I am using Array.find (or for loop, no difference) to get one of the objects from array. Right now Typescript can not understand what type i am getting from array unless i add additional || reportData.type !== "REGIONS" || reportData.type !== "REGIONS" check. Is there any other way to solve it?

 export interface IReportItemFactionStatus {
    type: "FACTION_STATUS";
  }

  export interface IReportItemRegions {
    type: "REGIONS";
    regions: [];
  }

  export type IReportItem = IReportItemRegions | IReportItemFactionStatus;

  export type IReport = Array<IReportItem>;

  // ... code ...
  // report has type IReport

  const reportData = report.find((d) => {
      return d.type === "REGIONS";
  });

  if (!reportData) {
    return [];
  }
  console.log(reportData.regions); // Typescript error here

But if i add additional check for reportData.type it starts to work fine

  if (!reportData || reportData.type !== "REGIONS") {
    return [];
  }
  console.log(reportData.regions); // No Typescript error here :\

Answer 1

Your structure enforces reportData to be of type IReportItem which is : IReportItemRegions or IReportItemFactionStatus because it's an element of report array.

You want to display property regions which is only implemented in interface IReportItemRegions . We have no idea if reportData is of type IReportItemRegions . Before trying to access the property, you must ensure your object implements the property :

if ('regions' in reportData) {
  console.log(reportData.regions)
}

If you want TypeScript to infer the type, you must get rid of find et rewrite your code. I've come with a simple implementation :

let reportData: IReportItemRegions;
let i = 0;
while (!reportData && report.length < i) {
  const currentReportData = report[i];
  if (currentReportData.type === 'REGIONS') {
    // Typescrit knows currentReportData is of type IReportItemRegions
    reportData = currentReportData;
  }
  i++;
}

if (!reportData) {
  return [];
}
console.log(reportData.regions);

Answer 2

Here is one possible solution:

interface IReportItemFactionStatus {
  type: "FACTION_STATUS";
}

interface IReportItemRegions {
  type: "REGIONS";
  regions: readonly string[];
}

type IReportItem = IReportItemRegions | IReportItemFactionStatus;

const report = [
  {
    type: "REGIONS",
    regions: ["region"]
  },
  {
    type: "FACTION_STATUS"
  }
] as const satisfies readonly IReportItem[]

type LookUp<T, TType> = Extract<T, { type: TType }>;

function lookup<TArr extends readonly any[], const TType extends TArr[number]['type']>(arr: TArr, type: TType) {
  return arr.filter((d): d is LookUp<TArr[number], TType> => {
    return d.type === type;
  });
}

const x = lookup(report, "REGIONS")
// {
//     readonly type: "REGIONS";
//     readonly regions: readonly ["region"];
// }[]

const y = lookup(report, "FACTION_STATUS")
//  {
//     readonly type: "FACTION_STATUS";
// }[]

Answer 3

TS throws error as the return value will be of type IReportItemRegions | IReportItemFactionStatus IReportItemRegions | IReportItemFactionStatus .

If its of type IReportItemFactionStatus , as there is no regions in it. So its should throw an error.

When you add this check: reportData.type !== "REGIONS" , you are telling typescript that for cases when you get IReportItemFactionStatus , you are returning before and console.log(reportData.regions); becomes unreachable code. Hence no error.

---

Alternate way:

enum ReportType {
  REGIONS = "REGIONS",
  FACTION_STATUS = "FACTION_STATUS"
}

export interface IReportItem {
  type: ReportType;
  regions?: [];
}

// No need for this now
//export type IReportItem = IReportItemRegions | IReportItemFactionStatus;

export type IReport = Array < IReportItem > ;

// ... code ...
// report has type IReport

const reportData: IReportItem | null = report.find((d) => {
  return d.type === ReportType.REGION;
});

if (!reportData) {
  return [];
}
console.log(reportData.regions); // Typescript error here