TypeScript runtime type-checks not working?-CodePudding

so I have a bit of an odd situation: I am attempting to validate a login request for a React web app using TypeScript, and am attempting to assign the type checking logic to a boolean. Upon doing so however, I'm getting an error of:

Argument of type 'FamilyInfo | undefined' is not assignable to parameter of type 'FamilyInfo'.
  Type 'undefined' is not assignable to type 'FamilyInfo'.

Here is the code in question:

      makeAPIRequest(loginRequest, (successful: boolean, serverResult: APIResult | undefined) => {
        const loginSuccess = (successful && (serverResult !== undefined) && (serverResult.familyInfo !== undefined));
        setBadLogin(!loginSuccess);
        if (loginSuccess) {
          // The line below fails 
          props.onSuccess(loginRequest, serverResult.familyInfo);
        }
      });

Here are what the relevant types look like:

interface APIResult {
  success: boolean;
  familyInfo: FamilyInfo | undefined;
}

interface LoginPanelProps {
  onSuccess: (loginInfo: LoginRequest, familyInfo: FamilyInfo) => void;
}

If I do the following, then everything works fine:

        if ((successful && (serverResult !== undefined) && (serverResult.familyInfo !== undefined))) {
          props.onSuccess(loginRequest, serverResult.familyInfo);
        }

But of course that's a bit redundant, so I'd like to keep it cleaner, and understand why type validation is failing here.

Edit: As a quick example, you can see this failing in TypeScript version v4.6.2 at https://www.typescriptlang.org/play?#code/ATCWDsBcFMCcDMCGBjawYGdLAN4CgRDgA3RAGwEYAuYLWCAc2AB9gBXcAE2ngmk4DcBYAF88w B2SRQAe3DpoWCgAoIABzaQadRgEpcwosnkZZZaADoyshmvCbIeoSDEhJ4aXIWZIAJntHGl8DfCIQE3AsYGREcAB1WVgAa2AAXmBArWAAQjSMjm5ecH5gADIysActS1JKXPz2Lh4 TmcjQlB4TNiEpOTQjvDFZSzIWvIKduG3USA

CodePudding user response：

I think this is a problem (or missing feature, if you want) that is fixed in Typescript >= 4.4.

// In TS 4.3 and below
function foo(arg: unknown) {
  const argIsString = typeof arg === "string";
  if (argIsString) {
    console.log(arg.toUpperCase());
    //              ~~~~~~~~~~~
    // Error! Property 'toUpperCase' does not exist on type 'unknown'.
  }
}

See https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html#control-flow-analysis-of-aliased-conditions-and-discriminants

In TypeScript 4.4, that is no longer the case. The above example works with no errors! When TypeScript sees that we are testing a constant value, it will do a little bit of extra work to see if it contains a type guard. If that type guard operates on a const, a readonly property, or an un-modified parameter, then TypeScript is able to narrow that value appropriately.

CodePudding user response：

Looks like this is by design with TypeScript: https://github.com/microsoft/TypeScript/issues/48241

The solution looks something like this:

      makeAPIRequest(loginRequest, (successful: boolean, serverResult: APIResult | undefined) => {
        // Need to create a const of the familyInfo to be able to nicely check it.
        const familyInfo = serverResult?.familyInfo;
        const loginSuccess = (successful && (serverResult !== undefined) && serverResult.success && (familyInfo !== undefined));
        setBadLogin(!loginSuccess);
        if (loginSuccess) {
          props.onSuccess(loginRequest, familyInfo);
        }
      });