ts Carousel 走马灯高度自适应实现

以下是一个 TypeScript 实现 Carousel（走马灯）高度自适应的示例代码：

interface CarouselItem {
  height: number;
}

class Carousel {
  private container: HTMLElement;
  private items: CarouselItem[];
  private maxHeight: number;

  constructor(container: HTMLElement) {
    this.container = container;
    this.items = this.getCarouselItems();
    this.maxHeight = this.getMaxItemHeight();
    this.container.style.height = `${this.maxHeight}px`;
    window.addEventListener('resize', () => {
      this.updateCarouselHeight();
    });
  }

  private getCarouselItems(): CarouselItem[] {
    const items = this.container.querySelectorAll('.carousel-item');
    return Array.from(items).map(item => {
      return { height: item.offsetHeight };
    });
  }

  private getMaxItemHeight(): number {
    return Math.max(...this.items.map(item => item.height));
  }

  private updateCarouselHeight(): void {
    this.items = this.getCarouselItems();
    this.maxHeight = this.getMaxItemHeight();
    this.container.style.height = `${this.maxHeight}px`;
  }
}

const carouselContainer = document.querySelector('.carousel-container');
const carousel = new Carousel(carouselContainer);

在这个示例中，我们定义了一个 Carousel 类，它接收一个 Carousel 容器的引用作为构造函数的参数。在构造函数中，我们获取 Carousel 容器中所有项目的高度，并计算最高项目的高度。然后，我们将 Carousel 容器的高度设置为最高项目的高度，并添加一个窗口大小调整事件的监听器，以便在窗口大小发生变化时更新 Carousel 容器的高度。

在 Carousel 类中，我们还定义了三个私有方法：

- `getCarouselItems()`：获取 Carousel 容器中所有项目的高度，并返回一个 CarouselItem 数组。
- `getMaxItemHeight()`：计算 Carousel 容器中所有项目的最大高度，并返回该值。
- `updateCarouselHeight()`：在窗口大小发生变化时更新 Carousel 容器的高度，包括重新计算所有项目的高度和最大高度，并将 Carousel 容器的高度设置为最大高度。

请注意，我们使用了 TypeScript 中的接口来定义 CarouselItem 类型，以确保每个项目具有 `height` 属性。

通过这种方式，我们可以实现一个高度自适应的 Carousel 走马灯组件，并且它可以与任何 TypeScript 或 JavaScript 应用程序一起使用。