Exploring the differences in object shapes using TypeScript

Question

Exploring the differences in object shapes using TypeScript

I'm currently working on defining an object that has the ability to hold either data or an error.

export type ResultContainer = {
  data: any;
} | {
  error: any;
};

function exampleFunction():ResultContainer {
    return {
        data: 3
    }
}

However, when attempting to access the result of the function, I encounter the following issue:

const result = exampleFunction();
result.data = 23; // Property 'data' does not exist on type 'ResultContainer'. Property 'data' does not exist on type '{ error: any; }'

Could someone guide me on the correct way to access either 'data' or 'error'? Thank you!

typescript

Answer 1

Answer №1

Here is TypeScript's interpretation of your code:

const v = test();
// v: {data: any} | {error: any}
v.data = 23;
// There is a possibility that 'v' could be of type '{error: any}'
// If so, there may be a runtime error
// To avoid this error, let's throw a TS error now!

To prevent this from happening, you can use a type guard to narrow down the union type to a specific type that won't lead to a TS error:

const v = test();
// v: {data: any} | {error: any}
if ('data' in v) {
  // v: {data: any}
  v.data = 23;
  // no error will occur!
}

If you are confident that v will have a property named data, you can cast v during its declaration:

const v = (test() as {data: any});
v.data = 23;

You can experiment with this code on the typescript playground

Answer 2

Here is TypeScript's interpretation of your code:

const v = test();
// v: {data: any} | {error: any}
v.data = 23;
// There is a possibility that 'v' could be of type '{error: any}'
// If so, there may be a runtime error
// To avoid this error, let's throw a TS error now!

To prevent this from happening, you can use a type guard to narrow down the union type to a specific type that won't lead to a TS error:

const v = test();
// v: {data: any} | {error: any}
if ('data' in v) {
  // v: {data: any}
  v.data = 23;
  // no error will occur!
}

If you are confident that v will have a property named data, you can cast v during its declaration:

const v = (test() as {data: any});
v.data = 23;

You can experiment with this code on the typescript playground

Answer 3

Answer №2

Check out this implementation featuring a discriminated union structure (including the addition of a shared property called dataType in each union member):

export type Outcome = {
  dataType: "result",  
  resultData: any
} | {
  dataType: "failure",  
  errorMessage: any
};

function assess(): Outcome {
    return {
        dataType: "result",
        resultData: 5
    }
}

const res = assess();
if ("result" === res.dataType){
   res.resultData = 45;
}

Answer 4

Check out this implementation featuring a discriminated union structure (including the addition of a shared property called dataType in each union member):

export type Outcome = {
  dataType: "result",  
  resultData: any
} | {
  dataType: "failure",  
  errorMessage: any
};

function assess(): Outcome {
    return {
        dataType: "result",
        resultData: 5
    }
}

const res = assess();
if ("result" === res.dataType){
   res.resultData = 45;
}

Exploring the differences in object shapes using TypeScript

Answer №1

Answer №2

Similar questions

Best Practices for Displaying Videos in Ionic 2

Having trouble linking the date object with the default value of the date input field

react state change not triggering re-render of paragraph

Converting Typescript fat arrow syntax to regular Javascript syntax

Reattempting a Promise in Typescript when encountering an error

typescript page objects in protractor are showing an undefined property

Could you please tell me the type that is returned by the createClient function?

Exploring Angular 2 with Visual Studio 2015 Update 1 in the context of Type Script Configuration

Angular Universal involves making two HTTP calls

"Encountering a Bug in Angular 2 Related to Chart.js

Difficulty encountered when trying to apply a decorator within a permission guard

What allows the execution of "T[keyof T] extends Function" in TypeScript specifically for Strings?

Unable to transfer variable from a function to the test in Protractor

Troubleshooting: Issue with Dependency Injection functionality in Angular 2 starter project

How to trigger a click event in React using TypeScript and material-ui library

Properly configuring paths in react-native for smooth navigation

Converting a string to HTML in Angular 2 with proper formatting

Receiving a conduit from the fuel supplier with only limited information on hand

Error message occurs during compilation of basic Vue file in Webpack

Encountering Build Issue: "NgSemanticModule is not recognized as an NgModule" persists despite inclusion of dependencies and importing into primary module