面试题：TypeScript 类中的抽象类与接口在实际应用中的区别

Question

请阐述在 TypeScript 中抽象类和接口的概念，并举例说明它们在实际项目开发，特别是前端开发中，在使用场景和功能上的主要区别。

Answer 1

抽象类

1. 概念：
   • 抽象类是一种不能被实例化的类，它主要为其他类提供一个通用的基类，用于定义一些抽象方法和属性。抽象方法是只有声明而没有实现的方法，子类必须实现这些抽象方法。
   • 例如：

abstract class Animal {
    abstract makeSound(): void;
    move(): void {
        console.log('Moving...');
    }
}

class Dog extends Animal {
    makeSound(): void {
        console.log('Woof!');
    }
}

2. 使用场景（前端开发）：
   • 在前端开发中，当多个组件或类有一些共同的行为或属性，但这些行为或属性的具体实现可能因不同的场景而有所不同时，可以使用抽象类。比如，在一个电商项目中，可能有多种类型的商品展示组件，如电子产品展示、服装展示等，它们可能都有一些共同的属性和行为，如展示商品基本信息、获取商品数据等，但展示的具体方式可能不同。可以定义一个抽象的商品展示类，包含一些抽象方法，如displayProduct()，然后让具体的商品展示组件类继承这个抽象类并实现这些抽象方法。

接口

1. 概念：
   • 接口是一种类型定义，它用于定义对象的形状，即对象应该具有哪些属性和方法，但不包含具体的实现。接口可以被类实现，一个类可以实现多个接口。
   • 例如：

interface Shape {
    area(): number;
}

class Circle implements Shape {
    constructor(private radius: number) {}
    area(): number {
        return Math.PI * this.radius * this.radius;
    }
}

2. 使用场景（前端开发）：
   • 在前端开发中，接口常用于定义数据结构和组件的 props 类型。比如，在 React 开发中，定义一个组件接收的数据类型时可以使用接口。假设我们有一个用户信息展示组件，我们可以定义一个接口来描述这个组件接收的用户数据的形状：

interface User {
    name: string;
    age: number;
    email: string;
}

const UserComponent: React.FC<User> = ({ name, age, email }) => {
    return (
        <div>
            <p>Name: {name}</p>
            <p>Age: {age}</p>
            <p>Email: {email}</p>
        </div>
    );
};

主要区别

1. 定义和实现方式：
   • 抽象类可以包含具体的实现方法和抽象方法，子类通过继承抽象类来实现抽象方法。而接口只定义属性和方法的签名，不包含任何实现，类通过实现接口来满足接口的要求。
2. 实例化：
   • 抽象类不能直接实例化，必须通过子类继承并实现抽象方法后才能实例化。接口不能实例化，它只是一种类型定义，用于对对象进行类型检查。
3. 继承和实现关系：
   • 一个类只能继承一个抽象类，但可以实现多个接口。这使得接口在提高代码复用性和灵活性方面更具优势，特别是在复杂的前端项目中，一个组件可能需要满足多种不同的类型约束。
4. 功能侧重：
   • 抽象类更侧重于定义一组相关类的通用行为和属性，强调的是类之间的继承关系和共同特性。而接口更侧重于定义对象的外部可见的形状，用于实现不同类之间的契约，强调的是对象的行为一致性，不关心对象的内部实现细节。