如何在 TypeScript 中正确地进行递归类型定义？

Question

I have an arbitrary structure consisting of nested arrays and objects, with ValidationError objects as leaves. To type this I need a recursive type as shown in Typescript guidelines .

While the assignment ( const x = ... ) seems to pass the type check, accessing the structure ( x.errors.a ) gives a TypeScript error which I cannot understand:

Error: TS2339: Property 'a' does not exist on type 'ValidationResultElement'.

Property 'a' does not exist on type 'ValidationResultObject'.

see code on TypeScript Playground

export interface ValidationResult {
  errors: ValidationResultElement;
}

type ValidationResultElement =
  ValidationResultObject | ValidationResultArray | ValidationError;

interface ValidationResultArray extends Array<ValidationResultElement> {
}

interface ValidationResultObject {
  [key: string]: ValidationResultElement;
}

interface ValidationError {
  details: string;
}

// This works:
const x: ValidationResult = {
    errors: { a: { b: [{ c: { details: 'foo' } }] } }
};

// This produces a type error:
console.log(x.errors.a);

Answer 1

You need to narrow the type. This is an example but I have caveats!

function isValidationResultObject(obj: any): obj is ValidationResultObject {
  return (obj && (!obj.type) && (!obj.length));
}

if (isValidationResultObject(x.errors)) {
  console.log(x.errors.a);
}

I have chucked together a custom type guard to eliminate the other types, but it is probably wrong, it just demonstrates the concept. You need to write a type guard that works.

You may find a discriminated union type makes this easier that delving into lots of properties.

You could force the type to narrow with an assertion, but a type guard is more honest and ensures you are really dealing with the type you expect.