[TypeScript] - TypeScript官方文档学习笔记-接口-上（二）

前言

接口只是在语法层面限制写法，从而使部分语句写法不出现，本质是语法规范

接口

TypeScript中接口用来定义结构类型，出于类型检查需要

编译转换后接口消失，仅用于语法检查

普通对象传入：

function printLabel(labeledObj: { label: string }) {
    console.log(labeledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

注意：传入的对象中有额外属性

通过接口：

interface LabeledValue {
    label: string;
}

function printLabel(labeledObj: LabeledValue) {
    console.log(labeledObj.label);
}

let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

可选属性

在接口属性名称后加?，标识属性是可选的

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): {color: string; area: number} {
    let newSquare = {color: "white", area: 100};
    if (config.color) {
        newSquare.color = config.color;
    }
    if (config.width) {
        newSquare.area = config.width * config.width;
    }
    return newSquare;
}

let mySquare = createSquare({color: "black"});

只读属性

在属性名称前加readonly修饰符

interface Point {
    readonly x: number;
    readonly y: number;
}

只读数组

ReadonlyArray<T>，像用Array<T>那样，但不可改变

let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a;
//let ro: ReadonlyArray<number> = [1,2,3,4];
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!

将只读数组赋给对象也是非法的

可以通过类型断言将可读数组赋给其它变量

let ar :ReadonlyArray<number> = [1,2,3,4]
let b = ar as number[]

readonly vs const

• 属性用readonly（语法限制）
• 变量用const（编译限制）

额外属性检查

如果提供的对象没有一个是接口（或普通对象写法）中包含的，TS语法检查会报一个错误

这个错误可能是因为拼写错误（显示错误主要目的是这个），或就是这样

interface SquareConfig {
    color?: string;
    width?: number;
}

function createSquare(config: SquareConfig): { color: string; area: number } {
    return {color: 'red',area: 23}
}

let mySquare = createSquare({ colour: "red", width: 100 });// Error

解决方法：断言

let mySquare = createSquare({ colour: "red", width: 100 } as SquareConfig);

允许额外属性

若要在方法中使用额外属性,可以在接口中添加[propName: string]: any;

interface SquareConfig {
    color?: string;
    width?: number;
    [propName: string]: any;
}

通过变量

通过将对象赋给变量来绕过检查（至少需要一个共同属性）

let squareOptions = { colour: "red", width: 100 };
let mySquare = createSquare(squareOptions);

大多数时候多余属性是错误的存在