笔记自用，大佬轻喷
class Point {} ——一个空类
字段声明在类上创建公共可写属性：
class Point {
x: number;
y: number;
}
const pt = new Point();
pt.x = 0;
pt.y = 0;
字段声明的默认值可选，这些将在类实例化时自动运行：
class Point {
x = 0;
y = 0;
}
const pt = new Point();
console.log(`${pt.x}, ${pt.y}`);
在 TypeScript 中，类的成员变量需要在构造函数中进行初始化，这是因为 TypeScript 编译器不能预测通过在构造函数中调用方法间接初始化的字段，如果子类调用这些方法，那么成员可能不会被初始化
class BaseGreeter {
name: string;
constructor() {
this.initialize();
}
initialize() {
this.name = "Hello";
}
}
class DerivedGreeter extends BaseGreeter {
initialize() {
// name is not initialized
}
}
let greeter = new DerivedGreeter();
console.log(greeter.name); // undefined
本例中，BaseGreeter 类构造函数调用了 initialize 方法初始化 name 成员，然而 DerivedGreeter 类覆盖了 initialize 方法却没有初始化 name 成员，因此当我们创建一个 DerivedGreeter 实例并试图访问 name 成员时，我们会得到一个 undefined
TypeScript 官方推荐在构造函数时直接初始化成员，如果想采用构造函数以外的方法明确初始化一个字段，可以使用赋值断言运算符，!
class OKGreeter {
// Not initialized, but no error
name!: string;
}
字段可以采用 readonly 作为前缀，这样可以防止对构造函数之外的字段进行赋值
class Greeter {
readonly name: string = "world";
constructor(otherName?: string) {
if(otherName !== undefined) {
this.name = otherName;
}
}
err() {
this.name = "not ok";
// tsc: Cannot assign to 'name' because it is a read-only property.
}
}
const g = new Greeter();
g.name = "also not ok";
// tsc: Cannot assign to 'name' because it is a read-only property.
类构造函数和函数非常相似，你可以添加带有类型注释、默认值和重载的参数
class Point {
x: number;
y: number;
constructor(x = 0, y = 0) {
this.x = x;
this.y = y;
}
constructor(x: string, y: number);
constructor(str: string);
constructor(x: any, y?: any);
}
- 类构造函数本身不能有类型参数（即泛型），这是因为类型参数在类级别定义，并且在整个类体上使用，包括它的实例方法和属性
class GenericClass<T> {
data: T;
constructor(data: T) {
// correct way to use, instead of using constructor<T>
this.data = data;
}
}
- 类构造函数本身不能有返回类型注释，因为它们总是返回类型的实例
class MyClass {
constructor(): ReturnType { // error
// ...
}
}
如果有一个基类，在使用任何的 this 成员之前，需要在构造函数主体中调用 super()
类上的函数属性称为方法，在 TypeScript 中，对类的方法来说，除了可以使用类型注释来指定参数和返回类型之外，它们的语法和 JavaScript 中的方法基本相同
class Point {
x = 10;
y = 10;
scale(n: number): void {
this.x *= n;
this.y *= n;
}
}
在类的方法体内，你需要使用 this 来访问类的字段（即类的属性）和其他方法，这是因为在方法体内，非限定的名称（即没有 this 前缀的名称）会指向闭包作用域内的变量，而非类的字段和方法
let x: number = 0;
class myClass {
x: string = "hello";
change() {
// this is tring to modify x from line 1, not the class property
x = "world";
// tsc: Type 'string' is not assignable to type 'number'.
}
}
getter/setter
class myClass {
len = 0;
get length() {
return this.len;
}
set length(val) {
this.len = val;
}
}
TypeScript 有一些特殊的推断：
- 如果一个属性只有 getter 方法，而没有对应的 setter 方法，那么属性自动转为
readonly - 如果不指定 setter 参数的类型，则从 getter 的返回类型推断
- getter 和 setter 必须有相同的成员可见性：
private、public、protected
- 在 TypeScript 4.3 及以后的版本中,getter 的返回类型和 setter 的参数类型可以不同
索引签名是 TypeScript 中的一种特性，它允许对象或类有一些额外的属性，而这些属性的名字和数量在编写代码时可能是未知的；索引签名在本质上定义了一个“任意名字，指定类型”的属性集合，其语法为 [indexType: IndexKeyType]: valueType
class MyClass {
[s: string]: boolean | ((s: string) => boolean);
check(s: string) {
return this[s] as boolean;
}
}
- 这个索引签名的意思是：你可以给
MyClass的实例添加任何名字是字符串类型的属性，这些属性的值必须是 boolean 类型或者是一个参数类型为 string、返回类型为 boolean 的函数 check方法接受一个字符串类型的参数s，并使用这个字符串作为属性名来从当前对象中取值（即this[s]使用索引签名来动态访问类的实例属性），而在返回结果时使用类型断言来确保返回类型为 boolean
let myInstance = new Myclass();
myInstance["isTrue"] = true;
myInstance["isGreaterThanFive"] = (s: string) => s.length > 5;
console.log(myInstance.check("isTrue")); // print true
本例中，isTrue 和 isGreaterThanFive 都是在运行时动态添加到 myInstance 的属性，尽管我们在编写代码时不知道这些属性的具体名字，但通过索引签名，我们可以保证这些属性的值的类型符合我们的预期
implements 关键字用于检查一个类是否满足某个接口（interface）的所有属性和方法，如果一个类声明了它实现某接口，那么它必须拥有接口定义的所有属性和方法，否则 TypeScript 编译器会报错
interface Printable {
print(): void;
}
class Document implements Printable {
print() {
console.log('Document is being printed');
}
}
当我们尝试删除 Document 中的 print 方法时，就会触发一个编译时错误，错误信息告诉我们 Documen 类没有实现 Printable 接口的 print 方法
类也可实现多个接口
当一个类使用 implement 关键词来声明它实现了某个接口时，TypeScript 只会检查这个类是否满足接口的要求，即这个类的实例是否可以被当作接口类型来使用，但这并不会改变类的类型和方法
interface Checkable {
check(name: string): boolean;
}
class NameChecker implements Checkable {
// parameter 's' implicitly has an 'any' type
check(s) {
return s.toLowerCase() === "ok";
}
}
NameChecker 类声明它实现了 Checkable 接口，然后提供了 check 方法的实现，然而在 check 的实现中，并没有明确 s 参数的类型，TypeScript 编译器会默认 s 类型为 any；因此，尽管 check 方法的实现并不符合 Checkable 接口的要求，但 TypeScript 并不会报错，因为 any 是所有类型的超集
在面向对象编程中，派生类（子类）是通过继承基类（父类）的方法创建的新类，派生类继承了基类的所有属性和方法，这意味着基类中定义的任何 public 或 protected 成员都可以在派生类的实例中访问，同时派生类还可以定义新的属性和方法，或者重写继承自基类的方法，这提供了代码复用和行为定制的强大机制
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
move(distance: number) {
console.log(`${this.name} move ${this.distance} meters`);
}
}
class Dog extends Animal {
constructor(name: string) {
// call the constructor of the base class
super(name);
}
bark() {
console.log('Woof!');
}
move(distance = 5) {
console.log('Moving');
// call the method of the base class
super.move(distance);
}
}
派生类可以重写基类的方法，但它们必须具有相同的函数签名（即方法名、参数数量和类型、返回类型都必须与基类方法相匹配），你可以改变方法的实现，但不能改变它的形状
class Base {
greet() {
console.log("Hello, world!");
}
}
class Derived extends Base {
greet(name: string) {
// tsc: Property 'greet' in type 'Derived' is not assignable to the same property in base type 'Base'. Type '(name: string) => void' is not assignable to type '() => void'.
console.log(`Hello, ${name.toUpperCase()}`);
}
}
当你想为继承的字段重新声明更准确的类型时，TypeScript 可能会报错，declare 关键字允许我们重新声明一个已经存在的字段和方法，但并不会有实际的运行时效果；也就是说它不会生成任何 JavaScript 代码，只是用来做类型检查
interface Animal {
dateOfBirth: any;
}
interface Dog extends Animal {
breed: any;
}
class AnimalHouse {
resident: Animal;
constructor(animal: Animal) {
this.resident = animal;
}
}
class DogHouse {
declare resident: Dog;
constructor(dog: Dog) {
this.resident = dog;
}
}
在这个例子中，虽然从基类 AnimalHouse 继承过来的 resident 的类型是 Animal，但在 DogHouse 这个类中，我们希望它的类型被视为 Dog （通过 declare 关键字告诉 TypeScript），因为 Dog 接口是 Animal 接口的子类型，所以这是允许的
JavaScript（TypeScript 同理）定义的类初始化顺序是：基类字段初始化、基类构造函数运行、派生类字段初始化、派生类构造函数运行
class Base {
name = "base";
constructor() {
console.log("My name is " + this.name);
}
}
class Derived extends Base {
name = "derived";
}
const print = new Derived(); // print "base", not "derived"
如果希望在 Derived 类中的 name 字段被打印出来，你需要在 Derived 类的构造函数中显式地调用 super()，并在此后打印 this.name
class Base {
name = "base";
constructor() {
console.log("My name is " + this.name);
}
}
class Derived extends Base {
name = "derived";
constructor() {
super();
console.log("My name is " + this.name);
}
}
const print = new Derived(); // print "base", then "derived"
继承内置类型问题：在 ES6 及之后的版本中，super(...) 关键字在构造函数中被用来调用父类的构造函数。在这些版本中，如果父类的构造函数返回一个对象，那么该对象会隐式地替换 this ，也就是说，子类的实例会变成父类构造函数的那个对象，然而在 ES5 及更早的版本中，该行为是不支持的。因此，当 TypeScript 编译到 ES5 时，生成的代码必须显性地捕获 super(...） 的返回值，并用它来替换 this
然而这引发了一个新的问题，在 ES6 中，一些内置的类，如 Error、Array、Map 等，它们的构造函数使用了 new target 语法来调整实例的原型链；而 new target 在 ES5 中是不存在的，因此如果 TypeScript 编译到 ES5 时，这种语法无法被正确地模拟
class MsgError extends Error {
constructor(str: string) {
super(str);
}
sayHello() {
return "hello" + this.message;
}
}
- 在 ES6 及之后的版本中，上述语法完全是支持的；然而在 ES5 及更早的版本中，
Error实例并不会返回一个真正的Error对象，而是返回一个新的普通对象，并且这个对象也没有MsgError类的sayHello方法，因此，当你尝试在MsgError实例上调用sayHello方法时，你际上是在一个没有sayHello方法的普通对象上调用，从而导致运行时错误。 - 使用
instanceof检查一个MsgError实例是否是MsgError类的实例时，它将返回false - 为避免此类问题，在使用 TypeScript 并且目标编译版本是 ES5 时，最好避免继承内置类型
为解决此类问题，可以在任何 super(...) 调用之后立即手动调整原型
class MsgError extends Error {
constructor(str: string) {
super(str);
// set the prototype explicitly
Object.setPrototypeOf(this, MsgError.prototype);
}
sayHello() {
return "hello " + this.message;
}
}
- 类成员的默认可见性为
public，public成员可以在任何地方访问 protected成员仅对声明它们的类的子类可见private类似于protected，但不允许从子类访问成员
派生类需要遵循其基类契约，但可以选择公开具有更多功能的基类子类型。 包括让 protected 成员成为 public ；由于 private 成员对派生类不可见，因此派生类不能增加它们的可见性
class Base {
protected m = 10;
}
class Derived extends Base {
// no modifier, so default is 'public'
m = 15;
}
// in this way, 'Derived' can freely read and write 'm'
const d = new Derived();
console.log(d.m);
跨层级 protected 访问
class Base {
protected x: number = 1;
}
class Derived1 extends Base {
protected x: number = 2;
}
class Derived2 extends Base {
f1(other: Derived2) {
other.x = 666;
}
f2(other: Base) {
other.x = 555;
// tsc: Property 'x' is protected and only accessible through an instance of class 'Derived2'. This is an instance of class 'Base'.
}
}
跨实例 private 访问
class myClass {
private x =2333;
public sameAs(other: myClass) {
// no error
return myClass.x === this.x;
}
}
private 和 protected 访问修饰符仅在编译时执行，而非运行时。这意味着在 TypeScript 代码中，上述规则是成立的，然而 TypeScript 代码一旦被编译为 JavaScript，这些访问修饰符就不再起作用（可别忘了，JavaScript 本身并不支持这些修饰符）。因此在 JavaScript 代码中，你可以通过常规的属性访问语法来访问一个对象的任何属性，无论在 TypeScript 中是否被标记为 private 或 protected。因此，尽管 TypeScript 在静态类型检查阶段提供了很多安全保障，可一旦代码被编译为 JavaScript 并运行，那些就完全不起作用了
在 TypeScript 中，通常不能直接访问一个类的私有成员。然而，使用方括号表示法可以绕过这个限制。在某些情况下这非常有用，例如在单元测试中，你可能需要访问和修改私有成员来测试类的内部行为。然而它也使得 private 修饰符并不能真正保护类的 private 成员不被外部访问（这不是形同虚设 ?）
class myClass {
private x =2333;
}
const s = myClass();
console.log(s.x); // error
console.log(s["x"]); // no error
与 TypeScript 的 private 关键字不同，JavaScript 中使用井号（#）定义的私有字段在编译后仍然是私有的，无法像 TypeScript 中使用方括号表示法那样去访问它们。这种特性使得它们在运行时仍然保持私有性，即它们在运行时是真正的私有字段。
在面向对象的编程中，类是创建对象（实例）的模板，这些对象通常包括两种成员：实例成员和静态成员
- 实例成员是在类的实例上定义的成员，每个实例都有自己的实例成员副本，这些实例成员可以有自己的状态和行为，而这些状态和行为对于每一个实例来说都是独立的
- 静态成员是在类本身上定义的成员，类的所有实例都共享相同的静态成员，换句话说，无论你创造多少个类的实例，静态成员只有一份
class myClass{
static staticVal = "static";
instanceVal = "instance";
static staticMethod() {
console.log("this is a static method");
}
instanceMethod() {
console.log("this is an instance method.");
}
}
let instance1 = new myClass();
let instance2 = new myClass();
console.log(myClass.staticVal); // print"static"
myClass.staticMethod(); // print "this is a static method."
console.log(instance1.instanceVal); // print"instance"
instance1.instanceMethod(); // print "this is an instance method."
instance1.instanceValue = "changed";
console.log(instance1.instanceValue); // print "changed"
console.log(instance2.instanceValue); // print "instance"
- 静态成员主要用于保存与类相关的状态和行为，而非与特定实例相关的状态和行为，例如，跟踪已创建的实例数量（使用静态属性），或者一些操作只需要类级别的数据（使用静态方法）
- 静态成员也可以使用
public、protected和private修饰符，也可以被继承 - 类本身就是一个特殊的函数，它自带一些属性和方法，例如
name，length，call等 ，因此我们无法使用像name，length，call这样的静态名称，如果强行使用就会导致命名冲突 - JavaScript 和 TypeScript 不存在静态类
- 静态块是一个包含语句序列的代码块，这些语句在类创建时（即在任何实例创建之前）就会执行
- 静态块可以访问类中的私有静态字段
- 静态块中的代码有自己的作用域，这意味着在静态块中声明的变量不会泄漏到其外部
不能在静态成员的类型声明中使用泛型参数
class Box<Type> {
static defaultValue: Type;
// tsc: Static members cannot reference class type parameters.
}
这个限制存在的原因是 TypeScript 的类型系统在运行时被完全擦除，也就是说，TypeScript 的类型，包括泛型类型，在编译后的 JavaScript 代码中是不存在的。这意味着在运行时，所有的 Box 类的实例共享同一个 defaultValue 属性
假设 TypeScript 允许静态成员引用类的类型参数，并且你编写了以下代码：
Box<string>.defaultValue = "default string";
Box<number>.defaultValue = 0;
在运行时，由于 TypeScript 的类型系统被完全擦除，你实际上是在为同一个 defaultValue 属性赋值两次，最后一次赋值将覆盖前一次的赋值，Box<number>.defaultValue 和 Box<string>.defaultValue 的值将会是同一个
因此，TypeScript 不允许静态成员引用类的类型参数，以避免这种可能的混淆和错误
如果你有一个经常丢失其 this 上下文的函数，使用箭头函数可以避免这类问题：普通函数 this 关键字是在运行时决定的，取决于函数如何被调用；而箭头函数的 this 关键字在定义时就被绑定，其上下文取决于它被定义的位置
class myClass {
name = "clown";
getName = () => this.name;
}
const newClass = new myClass();
const getClown = newClass.getName;
console.log(getClown()); // no error, print "clown"
getName 是一个箭头函数，这意味着它的 this 关键字在定义时就被绑定为其所属的 MyClass 实例。无论如何调用 getName 函数，它的 this 关键字总是指向 MyClass 实例
TypeScript 提供了另一种解决 this 丢失的方法：在函数参数列表中显式声明 this 参数并指定其类型。这样，TypeScript 就会在编译时检查函数是否在正确的上下文中调用
class myClass {
name = "clown";
getName(this: myClass) {
return this.name;
}
}
const newClass = new myClass();
newClass.name(); // no error, print "clown"
const getClown = newClass.getName;
console.log(getClown());
// tsc: The 'this' context of type 'void' is not assignable to method's 'this' of type 'myClass'.
this 类型
class Box {
contents: string = "";
set(value: string) {
// tsc: (method) Box.set(value: string): this
this.contents = value;
return this;
}
}
在这段代码中，set 方法返回的是 this，也就是方法调用者本身。在这里，this 指代的是方法调用者的实例，即 Box 类的实例
那为什么 TypeScript 说 set 方法的返回类型是 this，而不是 Box 呢？
这是因为 TypeScript 使用了一种叫做 “polymorphic this types” 的特性。这种特性允许一个方法返回的类型与它所在类的类型保持一致，即使这个类被继承了。这意味着，如果有另一个类继承了 Box，例如 SpecialBox，并且调用了 set 方法，那么这个方法将会返回 SpecialBox 类型的实例，而不是 Box 类型的实例。这个特性在链式调用（比如像 jQuery 那样的方法链）中特别有用，因为它能保证方法链中的每个方法返回的都是正确的类型，即使这个方法在父类中定义
class SpecialBox extends Box {
specialMethod() {
console.log('Special method called');
return this;
}
}
let mySpecialBox = new SpecialBox();
mySpecialBox.set('value').specialMethod();
在这个例子中，set 方法返回 this，这个 this 实际上是 SpecialBox 类型的，因为 set 方法是在 SpecialBox 类型的实例上调用的,所以我们可以在 set 方法调用后直接链式调用 SpecialBox 类型的 specialMethod 方法。如果 set 方法返回的是 Box，那么我们就不能直接调用 specialMethod 方法，因为 TypeScript 会认为 set 方法返回的是 Box 类型的实例，而 Box 类型中并没有 specialMethod 方法
this is Type 是一种特殊的类型守卫，被称为”谓词类型守卫”（Predicate Type Guard），它通常用在方法的返回值类型声明中，它的含义是：如果这个方法返回 true，那么该方法所在的对象就是 Type 类型，如此一来，TypeScript 就可以在编译阶段知道在这个方法返回 true 的代码块中，this 的确切类型是什么
class Vehicle {
wheels: number;
isCar(): this is Car {
return this instanceof Car;
}
}
class Car extends Vehicle {
doors: number;
}
let myVehicle: Vehicle = new Car();
if (myVehicle.isCar()) {
console.log(myVehicle.doors);
}
- 在这个例子中，
Vehicle类有一个名为isCar的方法，返回类型为this is Car，表示如果该方法返回true，那么在接下来的代码中，TypeScript 将会认为this是Car类型 Vehicle是基类，Car是它的子类。当你创建一个新的Car实例并将其赋值给myVehicle变量时，myVehicle在运行时其实 j 就是一个Car对象，但在编译时 TypeScript 只能识别出它是Vehicle类型（因为它被声明为Vehicle类型）- 在这里，
isCar方法是定义在Vehicle类中的，它可以在任何Vehicle类型（包括其子类）的对象上调用。当你在myVehicle上调用isCar方法时，this在运行时实际上指的是myVehicle对象，也就是一个Car实例。因此this instanceof Car返回true；当然，如果你在一个Vehicle的实例（不是Car的实例）上调用isCar方法，那么this instanceof Car就会返回false，因为此时的this不是一个Car的实例 - 在
if语句中调用了isCar方法，TypeScript 认为myVehicle是Car类型，因此可以安全地访问其doors属性
抽象类不能被直接实例化，也就是说，你不能直接使用 new 关键字来创建一个抽象类的实例。抽象方法和抽象字段在抽象类中只有声明，没有具体实现，这些抽象成员的实现必须由抽象类的子类提供
abstract class Base {
abstract getName(): string;
printName() {
console.log("Hello, " + this.getName());
}
}
class Derived extends Base {
getName(): string {
return "Derived";
}
}
const d = new Derived();
d.printName(); // print "Hello, Derived"
抽象构造签名是一种特殊的接口，用于限制类型是某个类的子类。也就是说，这个接口只能用于具有与抽象构造签名兼容的构造函数的类,在 TypeScript 中，抽象构造签名的定义通常如下所示：
interface AbstractConstructor {
new (...args: any[]): AbstractClass;
}
其中 AbstractClass 是你想要限制的类。这个接口可以被用作一个类型，表示任何具有与该接口兼容的构造函数的类
假设你有一个 Vehicle 的抽象类，并且你想写一个函数，它接受一个 Vehicle 子类的构造函数作为参数，然后创建并返回这个类的实例
abstract class Vehicle {
abstract drive(): void;
}
class Car extends Vehicle {
drive() {
console.log("Driving a car");
}
}
interface VehicleConstructor {
new (): Vehicle;
}
function createVehicle(VehicleClass: VehicleConstructor): Vehicle {
return new VehicleClass();
}
const myCar = createVehicle(Car);
myCar.drive(); // print "Driving a car"
在上述代码中，VehicleConstructor 就是一个抽象构造签名，createVehicle 函数接受一个 VehicleConstructor 类型的参数，表示这个参数必须是一个Vehicle 的子类的构造函数，然后它使用 new 关键字和这个构造函数来创建一个新的 Vehicle 实例，确保 createVehicle 函数总是返回一个 Vehicle 或其子类的实例
笔记自用，大佬轻喷
