TypeScript in operator narrowing Type

In this article, we will learn about the ‘in‘ operator narrowing Type in Typescript. In TypeScript, the ‘in’ operator is used to narrow or refine the type of an object within a conditional statement or block. It checks whether a specific property or key exists within an object, and if it does, it narrows the type of that object to include that property.

Syntax

if (propertyKey in object) {

    // Narrowed type where object 
    // includes propertyKey
} else {

    // Narrowed type where object 
    // does not include propertyKey
}

Where,

• propertyKey: This is a string literal or string variable representing the property or key you want to check for in the object.
• object: This is the object in which you want to check for the existence of the property indicated by propertyKey.

Example 1: In this example, The printPersonInfo function takes an argument person, which is of type Person. A person is an interface with a name property and an optional age property. Inside the function, we use the in operator to check whether the age property exists in the person object. If the age property exists (‘age’ in person evaluates to true), TypeScript narrows the type of person inside the if block to include the age property. We can then safely assess person.age.If the age property does not exist (‘age’ in person evaluates to false), TypeScript narrows the type inside the else block to exclude the age property.

Javascript

interface Person {
    name: string;
    age?: number;
}

function printPersonInfo(person: Person) {
    if ('age' in person) {

        // Inside this block, 'person' is
        // narrowed to include the 'age' property
        console.log(`Name: ${person.name}, Age: ${person.age}`);
    } else {

        // Inside this block, 'person' is
        // narrowed to exclude the 'age' property
        console.log(`Name: ${person.name}, Age not provided`);
    }
}

const GeeksforGeeks: Person =
    { name: 'GeeksforGeeks', age: 30 };
const Geek: Person = { name: 'Geek' };

printPersonInfo(GeeksforGeeks);
printPersonInfo(Geek);

Output:

Example 2: In this example, the Human interface has three properties: name, canSwim, and canFly. Both canSwim and canFly are optional properties. The described HumanAbilities function takes a human argument of type Human. Inside the function, we use the in operator to check whether canSwim and canFly properties exist in the human object. Depending on whether ‘canSwim’ in humans and ‘canFly’ in humans are true or false, different code blocks are executed. The human object’s type is narrowed based on the presence or absence of the canSwim and canFly properties, and the function describes the human’s abilities accordingly.

Javascript

interface Human {
    name: string;
    canSwim?: boolean;
    canFly?: boolean;
}

function describeHumanAbilities(human: Human) {
    if ('canSwim' in human) {

        // Inside this block, 'human' is narrowed
        // to include the 'canSwim' property
        console.log(`${human.name} can swim.`);
    } else {

        // Inside this block, 'human' is narrowed
        // to exclude the 'canSwim' property
        console.log(`${human.name} cannot swim.`);
    }

    if ('canFly' in human) {

        // Inside this block, 'human' is narrowed
        // to include the 'canFly' property
        console.log(`${human.name} can fly.`);
    } else {

        // Inside this block, 'human' is narrowed
        // to exclude the 'canFly' property
        console.log(`${human.name} cannot fly.`);
    }
}

const john: Human = { name: 'A', canSwim: true };
const sarah: Human = { name: 'B', canFly: true };
const mike: Human = { name: 'C' };

describeHumanAbilities(john);
describeHumanAbilities(sarah);
describeHumanAbilities(mike);

Output:

Reference: https://www.typescriptlang.org/docs/handbook/2/narrowing.html#the-in-operator-narrowing