购物网站设计意义,营销型网站建设应该注意什么,小程序定制开发流程,公司网站建设需要显示什么TypeScript是JavaScript的超集
在看TypeScript官方文档的接口一节的时候对于类的静态部分与实例部分产生了疑问#xff0c;通过努力得到自认为相对合理的解释#xff0c;写下此文以记所得#xff0c;如有谬误感谢指正。
文中大部分代码示例来自TypeScript官网
TS中的接口…TypeScript是JavaScript的超集
在看TypeScript官方文档的接口一节的时候对于类的静态部分与实例部分产生了疑问通过努力得到自认为相对合理的解释写下此文以记所得如有谬误感谢指正。
文中大部分代码示例来自TypeScript官网
TS中的接口
我的理解中TS中的接口就是描述一个对象中应该有那些属性这些属性对应值得类型有哪些方法这些方法的参数和返回值等信息。
interface LabelledValue {label: string;
}let myObj: LabelledValue {label: Size 10 Object}; // OKlet 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(){} A.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() {console.log(beep beep);}
}
class AnalogClock implements ClockInterface {constructor(h: number, m: number) { }tick() {console.log(tick tock);}
}let digital createClock(DigitalClock, 12, 17);
let analog createClock(AnalogClock, 7, 32);参考
TypeScript官网
