Как передать переменную типа универсальному компоненту Svelte?

Question

Я хочу передать переменную типа компоненту Svelte, чтобы его<script>может использовать общий тип для извлечения некоторых данных и передачи их в<slot>. Я создаю компонент, который извлекает данные из базы данных PocketBase. Для компонентаMyComponent, как я могу передать переменную типа? В типичном TypeScript я ожидаю что-то вродеMyComponent<T>.

Единственный подход, который я придумал до сих пор, - это использовать значение типаTтак что другие реквизиты компонента печатаются правильно. Вот пример:

      <script lang="ts">
  import type { Record };

  type T = $$Generic<Record>;

  // Use a seed value to figure out T
  export let seed: T;

  // Take a record ID as input
  export let id: string;

  // Use that ID to fetch some data
  const data: T = fetchData<T>(id);
  
  // Share that data with the default slot
  interface $$Slots {
    default: { record: T };
  }
</script>

<slot record={data} />

      <script lang="ts">
  import type { Record };

  interface SomeRecord extends Record{};

  const seed = {} as SomeRecord;
</script>

<MyComponent seed={seed} id="123abc" let:record>
  {record.id}
</MyComponent>

Есть ли способ сделать это безseedопора?

Answer 1

Если бы тип записи был реальным объектом, вы могли бы передать его напрямую и, возможно, вывести тип таким образом, но для интерфейсов, насколько мне известно, в настоящее время нет другого способа передачи этой информации.

Я создал аналогичный компонент раньше, но заставил его принять обещание в качестве свойства, которое уже будет кодировать тип результата, поэтому вы получите что-то вроде:

      <Loader promise={fetchUser(id)} let:value>
  ...
</Loader>

      // in loader
export let promise: Promise<T>;

Поскольку ваша функция загрузки является универсальной, в настоящее время ее нельзя использовать в шаблоне напрямую, поскольку она не поддерживает синтаксис TS (проблема). Вы можете извлечь это в<script>если это работает для вас.