Typescript Type guards: Using the in operator

Question

I'm learning TypeScript and practicing about Type Guards from Official DOCS

I'm testing the provided example (more or less) with TypeScript 3.5.3:

function exec(strOrNum: string | number) {
    if ("substring" in strOrNum) {
        return strOrNum.substring(1);
    }
    return strOrNum.toExponential(2);
}

But VSCode is trowing the following error:

The right-hand side of an 'in' expression must be of type 'any', an object type or a type parameter.ts(2361)

I don't understand it, any idea?

Answer 1

The in operator returns true if the specified property is in the specified object or its prototype chain.

This means it operates on objects (or arrays) and not strings.

If you want to add a type guard to differentiate between string and number you have to use typeof:

function exec(strOrNum: string | number) {
    if (typeof strOrNum === "string") {
        return strOrNum.substring(1);
    }
    return strOrNum.toExponential(2);
}

You would use the in operator if you have a union of two interfaces:

interface A {
    a: string;
}

interface B {
    b: number;
}


function test(arg: A | B): string {
    if ('a' in arg) {
        return arg.a;
    }
    return arg.b.toFixed(2);
}