Type Guards and Narrowing

Array Guard

Array.isArray separates a single value from a list before list operations run.

array guard `Array.isArray(value)` narrows a union to an array so methods such as `join` are available.

Array Guard

multiple
array_guard.ts
Replay: real traced execution (multi-file project)
function summarizeTags(tags: string | string[]): string {
    if (Array.isArray(tags)) {
        return `many:${tags.join("+")}`;
    }
    return `one:${tags}`;
}

const multiple: boolean = true;
const tags: string | string[] = multiple ? ["trace", "replay"] : "trace";
const summary: string = summarizeTags(tags);

console.log(summary);

function summarizeTags(tags: string | string[]): string {
    if (Array.isArray(tags)) {
        return `many:${tags.join("+")}`;
    }
    return `one:${tags}`;
}

const multiple: boolean = false;
const tags: string | string[] = multiple ? ["trace", "replay"] : "trace";
const summary: string = summarizeTags(tags);

console.log(summary);

  1. multiple ← true, tags ← trace,replay

    5    return `one:${tags}`;6}78const multiple→ true: boolean = true;  //@multiple=false9const tags→ trace,replay: string | string[] = multipletrue ? ["trace", "replay"] : "trace";10const summary: string = summarizeTags(tagstrace,replay);

  2. function summarizeTags(tags: string | string[]): string

    1function summarizeTags(tagstrace,replay: string | string[]): string {2    if (Array.isArray(tags)) {

  3. if (Array.isArray(tags))

    1function summarizeTags(tags: string | string[]): string {2    if (Array.isArray(tagstrace,replay)) {3        return `many:${tagstrace,replay.join("+")}`;4    }

  4. summary ← many:trace+replay

    8const multiple: boolean = true;  //@multiple=false9const tags: string | string[] = multiple ? ["trace", "replay"] : "trace";10const summary→ many:trace+replay: string = summarizeTags(tagstrace,replay);1112console.log(summarymany:trace+replay);
    outputmany:trace+replay

  1. multiple ← false, tags ← trace

    5    return `one:${tags}`;6}78const multiple→ false: boolean = false;9const tags→ trace: string | string[] = multiplefalse ? ["trace", "replay"] : "trace";10const summary: string = summarizeTags(tagstrace);

  2. function summarizeTags(tags: string | string[]): string

    1function summarizeTags(tagstrace: string | string[]): string {2    if (Array.isArray(tags)) {3        return `many:${tags.join("+")}`;4    }5    return `one:${tagstrace}`;6}

  3. summary ← one:trace

    8const multiple: boolean = false;9const tags: string | string[] = multiple ? ["trace", "replay"] : "trace";10const summary→ one:trace: string = summarizeTags(tagstrace);1112console.log(summaryone:trace);
    outputone:trace