【TypeScript】接口类型 Interfaces 的使用理解

// 定义一个简单的接口
interface Point {
  x: number;
  y: number;
}
 
// 使用接口
let point: Point = { x: 1, y: 2 };
 
// 接口可以是继承的
interface ColoredPoint extends Point {
  color: string;
}
 
// 使用继承的接口
let coloredPoint: ColoredPoint = { x: 1, y: 2, color: "red" };
 
// 接口可以声明只读属性
interface ReadonlyPoint {
  readonly x: number;
  readonly y: number;
}
 
// 使用只读接口
let readonlyPoint: ReadonlyPoint = { x: 1, y: 2 };
// 尝试修改readonlyPoint的属性会导致错误
// readonlyPoint.x = 5; // Error: Cannot assign to 'x' because it is a read-only property.
 
// 接口可以声明可选属性
interface OptionalPoint {
  x?: number;
  y?: number;
}
 
// 使用可选接口
let optionalPoint: OptionalPoint = { x: 1 };
 
// 接口可以声明函数类型
interface PointFactory {
  (x: number, y: number): Point;
}
 
// 使用接口声明函数
let pointFactory: PointFactory = function(x: number, y: number): Point {
  return { x: x, y: y };
};
 
// 接口可以声明类类型
interface PointConstructor {
  new (x: number, y: number): Point;
}
 
// 使用接口声明类
class PointClass implements Point {
  constructor(public x: number, public y: number) { }
}
 
// 接口可以声明类中的方法
interface PointMutations {
  move(dx: number, dy: number): void;
}
 
// 使用接口声明类中的方法
class MutablePoint implements Point, PointMutations {
  x: number;
  y: number;
 
  constructor(x: number, y: number) {
    this.x = x;
    this.y = y;
  }
 
  move(dx: number, dy: number): void {
    this.x += dx;
    this.y += dy;
  }
}
 
// 使用接口可以进行mixin编程模式
interface ClonablePoint {
  clone(): Point;
}
 
class PointCloner implements ClonablePoint {
  clone(): Point {
    return { x: this.x, y: this.y };
  }
}
 
// 接口可以是合成类型
interface Shape {
  color: string;
}
 
interface PointShape extends Point, Shape {
  // 新属性，Point和Shape的属性都有
}
 
// 使用合成类型
let pointShape: PointShape = { x: 1, y: 2, color: "red" };

这个例子展示了TypeScript中接口的不同使用方式，包括声明一个接口、接口的继承、只读属性、可选属性、函数类型声明、类类型声明以及类中方法的声明。同时，它也演示了如何使用接口进行mixin编程模式，以及如何创建合成类型。这些概念对于学习TypeScript和理解面向对象编程非常有帮助。