JS/TSTypeScript

Types - union, literal, custom/aliases

  1. union union type

    The writing method is Parameter: Type 1|Type 2|Type 3.... indicates that the parameters can be assigned these types of values. like:

    1
    2
    3
    function combine(input1: string | number, input2: string | number){
        const result = input1 + input2; //error report
    }

    In the example, const result = input1 + input2 cannot be written directly within the function. This is because TS does not analyze what is in the union type, so it cannot detect whether these values can perform the + operation. Therefore, you have to write the if(typeof...) type detection code within the function yourself.

    A common use case for union types is to allow a function to receive arguments more flexibly, but then use different logic in the function depending on the exact type obtained. This allows the function to handle many different types of values. But this is not necessary. There may also be scenarios where union is used without subsequent type judgment, depending on the function logic.

    union can be used to combine type, class and interface. Because they are all types in TS. After union, you can use type a = to get the value.


  2. Literal literal type

    Literal types are based on union types. Literal type means that not only the type of the variable is determined, but the optional value is also determined.

    In the TS automatic inference of constant, the result is not a certain type, but a fixed value, such as:

    1
    const number2 = 2.8 //The inferred result is const number2: 2.8

    In the function of the union type example, if we want to add a third parameter to identify the result type, and the third parameter is a string, according to the previous writing method, we have to add a lot of judgments to the function:

    1
    2
    3
    4
    5
    6
    function combine(input1: string | number, input2: string | number, result: string){
        if(result === "as-number"){...};
        if(result === "as-string"){...};
    }
    const combinedAges = combine(30, 26, "as-number");
    const combinedString = combine("Hello", "World", "as-string");

    The flaw here is that when calling the function, enter the third parameter "as-number" or "as-string", and you must ensure that there are no spelling errors. We could improve this with an enum, but if there are only two possible values, a Literal type is a good choice. like:

    1
    2
    3
    4
    5
    6
    7
    8
    function combine(
    input1: string | number,
    input2: string | number,
    result: "as-number" | "as-string"
    ){
        if(result === "as-number"){...};
        if(result === "as-string"){...};
    }

    This way we only allow these two strings as parameters, not any strings. At this time, if we use the result value to make it equal to other strings, TS will directly report an error.


  3. Custom types/Type Aliases

    TS supports giving types other names. The keyword type needs to be used, and the first letter of the custom type must be capitalized. like:

    1
    type Combinable = number; //All number types can be replaced by Combinable types. Meaningless.

    Normally, **custom types can be used in combination with union / literal types. **

    1
    2
    type Combinable = number | string; //All number | string can be replaced by Combinable.
    type ResultDescription = "as-number" | "as-string";

    Custom types are useful because they encode the type into the programmer’s own type name and reuse it in subsequent code. Similar to the extraction function.


  4. Custom types are used for object types

    Custom types can also be used for object types. like:

    1
    2
    type User = { name: string; age: number };
    const u1: User = { name: 'Max', age: 30 }; // this works!

    Or simplify the code:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    //////////////////////Before simplifying//////////////////////
    function greet(user: { name: string; age: number }) {
      console.log('Hi, I am ' + user.name);
    }

    function isOlder(user: { name: string; age: number }, checkAge: number) {
      return checkAge > user.age;
    }
       
    ///////////////////////Simplified/////////////////////
    type User = { name: string; age: number };

    function greet(user: User) {
      console.log('Hi, I am ' + user.name);
    }

    function isOlder(user: User, checkAge: number) {
      return checkAge > user.age;
    }

    It is very similar to interface and is usually replaced by interface.


Share