[TypeScript] Union Types and Type Aliases in TypeScript

Posted 2020-08-13 Answer1215

Sometimes we want our function arguments to be able to accept more than 1 type; e.g. a string or an array. This lesson will show us how to assign more than 1 type to a variable with Typescript union types and type aliases.

 

type types = string | boolean | number;

var fn = (sm: types) => sm;

fn("something"); //OK
fn(false); //OK
fn(10); //OK
fn([2,2,3]) //Error

 

Union Type:

var fn = (sm: string | boolean | number) => sm;

But it took many places, so to make it shorter, we use Typoe aliases:

type types = string | boolean | number;

var fn = (sm: types) => sm;

 

 

‘typeof‘ and ‘instanceof‘: 

type types = string | boolean | number | string[];
var fn2 = (something: types) => {
    if(typeof something === "string"
    || typeof something === "boolean"
    || typeof something === "number"){
        console.log(something);
    }
    

    if(something instanceof Array){
        let str = "";
        something.forEach(s => {
            str += s;
        })
    }
}

Using ‘isntaceof‘, so Typescript understand ‘something‘ is Array type, it will pop up the methods which array can use for.

 

If we use put unit type as "string" or "object" and try to access the object prop, will throw error:

type stuff = string |{name: string}
var fn3 = (something: stuff) => {
    console.log(something.name) //  compile error
}

 

If we put tow object in unit type, but they don‘t share the same prop:

type objs = {age: number} | {name: string};
var fn4 = (something: objs) => {
    console.log(something.age); // compile error
    console.log(something.name); // compile error
}

 

Last if the unit types are objects and share the same prop:

type sharePropObjs = {name: string, age: number} | {name: string, address: string};
var fn4 = (something: sharePropObjs) => {
    console.log(something.age); // compile error
    console.log(something.address); // compile error
    console.log(something.name); // OK
}

To review, the Union type is defined by adding an Or pipe. The Type alias is kind of like a bar, except you‘re defining a type, not a variable. As of now, we have Type of and Instance of for type cards. Type cards let us differentiate between types and allow TypeScript to know what those types are.

If you Union type Objects with Not Objects, the compiler gets mad. If you Union type Objects without a common parameter, the compiler gets mad. If you Union type Objects with a common parameter, you can access that common parameter.