TypeScript中怎么用接口（interface）描述类（静态部分与实例部分）

时间：2025-02-07 12:14:11

TypeScript是JavaScript的超集

在看TypeScript官方文档的接口一节的时候对于类的静态部分与实例部分产生了疑问，通过努力得到自认为相对合理的解释，写下此文以记所得，如有谬误感谢指正。

文中大部分代码示例来自TypeScript官网

TS中的接口

我的理解中TS中的接口就是描述一个对象中应该有那些属性，这些属性对应值得类型，有哪些方法，这些方法的参数和返回值等信息。

interface LabelledValue {
  label: string;
}

let myObj: LabelledValue = {label: "Size 10 Object"}; // OK

let myObj1: LabelledValue = {labe: "Size 10 Object"}; // 报错，因为没有label属性

上面的报错并不只是因为没有label属性，即使

加上一个label属性变成{label: “Size 20 Object”, label: “aaa”}也还是会报错。因为TS会检查额外属性，这个对象中有额外属性label。

接口也可以描述函数

interface SearchFunc {
  (source: string, subString: string): boolean;
  n: number;
}

当前接口描述了一个函数，这个函数需要传入两个string类型的参数并且返回boolean类型的值，并且这个函数自身应该有一个属性名为n值为number的属性。

如果一个函数需要实现这个接口会报错，可能因为TS认为函数并不应该有自己的属性，类可以有自身的属性（静态属性）。虽然对于JS来说类和函数是一个东西，但这个是TS。

注意：圆括号前面不能有标识符，否则变成了描述一个对象具有某个属性而不是一个函数本身。

类的静态部分和实例部分指的到底是啥

JS中并不存在类构造函数这样的东西，有一句话叫做没有构造函数，只有构造调用，所以一个类对于JS来说就是一个函数。

TS中类的静态部分指的是这个类（函数）本身

实例部分指的是类实例化出来的对象

官网的例子（有些许修改）

interface ClockConstructor {
    new (hour: number, minute: number): ClockInterface; // 这个前面有一个new，不是一个普通的函数
  	a?: number;  // 函数本身应该具有的属性   例如：function A(){}  = 1
}
interface ClockInterface {
    tick();
}

// 看第一个参数ctor的类型是接口 ClockConstructor，在这里就为类的静态部分指定需要实现的接口
function createClock(ctor: ClockConstructor, hour: number, minute: number): ClockInterface {
    return new ctor(hour, minute);
}

// 看这里 implements ColocInterface 这个意思--->不是DiaitalClock本身（类的静态部分）应该符合接口规则<---
// 而是 --->类 DigitalClock 实例化出来的对象（类的实例部分）应该满足这个接口的规则<---
// 那么怎么要求这个类（函数）符合某个接口的规则？
class DigitalClock implements ClockInterface {
    constructor(h: number, m: number) { }
  	static a: number = 1;   // static属性会加在类的自身而不是类的实例
    tick() {
        ("beep beep");
    }
}
class AnalogClock implements ClockInterface {
    constructor(h: number, m: number) { }
    tick() {
        ("tick tock");
    }
}

let digital = createClock(DigitalClock, 12, 17);
let analog = createClock(AnalogClock, 7, 32);

参考

TypeScript官网

相关文章