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

ゝ一世哀愁。 2023-02-22 05:15 4阅读 0赞

# 前言 #

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

# 接口 #

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

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