eamonnboyle

function isTextArea(input: HTMLInputElement | HTMLTextAreaElement): input is HTMLTextAreaElement {
    return 'rows' in input;
}

if (isTextArea(input)) {
    // input has type HTMLTextAreaElement
    input.rows = 25; // Valid
}

eamonnboyle

function isTextArea(input: HTMLInputElement | HTMLTextAreaElement): boolean {
    return 'rows' in input;
}

if (isTextArea(input)) {
    // input still has union type
    input.rows = 25; // Compiler error
}

eamonnboyle

if ('rows' in input) {
    // input has type HTMLTextAreaElement
}

eamonnboyle

// animal has type Animal or 'Dog | Cat | Fox'
const animal: Animal = readAnimal();

if (animal.kind === "Fox") {
    // animal has type 'Fox'
    throw new Error('What does the Fox say?');
}
// 'Fox' removed because of throw above

// animal has type 'Dog | Cat'

eamonnboyle

interface Dog {
    kind: 'Dog';
    bark(): string;
}

interface Cat {
    kind: 'Cat';
    purr(): string;
}

eamonnboyle

function setupInput(input: HTMLInputElement | HTMLTextAreaElement) {
    if ('rows' in input) {
        // These properties are only valid for HTMLTextAreaElement
        input.rows = 25;
        input.cols = 80;
        input.wrap = 'hard';
    } else {
        // These properties are only valid for HTMLInputElement
        input.width = 400;
        input.height = 50;

eamonnboyle

function setupInput(input: HTMLInputElement | HTMLTextAreaElement) {
    input.value = ''; // Valid since value is common to both types

    if (input instanceof HTMLTextAreaElement) {
        // These properties are only valid for HTMLTextAreaElement
        input.rows = 25;
        input.cols = 80;
        input.wrap = 'hard';
    } else {
        // These properties are only valid for HTMLInputElement

eamonnboyle

// Note that the type of 'primitive' in each branch is different
switch (typeof primitive) {
    case "number": return primitive.toFixed(2);
    case "string": return primitive.toUpperCase();
    case "boolean": return !primitive;
    default: throw new Error("Unexpected type") 
}

eamonnboyle

element?.innerText = 'Hello';

eamonnboyle

const element: HTMLElement | null = document.getElementById('target');

element.innerText = 'Hello'; // Compiler error - null in union

if (element !== null) {
    element.innerText = 'Hello'; // null removed from union 
}