企业官网建设流程全解析

一句话核心

在 TS 中，implements就是：强制一个「类（class）」，必须严格实现某个「接口（interface）」里规定的所有属性和方法。

• 少一个、写错类型、写错名字 →直接报错
• 作用：约束类的结构，保证代码规范、不写错

超简单示例（一看就懂）

1. 先定义接口（定规矩）

接口只规定：这个类必须有什么，不写具体实现。

// 定规矩：一个“人”必须有名字 + 会说话 interface Person { name: string; sayHi(): void; }

2. 用implements遵守规矩

类想要符合这个结构，就必须implements 接口名，并且把所有属性、方法补齐：

// Student 类 实现 Person 接口 class Student implements Person { // 必须有 name，类型必须是 string name: string; constructor(name: string) { this.name = name; } // 必须有 sayHi 方法，格式必须匹配 sayHi() { console.log(`你好，我是 ${this.name}`); } }

3. 不遵守？直接报错！

如果你漏写、写错类型，TS 立刻红波浪线提醒你：

// ❌ 报错：缺少 name 属性 + 缺少 sayHi 方法 class Student implements Person {}

implements在 TS 里的 3 个关键作用

1. 强制类的结构规范

防止你手滑写错属性名、方法名、类型，从根源减少 bug。

2. 一个类可以implements多个接口

这是 TS 非常实用的功能：一个类遵守多套规矩

interface Animal { run(): void; } interface Eater { eat(): void; } // 同时遵守两套规矩 class Dog implements Animal, Eater { run() {} eat() {} }

3. 和extends完全不一样（必区分）

• extends：继承 →拿别人现成的代码用（父子关系）
• implements：实现 →只遵守结构，不拿代码（合同关系）

// 可以同时 继承 + 实现 class Animal { legs = 4; } class Cat extends Animal implements Person { name = "小猫"; sayHi() {} }

最简单总结

• interface= 给类定结构规矩
• implements= 类承诺：我严格按这个规矩写
• 好处：代码更规范、不容易写错、IDE 自动提示更精准

你平时写 TS 类，只要想固定这个类必须有哪些属性 / 方法，就用interface + implements。

在 TypeScript（TS）中，extends主要用于泛型约束和接口 / 类的继承，以下是具体用法解析：

1. 泛型约束（Generic Constraints）

通过extends限制泛型类型必须满足的条件，确保类型安全。

• 基础用法：

  function loggingIdentity<T extends string>(arg: T): T { console.log(arg.length); // 因T被约束为string，可访问length属性 return arg; }

• 约束为接口 / 类型：

  interface HasLength { length: number; } function loggingIdentity<T extends HasLength>(arg: T): T { console.log(arg.length); // 任何满足HasLength接口的类型都可使用 return arg; }

• 多重约束（用&连接）：

  function getProps<T extends { a: number } & { b: string }>(obj: T) { return obj.a + obj.b.length; }

2. 接口继承（Interface Inheritance）

接口可通过extends继承多个接口，合并其成员。

interface Shape { color: string; } interface PenStroke { penWidth: number; } // 继承多个接口，合并color和penWidth interface Square extends Shape, PenStroke { sideLength: number; } 注意写法 下面这种 interface A extends B, V, F 或者是 interface Square extends Shape, PenStroke { sideLength: number; }

3. 类继承（Class Inheritance）

与 Java 等语言类似，子类用extends继承父类的属性和方法。

class Animal { move(distance: number = 0) { console.log(`Animal moved ${distance}m`); } } class Dog extends Animal { bark() { console.log('Woof!'); } } const dog = new Dog(); dog.move(10); // 继承自Animal的方法 dog.bark(); // 子类特有方法

4. 泛型中的条件类型（Conditional Types）

结合extends实现类型判断，语法为T extends U ? X : Y。

• 示例：获取数组元素类型

  type ElementType<T> = T extends Array<infer U> ? U : T; // 若T是数组，返回元素类型U，否则返回T本身 type Str = ElementType<string[]>; // string type Num = ElementType<number>; // number

核心区别与注意点

• 泛型约束：限制泛型必须符合某种类型或接口，确保操作合法性。
• 接口 / 类继承：复用已有类型的成员，减少代码重复。
• 条件类型：基于extends的类型逻辑判断，常用于工具类型（如Pick、Exclude）

以下是extends和implements在ts中的区别和示例：

示例1：使用extends实现类继承

class Animal { move() { console.log('Moving'); } } class Dog extends Animal { bark() { console.log('Barking'); } } const dog = new Dog(); dog.move(); // 继承自父类 Animal 的方法 dog.bark();

使用extends实现接口的扩展

interface BaseInterface { name: string; } interface ExtendedInterface extends BaseInterface { age: number; } const obj: ExtendedInterface = { name: 'John', age: 30 };

使用extends实现继承和重写方法

class Parent { showMessage() { console.log('Parent message'); } } class Child extends Parent { showMessage() { console.log('Child message'); } } const child = new Child(); child.showMessage(); // 输出 'Child message'

使用extends实现继承构造函数和属性

class Parent { constructor(public name: string) {} } class Child extends Parent { constructor(name: string, public age: number) { super(name); } } const child = new Child('Alice', 10); console.log(child.name); // Alice console.log(child.age); // 10

示例2：使用implements实现接口class classA implements interfaceA

在 TypeScript 中，implements关键字用于类实现接口。

接口定义了一组方法和属性的签名，而使用implements关键字的类必须提供与接口定义相匹配的实现。

以下是一些常见的使用场景：

1.定义公共契约
当多个类需要遵循相同的一组规则或行为时，可以创建一个接口来定义这些规则。然后，让相关的类使用implements来实现这个接口，确保它们具有一致的公共方法和属性。

interface IPrintable { print(): void; } class Document implements IPrintable { print(): void { console.log('Printing document'); } } class Image implements IPrintable { print(): void { console.log('Printing image'); } }

2.模拟多重继承
在 TypeScript 中不支持类的多重继承，但可以通过接口和implements来实现类似的效果。

interface IReadable { read(): void; } interface IWriteable { write(): void; } class File implements IReadable, IWriteable { read(): void { console.log('Reading file'); } write(): void { console.log('Writing to file'); } }

interface Comparer<T> { compare(a: T, b: T): number; } class StringComparer implements Comparer<string> { compare(a: string, b: string) { // 比较字符串的逻辑 return a.localeCompare(b); } }