TypeScript-3.接口(interface)

最新推荐文章于 2025-06-18 16:24:10 发布

空谷足音 -จุ

最新推荐文章于 2025-06-18 16:24:10 发布

阅读量413

点赞数 1

CC 4.0 BY-SA版权

分类专栏： typescript

本文链接：https://blog.youkuaiyun.com/davidPan1234/article/details/90403546

typescript 专栏收录该内容

3 篇文章

订阅专栏

博客围绕接口展开，介绍了接口的可选属性和只读属性，实现接口时接口方法须在继承类实现，接口可多继承，还说明了接口继承类时会继承类成员但不包括实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.接口

(1) ? ----- 可选属性

(2) readonly ----- 只读属性(只能在对象刚刚创建的时候修改其值)

interface Config {
    width: number,
    height: number,
    color? : string,
    readonly name: string
}

let config: Config = {width: 20, height: 30, color: "black", name: 'mySquare'}
// config.name = 'mySquare2'; // error!
function createSquare(config: Config): {color: string; area: number} {
    let newSquare = {color: "white", area: 100};
    // 可选属性使用
    if (config.color) {
      newSquare.color = config.color;
    }
    if (config.width && config.height) {
      newSquare.area = config.width * config.height;
    }
    return newSquare;
}
  
let mySquare = createSquare(config);

2. 实现接口

(1) 接口方法 ----- 必须在继承类实现

interface ShapeConfig {
    getArea(): number
}

class Square implements ShapeConfig {
    private _width: number;
    private _height: number;
    constructor (width: number, height: number) {
        this._width = width;
        this._height = height;
    }

    
    public get width() : number {
        return this._width
    }
    
    public get height() : number {
        return this._height
    }

    getArea(): number {
        return this.width * this.height
    }
}

let square = new Square(20, 30);
let area = square.getArea();
console.log(area)   // 600

3. 继承接口

(1) 接口继承 --- 接口可多继承

interface SquareConfig extends ShapeConfig, Config{
    shape: string
}

let squareConfig = <SquareConfig> {};
squareConfig.shape = 'Square';
squareConfig.color = 'red';