I attempted to use an `if` statement as my type guard, but TypeScript decided to overlook it

Question

I attempted to use an `if` statement as my type guard, but TypeScript decided to overlook it

const datas = {
    a: {
        "0": 0,
        "1": 1
    },
    b: {
        "0": 0
    }
}

function fetchValue (data:keyof typeof datas, prop: "0"|"1") {
    if(prop in datas[data]) {
        return datas[data][prop] // <- encountering error on this line
    }
}

Encountering an issue due to 'Property '1' does not exist on type '{ "0": number; "1": number; } | { "0": number; }'.ts(7053)

Despite having an if statement to verify if the property prop exists in datas[data], TypeScript seems to be neglecting it and throwing errors.

typescript

Answer 1

Answer №1

In order to ensure parameter validation at compile time, you must modify your function to make it generic:

function index<K extends keyof typeof dataItems>(item: K, key: keyof typeof dataItems[K]) {

Within the function, we need a variable for TypeScript to keep track of narrowing down the selection:

const value = dataItems[item];

if (key in value) {
    return value[key];
}

This will restrict key to only valid keys based on the input given for item.

index("x", "size");
index("x", "color");
index("y", "size");
index("y", "color"); // This will result in an error since datas.y["color"] does not exist

Interactive Demo

Answer 2

In order to ensure parameter validation at compile time, you must modify your function to make it generic:

function index<K extends keyof typeof dataItems>(item: K, key: keyof typeof dataItems[K]) {

Within the function, we need a variable for TypeScript to keep track of narrowing down the selection:

const value = dataItems[item];

if (key in value) {
    return value[key];
}

This will restrict key to only valid keys based on the input given for item.

index("x", "size");
index("x", "color");
index("y", "size");
index("y", "color"); // This will result in an error since datas.y["color"] does not exist

Interactive Demo

I attempted to use an `if` statement as my type guard, but TypeScript decided to overlook it

Answer №1

Similar questions

Sending VSCode to external functions

In TypeScript, deduce the optional generic type automatically

What is the best approach to converting an array of strings into a TypeScript type map with keys corresponding to specific types?

Warning: Google Map API alert for outdated Marker Class

Issue: The formGroup function requires a valid FormGroup instance to be passed in. Data retrieval unsuccessful

What is the best way to execute a function within testing procedures?

Expanding a container component with React TypeScript

The function cannot accept a string as an argument, it specifically requires a Blob

Maximizing Jest's potential with multiple presets in a single configuration file/setup

What is the process for including an extra track in Twilio Video?

Is it possible to create and manage a hierarchical menu in React (Next.js) using a generic approach?

Enhancing Communication between Sibling Components in Angular 2

Saving a local JSON file in Angular 5 using Typescript

Generate a TypeScript generic function that maps class member types to class types

Challenges encountered when using Tailwindcss and Nextjs with class and variables

What is the best way to extract values from a specific table column and store them in an array using Angular?

Stop any ongoing search requests in Angular 7 using Ng2SmartTable

Having difficulty updating an angular variable within a callback function

What is the most effective method to retrieve the current browser URL in Angular 2 with TypeScript?

Establishing the initial state in React