I encountered an issue with Svelte (Vite) + Bootstrap 5 + SvelteStrap where it gave me the error message stating: "Cannot assign type 'string' to type 'ButtonColor'"

Question

I encountered an issue with Svelte (Vite) + Bootstrap 5 + SvelteStrap where it gave me the error message stating: "Cannot assign type 'string' to type 'ButtonColor'"

I am currently working with Svelte (Vite) + Bootstrap 5 + SvelteStrap. The code I have written is as follows:

<head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9bf9f4f4efe8efe9faebdbaeb5aab5ab">[email protected]</a>/dist/css/bootstrap.min.css">
</head>
<script>
    import { Button } from 'sveltestrap';
    let color = "danger";
</script>

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

While this code works fine in the browser, I am encountering an error in VSCode:

Type 'string' is not assignable to type 'ButtonColor'.

I am new to Svelte and I am attempting to modify the default example on the SvelteStrap website:

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="25474a4a51565157445565100b140b">[email protected]</a>/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}

When I use the default example, I do not encounter any errors. What could be the reason for this discrepancy? What am I missing?

typescript svelte bootstrap-5

Answer 1

Answer №1

This error arises from a typing issue in TypeScript.

The color property should have a union type of different string values, but when typed as an array of string literals by default, it becomes just string[], making its items no longer assignable to a specific string-literal-based type.

To solve this, you can use as const to enforce the array type to be literal-based:

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

Refer to the complete ButtonColor type definition here:

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

Although the type is not exported, you can extract it from the Button class like this:

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>;

For typing your array, you can also use this method:

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

Answer 2

This error arises from a typing issue in TypeScript.

The color property should have a union type of different string values, but when typed as an array of string literals by default, it becomes just string[], making its items no longer assignable to a specific string-literal-based type.

To solve this, you can use as const to enforce the array type to be literal-based:

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

Refer to the complete ButtonColor type definition here:

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

Although the type is not exported, you can extract it from the Button class like this:

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>;

For typing your array, you can also use this method:

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

I encountered an issue with Svelte (Vite) + Bootstrap 5 + SvelteStrap where it gave me the error message stating: "Cannot assign type 'string' to type 'ButtonColor'"

Answer №1

Similar questions

Unable to apply a dotted border to a horizontal rule when a Bootstrap 5 link is present

How can I retrieve the date from the following week with Ionic?

JS/Docker - The attribute 'user' is not recognized in the context of 'Session & Partial<SessionData>'

Typescript: Select just one option from the union

Increasing the token size in the Metaplex Auction House CLI for selling items

What causes the vertical movement of my Bootstrap v5 card when resizing the window?

Comparing the functions of useMemo and the combination of useEffect with useState

Ignore a directory during TypeScript compilation

The parameter in Angular cannot be assigned a type of 'null'

Prevent sidebar from adjusting size according to text length

Strategies for preventing multi-level inheritance of TypeScript class properties and methods

The Angular 5 lifecycle hook ngOnChanges is triggered just once in a child component

Navigating the parent scope in Angular using TypeScript

Encountering: Unable to break down the property 'DynamicServerError' of 'serverHooks' as it does not have a defined value

Encountering an issue with creating an App Runner on AWS CDK

Tips for calculating the total of keyup elements in an Angular application

Typescript encounters a failure in typing when an object is destructured

Managing conflicting versions of React in a component library created with Webpack and Storybook

Adding a QR code on top of an image in a PDF using TypeScript

Tips for creating a Single Xpath instead of Multiple paths