点号符号内的打字稿类型提示

Question

I have the following interface:

export interface IRenderStruct {
  type: string;
  props: {
    className?: string;
    children?: (string | IRenderStruct) | (string | IRenderStruct)[];
    [propName: string]: any;
  };
}

So resulting objects may be nested inside via elm.props.children . I am now creating some unit tests and in one case, I know that I will have a RenderStruct object as children of another. No string as children, and also no array of RenderStruct objects as children.

But when I want to do this:

expect(result.props.children.type === 'something');

The TS compiler complains that I cannot access type because children may be a string and that doesnt have the property type .

Okay, TS - you are correct! But I definitely know that in this case we will have the nested structure. How do I tell TS that its the case?

Answer 1

Create an user-defined type guard to check it:

var render: IRenderStruct;

// function to check if something is an IRenderStruct:
function isIRenderStruct(p: any): p is IRenderStruct {
    return ('props' in p) && ('type' in p);
}

let b: boolean;
if (isIRenderStruct(render.props.children)) {
    b = render.props.children.type === 'something'; // No errors
}

EDIT :

For the specific case of your test, you can do:

let test = false;
if (isIRenderStruct(render.props.children)) {
    test = render.props.children.type === 'something'; // No errors
}

expect(test).toBeTruthy();

this way, you avoid else s. If the guard fails, test will be false and your test will fail. This way you can even get a broader range of errors.