如何在 Typescript 中使用联合类型返回值？

Question

I am trying to use shelljs (via DefinitelyTyped ) in Typescript 1.5-beta. In my code I would like to use the exec function which has the following signature:

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

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

If I import and use the library as follows (which, in normal ES6 JavaScript works perfectly fine)

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

the Typescript compiler gives me error TS2339: Property 'code' does not exist on type 'ChildProcess | ExecOutputReturnValue' error TS2339: Property 'code' does not exist on type 'ChildProcess | ExecOutputReturnValue' .

What can I do to access .code in a type-safe way?

Answer 1

When you have a union type, you will see any shared members when you use it raw.

If you want to use more specific members, you need to use a type guard. Inside of the type guard, you will have access to all of the specific members for the type.

Here is a cut down example:

declare class Test {
    example(): string | number;
}

var x = new Test();

var y = x.example();

if (typeof y === 'string') {
    // In here, y has all the members of a string type
    y.
} else {
    // In here, y has all the members of a number type
    y.
}

When you are dealing with types that you can't apply a typeof check, you'll need to tell the compiler that "you know best":

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

Answer 2

This is an old question, but if anyone comes across it, this may help. In newer versions of TS, using user-defined type guards with type predicates is safer than simply "telling the compiler you know best" and can help avoid runtime errors in cases where you think you know best but actually don't :-).

Using the OPs example:

import * as $ from 'shelljs';

// our user-defined type guard, note the return type
const isExecOutput = (result: ExecOutputReturnValue | child.ChildProcess): code is ExecOutputReturnValue => {
    return (result as ExecOutputReturnValue).code !== undefined;
}

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

if (isExecOutput(result)) {
    doSomething(result.code); // safe!
} else {
    // ... accessing the other type's members is safe here
}

The key to making this work is the isExecOutput function's return type: code is ExecOutputReturnValue . Called a type predicate, which makes user-defined type guards like these possible. The official documentation can be found here .