TypeScript中的接口Interface详解(对象类型的强大工具)

目录

• TypeScript中的接口(Interface):对象类型的强大工具
• 引言
• 1. 接口的基本概念
• 1.1 什么是接口?
• 1.2 为什么使用接口?
• 2. 接口的基本语法
• 2.1 定义接口
• 2.2 使用接口
• 3. 接口的高级特性
• 3.1 可选属性
• 3.2 只读属性
• 3.3 函数类型
• 3.4 可索引类型
• 4. 接口的继承和实现
• 4.1 接口继承
• 4.2 类实现接口
• 5. 接口的高级用法
• 5.1 混合类型
• 5.2 接口合并
• 6. 接口vs类型别名
• 6.1 相似之处
•  6.2 不同之处
• 6.3 选择建议
• 7. 最佳实践和注意事项
• 7.1 命名规范
• 7.2 保持接口简单
• 7.3 利用接口提高代码质量
• 7.4 接口vs抽象类
• 结论

interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  console.log(`Hello, ${person.name}!`);
}
const john: Person = { name: "John", age: 30 };
greet(john); // 输出: Hello, John!

interface Car {
  brand: string;
  model: string;
  year?: number;
}
const myCar: Car = { brand: "Toyota", model: "Corolla" };

interface Point {
  readonly x: number;
  readonly y: number;
}
const point: Point = { x: 10, y: 20 };
// point.x = 5; // 错误:无法分配到 "x" ,因为它是只读属性

interface MathFunc {
  (x: number, y: number): number;
}
const add: MathFunc = (a, b) => a + b;

interface StringArray {
  [index: number]: string;
}
const myArray: StringArray = ["Apple", "Banana", "Cherry"];
console.log(myArray[1]); // 输出: Banana

interface Shape {
  color: string;
}
interface Square extends Shape {
  sideLength: number;
}
const square: Square = { color: "blue", sideLength: 10 };

interface Printable {
  print(): void;
}
class Book implements Printable {
  title: string;
  constructor(title: string) {
    this.title = title;
  }
  print() {
    console.log(`Printing: ${this.title}`);
  }
}

interface Counter {
  (start: number): string;
  interval: number;
  reset(): void;
}
function getCounter(): Counter {
  let counter = function (start: number) {} as Counter;
  counter.interval = 123;
  counter.reset = function () {};
  return counter;
}

interface Box {
  height: number;
  width: number;
}
interface Box {
  scale: number;
}
const box: Box = { height: 5, width: 6, scale: 10 };