zoukankan      html  css  js  c++  java
  • ts 接口

    接口 定义:接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。

    举例说明:

    未用接口情况下:
    
    function printLabel(labelledObj: { label: string }) {
       console.log(labelledObj.label);
    }
    let myObj = { size: 10, label: "Size 10 Object" };
    printLabel(myObj);
    
    用接口情况下:
    
    interface LablledValue{
        label:string
    }
    function printLabel(labelledObj:LablledValue) {
       console.log(labelledObj.label);
    }
    let myObj = {size: 10, label: "Size 10 Object"};
    printLabel(myObj);

    可选属性

    //可选属性
    //接口里的属性不全都是必需的
    interface DataStr {
        name?: string;
        number?: number;
    }
    function numname(config: DataStr): { name: string; number: number } {
        let obj = { name: "张三", number: 118 };
        if (config.name) {
            obj.name = config.name
        }
        if (config.number) {
            obj.number = config.number
        }
        return obj;
    }
    let namenum = numname({ name: "大夫" })

    只读属性

    //只读属性
    //只允许第一次设置,之后不可以再次设置
    interface arr {
        readonly x: number;
        readonly y: number;
    }
    let arr_y: arr = { x: 2, y: 1 }
    // TypeScript具有ReadonlyArray<T>类型,它与Array<T>相似,只是把所有可变方法去掉了,因此可以确保数组创建后再也不能被修改:
    let a: number[] = [1, 2, 3, 4];
    let ro: ReadonlyArray<number> = a;
    // ro[0] = 12; // error!
    // ro.push(5); // error!
    // ro.length = 100; // error!
    // a = ro; // error!
    额外的属性检查
    //额外的属性检查
    //定义 如果一个对象字面量存在任何“目标类型”不包含的属性时,你会得到一个错误。
    interface DataStr {
        name?: string;
        number?: number;
        // [propName: string]: any;
    }
    function numname(config: DataStr): { name: string; number: number } {
        let obj = { name: "张三", number: 118 };
        if (config.name) {
            obj.name = config.name
        }
        if (config.number) {
            obj.number = config.number
        }
        return obj;
    }
    //解决方法
    //1.使用断言类型
    //2.在接口内添加 [propName: string]: any;
    let namenum = numname({ names: "大夫" } as col);
    // let namenum = numname({ names: "大夫", data: 1 });
    console.log(namenum);
  • 相关阅读:
    AC_9. 分组背包问题
    AC_8. 二维费用的背包问题
    AC_7混合背包问题
    AC_5. 多重背包问题 II
    AC_4. 多重背包问题 I
    AC_3. 完全背包问题
    小郡肝火锅点餐系统——测试部署发布
    Vue脚手架搭建
    归并排序-总结
    小郡肝火锅点餐系统——项目文档
  • 原文地址:https://www.cnblogs.com/zhaozhenghao/p/12163813.html
Copyright © 2011-2022 走看看