A Svelte TypeScript component must have a minimum of one prop passed to it

Question

A Svelte TypeScript component must have a minimum of one prop passed to it

I am interested in developing a unique svelte component that necessitates at least one prop to be provided.

Consider a component with two exposed props, a and b:

export let a: number | undefined;
export let b: number | undefined;

It should be permissible to pass either just a or just b:

<Component a={1} />
<Component b={1} />

However, passing neither should not be allowed:

<Component />

The overall type would resemble something along these lines:

type Component = {
    a: number
} | {
    b: number
}

Unfortunately, I am unsure of how to communicate this type information to Svelte.

typescript svelte

Answer 1

Answer №1

It appears that you are referring to this

interface ConfigurationA {
  x: number;
  y?: never;
}

interface ConfigurationB {
  x?: never;
  y: number;
}

type Configuration = ConfigurationA | ConfigurationB;

const config1: Configuration = {
  x: 10,
};

const config2: Configuration = {
  y: 20,
};

Answer 2

It appears that you are referring to this

interface ConfigurationA {
  x: number;
  y?: never;
}

interface ConfigurationB {
  x?: never;
  y: number;
}

type Configuration = ConfigurationA | ConfigurationB;

const config1: Configuration = {
  x: 10,
};

const config2: Configuration = {
  y: 20,
};

Answer 3

Answer №2

One approach is to define property types using $$Props, but this method attempts to match the types with those specified on the exports, which may result in errors depending on the TypeScript configuration.

For example:

<script lang="ts">
    type $$Props =
        { a: number, b?: never } |
        { b: number, a?: never }

    export let a: number | undefined
    export let b: number | undefined
</script>

This could potentially work for your specific situation.

Check out the RFC for this feature (feel free to provide feedback here)

Answer 4

One approach is to define property types using $$Props, but this method attempts to match the types with those specified on the exports, which may result in errors depending on the TypeScript configuration.

For example:

<script lang="ts">
    type $$Props =
        { a: number, b?: never } |
        { b: number, a?: never }

    export let a: number | undefined
    export let b: number | undefined
</script>

This could potentially work for your specific situation.

Check out the RFC for this feature (feel free to provide feedback here)

A Svelte TypeScript component must have a minimum of one prop passed to it

Answer №1

Answer №2

Similar questions

Unable to find the 'Restore Packages' option when right-clicking on package.json in Visual Studio 2015 update3

Retrieving the component's values when utilizing the `<ng-content>` directive

Ways to indicate in Typescript that a value, if it exists, is not undefined

Emphasize a Row Based on a Certain Criteria

Tips for customizing the appearance of the initial React component frame

The 'fullDocument' property is not present in the 'ChangeStreamDropDocument' type

Angular back-end data filtering tutorial

Tips for leveraging constant values in TypeScript 'Type Aliases' for improved code organization

Storing my token in the cookie using setCookie is proving to be difficult for me

The process of declaring a nullable callback variable in TypeScript

Overhauling JSON Data Output in Angular Version 2 and beyond

Exploring the wonders of Angular 2: Leveraging NgbModal for transclusion within

Managing state within SolidJS components using Immer's "produce" for nested state handling

Issue encountered when attempting to access disk JSON data: 404 error code detected

IntelliSense or Closure Compiler cannot locate the TypeScript class

Creating a new instance of a class using a JSON object in Angular and TypeScript

Error message: In Angular 2, when utilizing ng2-interceptor, the type 'ServerURLInterceptor' does not have a property called 'post'

What sets apart the utilization of add versus finalize in rxjs?

What triggers the execution of the catch method while chaining HTTP promises?

Issue: In an Ionic-Angular application, argon2-browser modules are not being found