TypeScript：转换类型'a | b' 到 'a' 基于 typeof

Question

I'm new to TypeScript and trying to understand how casting can be used. I am working with an API that defines a function similar to the following:

function foo(a: number): number | undefined;

I want to perform a function on the return value of this number to safely convert it to a number always, but I get an error:

function myFunc(bar: number | undefined): number {
  if (typeof bar === undefined) {
    return 0;
  } else {
    return bar; // error ts(2322)
  }
}

Where ts(2322) expands to Type 'number | undefined' is not assignable to type 'number'. Type 'undefined' is not assignable to type 'number'. Type 'number | undefined' is not assignable to type 'number'. Type 'undefined' is not assignable to type 'number'.

I feel like this is something that should be determinable at compile time. Clearly, we only go into the else if typeof bar === number , but trying that in this code snippet:

function myFunc(bar: number | undefined): number {
  if (typeof bar === number) { // error ts(2367)
    return bar;
  } else {
    return 0;
  }
}

The error message is This condition will always return 'false' since the types '"string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"' and 'Requireable<number>' have no overlap. This condition will always return 'false' since the types '"string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function"' and 'Requireable<number>' have no overlap.

At this point I'm pretty lost on what's possible with casting in TypeScript. Is there a way to accomplish my goals? Any assistance would be greatly appreciated.

Answer 1

if (typeof bar === undefined) {

The typeof operator produces a string, so what you should really be testing is:

if (typeof bar === "undefined") {

As you've got it, the if case will never be true, so the code always goes into the else block. Typescript thus deduces that the return statement can be reached with bar still undefined, which conflicts with the type you said you'd be returning.

Answer 2

Nicholas gives the detailed explanation, but you could certainly implement your function simply as:

function myFunc(bar: number | undefined): number {
    return bar || 0;
}