• TypeScript联合类型 接口


    TypeScript联合类型

    联合类型表示取值可以为多种类型中的一种
    如下所示

    /**
     * 联合类型
     */
    var muchtype:string|number="hello";
    muchtype=1;
    

    这一块我们必须使用string或者number都支持的类型,那么下面我们可以进行调用扩展方法toString()

    /**
     * 联合类型
     * 注意:如果说我们使用字符串的length属性那么我们需要注意,如果是number类型是不支持的
     * 这一块我们必须使用string或者number都支持的类型,那么下面我们可以进行调用扩展方法toString()
     * 
     */
    var muchtype:string|number="hello";
    muchtype="";
    muchtype=1;
    console.log(muchtype.length)
    console.log(muchtype.toString().length)
    
    

    TypeScript中对象类型-接口

    接口可以描述一种抽象的行为,也可以描述对象的结构形状,当然我们也需要遵守接口命名规范,接口一般首字母大写 当然在一些语言上面建议接口的名称前缀加上I前缀

    interface IStudent{
        name:string
    }
    /**
     * 接口规范了name属性是必须要写的所以我们要通过第四行代码进行使用
     * 接口起到一个约束作用约束我们这些属性字段必须一对一的编写.
     */
    var obj1:IStudent;
    obj1="11";
    obj1=1;
    obj1={name:"11"};
    

    如果说我们进行修改接口如下所示

    interface IStudent{
        name:string,
        age:number
    }
    

    那么我们必须要给age进行赋值操作

    obj1={name:"11",age:1};
    

    可选类型nullable

    interface IStudent
    {
        name:string,
        age?:number //?为一个可空类型nullable 他是一个可有可无的,那么在下面我们可以不用对age进行赋值操作也不会出现异常
    }
    
    var obj2={name:"张三",age:1}
    

    在我们属性不确定的时候我们可以通过如下方式实现,any必须是任意类型,
    因为当我们进行使用不确定属性个数的时候会有局限性.
    当然下面的属性中比如说string number我们也可以使用联合类型,这一块我们后续可以根据实际需求进行变动即可

    //属性个数不确定的时候 
    interface IStudent{
        name:string,
        age?:number,
        [propName:string]:any
    }
    
    var obj3:IStudent={name:"Mr.A",age:1,sex:"男",birthday:"2020-03-20"}
    

    只读属性 readonly

    interface IStudent{
        name:string,
        readonly age:number
    }
    var obj3:IStudent={name:"Mr.A",age:18}
    obj3.name="Mr.B";
    obj3.age=19;
    

    通过如上代码我们可以发现当我们对obj3.age进行赋值的时候会发现感知错误提示 如下所示

    也就是说一旦我们赋初始值以后那么后面我们就不能将其进行修改了.

  • 相关阅读:
    雅虎、网易ajax标签导航效果的实现
    仿淘宝网站的导航标签效果!
    FLASH2007展望
    "运行代码”功能整理发布
    获取远程文件保存为本地文件(精简实用)
    整理JS+FLASH幻灯片播放图片脚本代码
    解决IE更新对FLASH产生影响
    模仿combox(select)控件
    0209.Domino R8.0.x升级指南
    Lotus Domino 中的高级 SMTP 设置Notes.ini相关参数
  • 原文地址:https://www.cnblogs.com/yyfh/p/12684209.html
Copyright © 2020-2023  润新知