typescript - Svelte (Vite) + Bootstrap 5 + SvelteStrap chyba: Typ 'string' nelze přiřadit k typu 'ButtonColor'

Používám Svelte (Vite) + Bootstrap 5 + SvelteStrap. Můj kód je následující:

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email /dist/css/bootstrap.min.css">
</head>
<script>
    import { Button } from 'sveltestrap';
    let color = "danger";
</script>

<div>
    <Button color="{color}">{color}</Button>
</div>

To funguje normálně v prohlížeči, ale VSCode hlásí:

Typ 'string' nelze přiřadit k typu 'ButtonColor'.

Právě začínám se Svelte a snažím se upravit standardní příklad na webu SvelteStrap:

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email /dist/css/bootstrap.min.css">
</head>
<script lang="ts">
  import { Button } from 'sveltestrap';
  const colors: any = [
    'primary',
    'secondary',
    'success',
    'danger',
    'warning',
    'info',
    'light',
    'dark'
  ];
</script>

{#each colors as color}
  <div>
    <Button {color}>{color}</Button>
  </div>
{/each}

Při použití standardního příkladu nejsou vyvolány žádné chyby. Co dělám špatně? Proč se to děje?

Odpověď č. 1

Jedná se o problém s typováním, chyba je generována TypeScriptem.

Očekávaný typ vlastnosti color je unijní typ různých řetězcových hodnot, ale výchozí pole řetězcových literálů bude typově určeno pouze jako string[], takže jeho položky již nebudou přiřaditelné k konkrétnějšímu typu založenému na řetězcových literálech.

Měli byste zde být schopni použít as const, abyste omezili typ pole na založený na literálech:

const colors = [
    'primary',
    'secondary',
    'success',
    'danger',
    'warning',
    'info',
    'light',
    'dark'
] as const; // <--

Toto je úplná definice typu ButtonColor:

declare type ButtonColor =
  | 'primary'
  | 'secondary'
  | 'success'
  | 'danger'
  | 'warning'
  | 'info'
  | 'light'
  | 'dark'
  | 'link';

Typ není exportován (i když by měl být), takže ho nelze použít přímo, ale můžete ho získat z třídy Button:

import type { SvelteComponentTyped } from 'svelte';
import type { Button } from 'sveltestrap';

type PropsOf<C> = C extends SvelteComponentTyped<infer Props> ? Props : never;
type ButtonProps = PropsOf<Button>;
type ButtonColor = Exclude<ButtonProps['color'], undefined>;

Demo TS hřiště

Také můžete zadat své pole pomocí tohoto:

const colors: ButtonColor[] = [
    'primary',
    'secondary',
    'success',
    'danger',
    'warning',
    'info',
    'light',
    'dark'
];