zoukankan      html  css  js  c++  java
  • [TypeScript] Union Types and Type Aliases in TypeScript

    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.

  • 相关阅读:
    c++ stl中的二分查找
    2015年---移动端webapp知识总结
    移动端网站优化指南-WAP篇
    ASO优化总结(基于网络分享的知识总结归纳)
    验证数字的正则表达式集
    个人的浏览器重置样式表(总结)
    微信或移动端网页的meta
    移动端字体和字体大小规范
    min-device-pixel-ratio
    Emmet语法实例(帮助快速开发)
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5934912.html
Copyright © 2011-2022 走看看