面试题：TypeScript类的多态性在常见前端框架中的应用示例

在Vue中的应用场景

组件复用与不同实现：假设我们有一个电商应用，需要展示商品列表。我们可以创建一个ProductList组件，它接收不同类型的商品数据（如电子产品、服装等）。在TypeScript中，可以定义一个抽象的Product类，然后不同类型的商品类（如ElectronicsProduct、ClothingProduct）继承自Product类。

abstract class Product {
  abstract displayDetails(): void;
}

class ElectronicsProduct extends Product {
  displayDetails() {
    console.log('This is an electronics product.');
  }
}

class ClothingProduct extends Product {
  displayDetails() {
    console.log('This is a clothing product.');
  }
}

在Vue组件中，可以这样使用：

<template>
  <div>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.displayDetails() }}
      </li>
    </ul>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { ElectronicsProduct, ClothingProduct } from './Product';

@Component
export default class ProductList extends Vue {
  products: Product[] = [
    new ElectronicsProduct(),
    new ClothingProduct()
  ];
}
</script>

提升可维护性：如果需要修改某个商品类型的展示逻辑，只需要在对应的子类中修改displayDetails方法，而不需要在使用该组件的多个地方进行修改。例如，如果要更新电子产品的展示细节，只需修改ElectronicsProduct类中的displayDetails方法。 提升扩展性：当添加新的商品类型（如食品）时，只需要创建一个新的继承自Product的FoodProduct类，并实现displayDetails方法，然后将其添加到ProductList组件的products数组中即可，无需大量修改现有代码。

在React中的应用场景

基于不同数据类型的渲染：以一个社交应用为例，需要展示不同类型的动态（如文本动态、图片动态、视频动态）。定义一个抽象的Post类，不同类型的动态类继承自它。

abstract class Post {
  abstract render(): JSX.Element;
}

class TextPost extends Post {
  constructor(public content: string) {
    super();
  }
  render() {
    return <div>{this.content}</div>;
  }
}

class ImagePost extends Post {
  constructor(public imageUrl: string) {
    super();
  }
  render() {
    return <img src={this.imageUrl} alt="post" />;
  }
}

在React组件中：

import React from'react';
import { TextPost, ImagePost } from './Post';

const PostList: React.FC = () => {
  const posts: Post[] = [
    new TextPost('This is a text post'),
    new ImagePost('https://example.com/image.jpg')
  ];
  return (
    <div>
      {posts.map(post => post.render())}
    </div>
  );
};

export default PostList;

提升可维护性：如果要改变某种动态类型的渲染方式，例如修改图片动态的样式，只需要在ImagePost类的render方法中修改，不会影响其他类型动态的渲染。 提升扩展性：当添加新的动态类型（如链接动态）时，创建一个继承自Post的LinkPost类并实现render方法，然后将其添加到posts数组中，就可以在PostList组件中正常展示，无需大幅改动现有代码结构。

面试题：TypeScript类的多态性在常见前端框架中的应用示例

知识考点

面试题答案

在Vue中的应用场景

在React中的应用场景