Utilizing union type return values in Typescript

Question

Utilizing union type return values in Typescript

Looking to incorporate shelljs (via DefinitelyTyped) into my Typescript 1.5-beta project. I want to utilize the exec function with the specified signature:

export function exec(command: string, options: ExecOptions): ExecOutputReturnValue | child.ChildProcess;

export interface ExecOutputReturnValue
{
    code: number;
    output: string;
}

When importing and using the library like this (which functions correctly in normal ES6 JavaScript)

import * as $ from 'shelljs';
const code =  $.exec(command, { silent: true }).code;

The Typescript compiler throws

error TS2339: Property 'code' does not exist on type 'ChildProcess | ExecOutputReturnValue'

.

Is there a way to safely access .code?

typescript

Answer 1

Answer №1

Having a union type means that all common members will be visible in its raw form.

If you wish to access more specific members, you must implement a type guard. By using a type guard, you will be able to utilize all the specific members of that type.

Below is a simplified example:

declare class Example {
    test(): string | number;
}

var obj = new Example();

var result = obj.test();

if (typeof result === 'string') {
    // Inside this block, result contains all properties of a string type
    result.
} else {
    // In this block, result contains all properties of a number type
    result.
}

In scenarios where applying a typeof check isn't feasible for certain types, you can explicitly inform the compiler that you are knowledgeable about what you're doing:

const data =  (<ExecOutputReturnValue >$.exec(command, { silent: true })).code;

Answer 2

Having a union type means that all common members will be visible in its raw form.

If you wish to access more specific members, you must implement a type guard. By using a type guard, you will be able to utilize all the specific members of that type.

Below is a simplified example:

declare class Example {
    test(): string | number;
}

var obj = new Example();

var result = obj.test();

if (typeof result === 'string') {
    // Inside this block, result contains all properties of a string type
    result.
} else {
    // In this block, result contains all properties of a number type
    result.
}

In scenarios where applying a typeof check isn't feasible for certain types, you can explicitly inform the compiler that you are knowledgeable about what you're doing:

const data =  (<ExecOutputReturnValue >$.exec(command, { silent: true })).code;

Answer 3

Answer №2

Although this question may be dated, it can still provide valuable insights for anyone who stumbles upon it. In the latest TypeScript versions, utilizing user-defined type guards with type predicates offers a safer approach compared to simply assuming you know how to handle types correctly, potentially avoiding runtime errors in situations where assumptions lead to mistakes.

Let's consider the example provided by the original poster:

import * as $ from 'shelljs';

// defining our custom type guard, pay attention to the return type
const isExecOutput = (result: ExecOutputReturnValue | child.ChildProcess): result is ExecOutputReturnValue => {
    return (result as ExecOutputReturnValue).code !== undefined;
}

const result: ExecOutputReturnValue | child.ChildProcess = $.exec(command, { silent: true });

if (isExecOutput(result)) {
    doSomething(result.code); // safely accessing code property!
} else {
    // ... handling the other type gracefully
}

The crucial aspect of this implementation lies in the return type of the isExecOutput function: result is ExecOutputReturnValue. This concept known as a type predicate enables the creation of such user-defined type guards. For more detailed information, please refer to the official documentation available here.

Answer 4

Although this question may be dated, it can still provide valuable insights for anyone who stumbles upon it. In the latest TypeScript versions, utilizing user-defined type guards with type predicates offers a safer approach compared to simply assuming you know how to handle types correctly, potentially avoiding runtime errors in situations where assumptions lead to mistakes.

Let's consider the example provided by the original poster:

import * as $ from 'shelljs';

// defining our custom type guard, pay attention to the return type
const isExecOutput = (result: ExecOutputReturnValue | child.ChildProcess): result is ExecOutputReturnValue => {
    return (result as ExecOutputReturnValue).code !== undefined;
}

const result: ExecOutputReturnValue | child.ChildProcess = $.exec(command, { silent: true });

if (isExecOutput(result)) {
    doSomething(result.code); // safely accessing code property!
} else {
    // ... handling the other type gracefully
}

The crucial aspect of this implementation lies in the return type of the isExecOutput function: result is ExecOutputReturnValue. This concept known as a type predicate enables the creation of such user-defined type guards. For more detailed information, please refer to the official documentation available here.

Utilizing union type return values in Typescript

Answer №1

Answer №2

Similar questions

The ES6 import feature conceals the TypeScript definition file

What made the "in" operator not the best choice in this situation?

ReactJS does not support merging multiple pages into one based on user button selection

Navigational menu routing with AngularJS2 using router link paths

Validators in Angular forms are a powerful tool for enforcing

What is causing the Typescript compiler to interpret an element in a string array as the type 'never'?

Tips for formatting dates in Angular 6

A guide on showcasing nested arrays data in an Angular application

The Angular Node server is responding with the error message "You have entered 'undefined' instead of a stream."

How can I prevent the enter key from working with Twitter Typeahead?

Tips for effectively utilizing URLSearchParams in Angular 5 HttpClient's "get" function

Interface circular dependency is a phenomenon where two or more interfaces

Change to a dark theme using React hooks in typescript

What is the process by which Angular 2 handles imports?

Combining two elements in Angular 2

Issue with setting cookies in Node.js using Express

Disappearing Ionic React useState value issue encountered when passing it as a prop parameter in a function

Is there a way to show text as symbols in Primeng components?

Disabling a specific tab in an array of tabs using Angular and Typescript

Implementing Microdata with React and Typescript: A Comprehensive Guide