Trouble retrieving key from props due to variable being passed to function in TypeScript

Question

Trouble retrieving key from props due to variable being passed to function in TypeScript

In my programming scenario, I have defined two distinct interfaces:

interface Cat {
    name: string,
    color: string,
    feedingTimes: number[]
}

interface Dog {
    name: string,
    height: number,
    dateOfBirth: number,
}

Next, I proceeded to create an array named ANIMALS with elements of type Cat and Dog.

const ANIMALS = [{...} as Cat, {...} as Dog]

I then utilized a mapping function on the ANIMALS array, invoking the function foo().

ANIMALS.map((animal, index) => {foo(animal, identifier: getIdentifier(index)})

The functions foo() and getIdentifier() are crucial for this operation. getIdentifier(), in particular, returns a string based on the provided index.

getIdentifier = (index: number):string => {...};

const foo = (animal: Cat | Dog) => {
    if(identifier === 'cat') {
        const {name, color, feeding} = animal
    } else {
        const {name, height, dateOfBirth} = animal
    }
}

However, there seems to be an issue at hand as I try to access certain properties within the objects using destructuring assignments like {name, color, feeding} or {name, height, dateOfBirth}. The error message received states:

Property '...' does not exist on type 'Cat | Dog'.

This predicament raises the question: why can't I access these specific attributes? What could be causing this problem?

typescript

Answer 1

Answer №1

If the identifier is set to 'cat', then the animal type will be of type Cat

type FooParams = [
    animal: Dog,
    identifier: 'dog'
] | [
    animal: Cat,
    identifier: 'cat'
]

type Foo = (...params: FooParams) => void

const foo: Foo = (animal, identifier) => {
    if (identifier === 'cat') {
        const { name, color, feedingTimes } = animal
    } else {
        const { name, height, dateOfBirth } = animal
    }
}

The code provided does not demonstrate any relationship between the animal and the identifier.

TS Playground

Answer 2

If the identifier is set to 'cat', then the animal type will be of type Cat

type FooParams = [
    animal: Dog,
    identifier: 'dog'
] | [
    animal: Cat,
    identifier: 'cat'
]

type Foo = (...params: FooParams) => void

const foo: Foo = (animal, identifier) => {
    if (identifier === 'cat') {
        const { name, color, feedingTimes } = animal
    } else {
        const { name, height, dateOfBirth } = animal
    }
}

The code provided does not demonstrate any relationship between the animal and the identifier.

TS Playground

Answer 3

Answer №2

One common misconception is assuming Cat | Dog means "of type cat or of type dogs", when in reality it represents a new type, "Cat | Dog", which is an union of both types.

This doesn't imply that the variable has all properties of both types; rather, it signifies that it can be either type and at compile time, the specific type is unknown.

Therefore, the variable only contains the shared property: "name".

In Typescript, there's a feature that enables the compiler to infer the type based on a switch statement. Here's an example:

 // Interfaces and function declaration omitted for brevity
const ANIMALS = [{name: "cat", color: "red", feedingTimes: [1, 2]} as Cat, {name: "name", height: 2, dateOfBirth: 2} as Dog]

const foo = (animal: Cat | Dog) => {
    switch(animal.typeOfAnimal) {
        case('cat'): 
            return (animal.name, animal.color, animal.feedingTimes)
        case('dog'):
            return (animal.name, animal.height, animal.dateOfBirth)    
    }    
}

foo(ANIMALS[1])
foo(ANIMALS[0])

The same result can also be achieved using if statements:

const foo = (animal: Cat | Dog) => {
    if(animal.typeOfAnimal == 'cat') {
        const {name, color, feedingTimes} = animal
    } else {
        const {name, height, dateOfBirth} = animal
    }
}

Alternatively, you can simply typecast the variable back to its original type.

Answer 4

One common misconception is assuming Cat | Dog means "of type cat or of type dogs", when in reality it represents a new type, "Cat | Dog", which is an union of both types.

This doesn't imply that the variable has all properties of both types; rather, it signifies that it can be either type and at compile time, the specific type is unknown.

Therefore, the variable only contains the shared property: "name".

In Typescript, there's a feature that enables the compiler to infer the type based on a switch statement. Here's an example:

 // Interfaces and function declaration omitted for brevity
const ANIMALS = [{name: "cat", color: "red", feedingTimes: [1, 2]} as Cat, {name: "name", height: 2, dateOfBirth: 2} as Dog]

const foo = (animal: Cat | Dog) => {
    switch(animal.typeOfAnimal) {
        case('cat'): 
            return (animal.name, animal.color, animal.feedingTimes)
        case('dog'):
            return (animal.name, animal.height, animal.dateOfBirth)    
    }    
}

foo(ANIMALS[1])
foo(ANIMALS[0])

The same result can also be achieved using if statements:

const foo = (animal: Cat | Dog) => {
    if(animal.typeOfAnimal == 'cat') {
        const {name, color, feedingTimes} = animal
    } else {
        const {name, height, dateOfBirth} = animal
    }
}

Alternatively, you can simply typecast the variable back to its original type.

Trouble retrieving key from props due to variable being passed to function in TypeScript

Answer №1

Answer №2

Similar questions

Error encountered when packaging WebAssembly using Rollup

Creating PropTypes from TypeScript

Ways to develop a dynamic Promise-returning Function

"My NodeJS code is returning a string instead of JSON data when using the MongoDB populate

Using rxjs takeUntil will prevent the execution of finalize

TypeScript's version of Java's enum (or C#'s structure)

Commitments shatter amidst constructing a website

Implementing more stringent type checking in TypeScript instead of utilizing the 'as' keyword

Is there a way to eliminate the right margin in React?

What steps can I take to stop Vetur and TypeScript from displaying duplicate TypeScript warnings in VSCode?

Issues arising from TypeScript error regarding the absence of a property on an object

Utilizing Express JS to make 2 separate GET requests

The issue of login/sign up difficulties arises from the import of AngularFireDatabase in Angular

Building a comprehensive project using Prisma and Next.JS in TypeScript - encountering an issue where the props "Component" and "pageProps" are deemed invalid

What is the best way to include bootstrap using webpack?

Understanding how to link data between sibling elements using typescript

Chess.js TypeScript declaration file for easy implementation

"What is the best way to determine the data type of an object retrieved from an API in TypeScript

How can you easily tell if TypeScript code is being executed in a Jasmine/Karma test environment?

Angular - Utilizing NgRx selector for efficient data update notifications