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

tips for accessing dynamic key pair value data in Angular

registering a back button action in Ionic2 for multiple pages

What is the proper way to create a React Context in TypeScript that accepts both a ref and a setState function as arguments?

Is it possible to automatically correct all import statements in a TypeScript project?

Is there a way to programmatically add a timestamp to a form in Angular6?

When evaluating objects or arrays of objects to determine modifications

Challenges of Vue 3 Typescript ComputedRef

Tips for telling the difference between typescript Index signatures and JavaScript computed property names

Ways to dynamically display or hide content in Angular 7

Utilize mui-tiptap to effortlessly upload images to your content

What is the best way to combine TypeScript output while maintaining node import integrity?

Transferring data from a child component to a parent component in Angular using @ViewChild requires providing 2 arguments

Make sure to declare rest parameters first when using Typescript

The devastation caused by typing errors in TypeScript

Remove the package from the @types folder within the node_modules directory

Retrieve the instance from the provider using its unique key without needing to inject its dependencies

Utilize the expert capabilities within #dateHeaderTemplate in the Angular component schedule by Syncfusion

What distinguishes between a public variable declared as var: any = []; versus a public variable declared as var: any[] =

Angular: Safely preserving lengthy content without the use of a database

I am unable to locate the appropriate TypeScript type for the `displayName` attribute when it is used as a prop for the `type` component