A series of OR interfaces in TypeScript Interface

Question

A series of OR interfaces in TypeScript Interface

Imagine a scenario where there is a choice between multiple interfaces

interface a {x:string}
interface b {y:string}
interface c {z:string}
type all = a | b | c

Now, consider an object fulfilling all by being of type c

When you try to access the property 'z' by calling:

    if (obj.hasOwnProperty('z')) {
      return obj.z
    }

You encounter a compilation error:

The code fails to compile because:

Property 'z' does not exist on type 'a'.

What would be your approach to resolve this issue?

javascript typescript interface

Answer 1

Answer №1

If you're in a situation where replacing hasOwnProperty with in is suitable and you're not interested in creating custom type guards, using the in operator will get the job done:

interface a { x: string }
interface b { y: string }
interface c { z: string }
type all = a | b | c;

function foo(obj: all) {
  if ('z' in obj) {
    return obj.z; // obj type is narrowed to c
  }
  return undefined;
}

Check it out in the Playground

Answer 2

If you're in a situation where replacing hasOwnProperty with in is suitable and you're not interested in creating custom type guards, using the in operator will get the job done:

interface a { x: string }
interface b { y: string }
interface c { z: string }
type all = a | b | c;

function foo(obj: all) {
  if ('z' in obj) {
    return obj.z; // obj type is narrowed to c
  }
  return undefined;
}

Check it out in the Playground

Answer 3

Answer №2

obj.hasOwnProperty('z') on its own does not ensure that obj meets the criteria for interface c. Imagine if obj was defined as

var obj = { x: "foo", y: "bar", z: true };

In this scenario, obj fulfills requirements for a and b, but not for c as obj.z is not a string.

To work around this, you can create custom type guards like so:

function isC(obj: all): obj is c {
  return obj.hasOwnProperty('z');
  // or return 'z' in obj;
}

...

if (isC(obj)) {
  return obj.z; // this is acceptable
}

Answer 4

obj.hasOwnProperty('z') on its own does not ensure that obj meets the criteria for interface c. Imagine if obj was defined as

var obj = { x: "foo", y: "bar", z: true };

In this scenario, obj fulfills requirements for a and b, but not for c as obj.z is not a string.

To work around this, you can create custom type guards like so:

function isC(obj: all): obj is c {
  return obj.hasOwnProperty('z');
  // or return 'z' in obj;
}

...

if (isC(obj)) {
  return obj.z; // this is acceptable
}

A series of OR interfaces in TypeScript Interface

Answer №1

Answer №2

Similar questions

What causes the discrepancy in errors when dealing with subtype versus regular assignments?

How can we use JavaScript to add a class to the <html> element?

"Trouble with Angular JS foreach loop: only the final item in the array

Sharing a state object with another React file can be accomplished by using props or context to

Tricks for displaying a dynamic object tooltip in Three.js

Consolidation of files for Client-Code-Generation with Swagger-Codegen: What is the best way to merge all files into

Saving a JavaScript array as a Redis list: A step-by-step guide

The font family specified in the Materia UI theme is experiencing compatibility issues on browsers that are not Chrome

The Socket.io client establishes connections with multiple servers simultaneously

Search for text in multiple tables using jQuery and automatically trigger a button click event when the text is found

Having difficulties achieving successful API requests in Next.js and Snipcart

I am curious if there is a wysiwyg web editor extension specifically designed for VS2010 available?

How can I use console.log to display a message when a variable reaches a specific value?

Looks like an error has occurred: "Swal has not been defined"

Steps for displaying the output of a post request in printing

How to organize and reuse code efficiently with Node.js, EJS, and front-end JavaScript?

Combining an Editor and Dropdown Feature for a Single Attribute in Asp.Net MVC

Ways to extend the default timeout duration in Angular

The key to successful filtering in Next.js with Hasura is timing - it's always a step

Differences between MobX local state and global state