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);

猜你喜欢