Svelte中抽象类实现：时间索引数据统一展示方案问询

当然可以实现这种统一逻辑，下面是具体的步骤和代码示例：

1. 定义统一的数据配置结构 #

先把数据列表和对应的展示组件绑定起来，用一个配置数组管理所有类型的数据。结合TypeScript可以做类型约束，让结构更严谨：

import Temperature from './Temperature.svelte';
import Rainfall from './Rainfall.svelte';
import type { ComponentType } from 'svelte';

// 带时间戳的通用数据类型
type WithTimestamp<T> = T & { timestamp: number };

// 数据配置项类型，关联数据列表与对应组件
type DataConfig<T> = {
  data: WithTimestamp<T>[];
  component: ComponentType<T>;
};

// 示例数据
const temperatureData = [
  {"timestamp" : 0, "temperature": 20},
  {"timestamp": 1, "temperature": 25},
  {"timestamp" : 2, "temperature": 28}
];
const rainfallData = [
  {"timestamp" : 0, "rainfall": 200},
  {"timestamp" :1, "rainfall": 210},
  {"timestamp": 2, "rainfall": 220}
];

// 统一配置所有数据与组件的映射
const dataConfigs: DataConfig<any>[] = [
  { data: temperatureData, component: Temperature },
  { data: rainfallData, component: Rainfall }
];

2. 根据时间戳筛选数据 #

在父组件里，监听timestamp的变化，自动筛选出每个数据列表中匹配该时间戳的条目：

<script lang="ts">
  // 上面的导入、类型定义、数据和配置在这里省略，直接复用即可
  
  // 用户可编辑的时间戳变量
  let timestamp = 0;

  // 响应式筛选：时间戳变化时自动更新筛选结果
  $: filteredItems = dataConfigs.map(config => ({
    Component: config.component,
    item: config.data.find(item => item.timestamp === timestamp)
  }));
</script>

3. 动态渲染对应组件 #

利用Svelte的<svelte:component>特性，动态渲染每个配置项对应的组件，并将筛选出的数据作为props传入：

<div class="data-display">
  <!-- 时间戳输入控件 -->
  <label>
    设置时间戳：
    <input type="number" bind:value={timestamp} min="0" max="2" step="1" />
  </label>

  <!-- 遍历筛选结果，渲染对应组件 -->
  {#each filteredItems as { Component, item }}
    {#if item}
      <div class="data-item">
        <Component {...item} />
      </div>
    {:else}
      <div class="no-data">当前时间戳无对应数据</div>
    {/if}
  {/each}
</div>

类型优化（可选） #

如果希望TypeScript严格检查组件props与数据结构的匹配性，可以给DataConfig的泛型指定具体类型：

// 对应你的Temperature和Rainfall接口
interface TemperatureData { temperature: number }
interface RainfallData { rainfall: number }

const dataConfigs = [
  { data: temperatureData, component: Temperature } as DataConfig<TemperatureData>,
  { data: rainfallData, component: Rainfall } as DataConfig<RainfallData>
];

这样当组件的props和数据结构不匹配时，TypeScript会直接抛出错误，避免运行时问题。

内容的提问来源于stack exchange，提问作者Corvin Paul