TS does not approve of optional chaining when it comes to objects

Question

TS does not approve of optional chaining when it comes to objects

type Object1 = {
  link: 'niceurl.com'
}

type Object2 = {
  source: 'differenturl.com'
}

function AnotherComponent(item: Object1 | Object2) {
  return (
    <img src={item?.link || item?.source} />
  )
}

Output:

Error: 
Property 'link' does not exist on type 'Object1 | Object2'.
  Property 'link' does not exist on type 'Object2'

Expected: no error as the optional chaining meets the type guard.

I think something like ("link" in item) or a similar inline type assertion might help, but considering the component's size, these options seem cumbersome.

typescript

Answer 1

Answer №1

This scenario is commonly seen in TypeScript. When using optional chaining, TypeScript can struggle to determine the correct types.

function DisplayImage(item: Obj1 | Obj2) {
  return (
    <img src={"url" in item ? item.url : item.src} />
  )
}

If you feel that checking "xx" in obj every time is too cumbersome, you could create a discriminated union for Obj1 and Obj2 like this.

type Obj1 = {
  url: 'coolurl.com'
  src?:undefined
}

type Obj2 = {
  src: 'someurl.com'
  url?:undefined
}

function DisplayImage(item: Obj1 | Obj2) {
    
  return (
    <img src={ item.src ?? item.url} />
  )
}

Answer 2

This scenario is commonly seen in TypeScript. When using optional chaining, TypeScript can struggle to determine the correct types.

function DisplayImage(item: Obj1 | Obj2) {
  return (
    <img src={"url" in item ? item.url : item.src} />
  )
}

If you feel that checking "xx" in obj every time is too cumbersome, you could create a discriminated union for Obj1 and Obj2 like this.

type Obj1 = {
  url: 'coolurl.com'
  src?:undefined
}

type Obj2 = {
  src: 'someurl.com'
  url?:undefined
}

function DisplayImage(item: Obj1 | Obj2) {
    
  return (
    <img src={ item.src ?? item.url} />
  )
}

Answer 3

Answer №2

If you ever find yourself needing to narrow down the type in your code, consider using a type predicate. For instance, you can create a function that narrows the item to one of two types in your code: Check out this Playground

type Object1 = {
  url: 'coolurl.com'
}

type Object2 = {
  src: 'someurl.com'
}

function isObject1(obj: Object1 | Object2): obj is Object1 {
    return (obj as Object1).url !== undefined;
}

function MyComponent(item: Object1 | Object2) {
  return (
    <img src={isObject1(item) ? item.url : item.src} />
  )
}

Answer 4

If you ever find yourself needing to narrow down the type in your code, consider using a type predicate. For instance, you can create a function that narrows the item to one of two types in your code: Check out this Playground

type Object1 = {
  url: 'coolurl.com'
}

type Object2 = {
  src: 'someurl.com'
}

function isObject1(obj: Object1 | Object2): obj is Object1 {
    return (obj as Object1).url !== undefined;
}

function MyComponent(item: Object1 | Object2) {
  return (
    <img src={isObject1(item) ? item.url : item.src} />
  )
}

TS does not approve of optional chaining when it comes to objects

Answer №1

Answer №2

Similar questions

Utilizing prerender.io with lazy loading in Angular 2: A comprehensive guide

Error: No 'map' property found in 'TwitterserviceService' type

How come webstorm/react-hook-forms isn't showing me suggested choices for the "name" field?

Update the name of the table header dynamically based on the checkbox that is selected in Vue

How to add a service to a static function in Angular

Unable to retrieve dynamically generated object property from an array in AngularJS 2+

Toggle the visibility of a checkbox based on the JSON data

Combine the values in the array with the input

Unable to access or modify properties within a function passed as an argument

When accessing an Angular 7 page directly through the URL in the browser, it becomes unresponsive. However, the page works perfectly fine when navigating

A guide to accessing parent attributes in Vue3 using typescript

What is the method for utilizing an alias at the top within a subquery?

The index declaration file has not been uploaded to NPM

Tips for setting up a React TypeScript project with custom folder paths, such as being able to access components with `@components/` included

Can you explain the key distinction between the backtick (`) and the ampersand-hash-39

Creating a type-safe dictionary for custom theme styles in Base Web

Sending data using formData across multiple levels of a model in Angular

Utilizing Express JS to Optimize JPEG File Loading with Cache Headers

Discovering how to specify the type of a dynamically created object using 'for await' in TypeScript

Oh no! It seems like the build script is missing in the NPM