Utilizing Svelte Components within Object Properties

Question

Utilizing Svelte Components within Object Properties

I am trying to pass a component as a prop.

import AComponent from './AComponent.svelte';

type MyType = {
  [key: string]: any; // just an example
}

type AcceptComponentProp<T> = {
  component: SvelteComponentTyped<{ record: T }>;
}

const componentPropObject: AcceptComponentProp<MyType> = {
  component: AComponent // getting an error here
}

Error: Type 'typeof AComponent__SvelteComponent_' is missing the following properties from type 
'SvelteComponentTyped<{ record: MyType; }>': $set, $on, $destroy, $$prop_def, and 5 
more.ts(2740)

I thought changing the typedef might help:

type AcceptComponentProp<T> = {
  component: typeof SvelteComponentTyped<{ record: T }>;
}

But that led to even more strange errors.

It's crucial for this typing to be clear and explicit since it will be part of the interface exposed to users.

typescript svelte typescript-generics

Answer 1

Answer №1

To properly type IWantToAcceptAComponent, you cannot directly use SvelteComponentTyped as it refers to the instance type, not the constructor type. Attempting to do

typeof SvelteComponentType<..some generic>

will result in a TypeScript syntax error. Instead, utilize Svelte's provided ComponentType interface to define a class constructor that returns a specific instance like this:

import type { ComponentType, SvelteComponentTyped } from 'svelte';

type IWantToAcceptAComponent<T> = {
  component: ComponentType<SvelteComponentTyped<{ record: T }>>;
  // For older Svelte versions lacking ComponentType:
  componentAlternative: new (...args: any) => SvelteComponentTyped<{ record: T }>;
}

Ensure you have Svelte for VS Code version 105 or higher and (if applicable) svelte-check 2.0.0 or newer installed for these typings to function correctly. Previous version mismatches may cause issues.

If utilizing this code in a TypeScript file, activate the TypeScript plugin within the Svelte for VS Code extension to avoid generic typing of all Svelte imports as SvelteComponentDev.

Answer 2

To properly type IWantToAcceptAComponent, you cannot directly use SvelteComponentTyped as it refers to the instance type, not the constructor type. Attempting to do

typeof SvelteComponentType<..some generic>

will result in a TypeScript syntax error. Instead, utilize Svelte's provided ComponentType interface to define a class constructor that returns a specific instance like this:

import type { ComponentType, SvelteComponentTyped } from 'svelte';

type IWantToAcceptAComponent<T> = {
  component: ComponentType<SvelteComponentTyped<{ record: T }>>;
  // For older Svelte versions lacking ComponentType:
  componentAlternative: new (...args: any) => SvelteComponentTyped<{ record: T }>;
}

Ensure you have Svelte for VS Code version 105 or higher and (if applicable) svelte-check 2.0.0 or newer installed for these typings to function correctly. Previous version mismatches may cause issues.

If utilizing this code in a TypeScript file, activate the TypeScript plugin within the Svelte for VS Code extension to avoid generic typing of all Svelte imports as SvelteComponentDev.

Answer 3

Answer №2

Although I am not experienced in using typescript, I don't see any reasons why achieving this functionality would be possible with vanilla JavaScript but not with TS. I have created a REPL that essentially wraps two 'sub components' passed as props.

The structure looks like this:

App.svelte

<script>
  //App.svelte
  import A from "./A.svelte";
  import B from "./B.svelte";
  import Wrapper from "./Wrapper.svelte";

  let props = [  { component: A }, { component: B } ];
</script>

<Wrapper {props} />

Wrapper.svelte :

<script>
    //Wrapper.svelte
    export let props = [];
</script>

{#each props as prop}
    <p>
        <svelte:component this={prop.component} />
    </p>
{/each}

A.svelte :

   <!-- A.svelte -->
   <h2>COMP A</h2>

B.svelte :

    <!-- B.svelte -->    
    <h3>COMP B</h3>

Answer 4

Although I am not experienced in using typescript, I don't see any reasons why achieving this functionality would be possible with vanilla JavaScript but not with TS. I have created a REPL that essentially wraps two 'sub components' passed as props.

The structure looks like this:

App.svelte

<script>
  //App.svelte
  import A from "./A.svelte";
  import B from "./B.svelte";
  import Wrapper from "./Wrapper.svelte";

  let props = [  { component: A }, { component: B } ];
</script>

<Wrapper {props} />

Wrapper.svelte :

<script>
    //Wrapper.svelte
    export let props = [];
</script>

{#each props as prop}
    <p>
        <svelte:component this={prop.component} />
    </p>
{/each}

A.svelte :

   <!-- A.svelte -->
   <h2>COMP A</h2>

B.svelte :

    <!-- B.svelte -->    
    <h3>COMP B</h3>

Utilizing Svelte Components within Object Properties

Answer №1

Answer №2

Similar questions

Socket.io: The other client will only update when there is interaction happening

Uncovering the Mutable Object Type within an Immutable Object

The absence of the @Injectable annotation is causing an issue when importing a JSON

Angular's OnChanges event is triggering for an Input variable, however the variable remains unchanged

Modifying a property in a nested layout through a page in Next.js 13

Error 2300 in Vetur: Identical identifier found for '(Missing)'

How come this mocha test is exceeding its timeout limit when making a basic call with mongoose?

Ensure the type of a variable matches another variable

Issue with updating values in a ReactJS function

Saving data from a one-to-one relationship using TypeORM and NestJS in a socalled way is a breeze - here's how you

Leveraging environment variables in template documents

The parameter type '{ email: string; }' in NGXS does not accept arguments of type 'string'

Tips for displaying text on the bubbles of a vector map using the DevExpress library in an Angular and TypeScript environment to showcase counts or other relevant information

Angular 6: The Promise<any> is incompatible with the LeagueTable type

How does Zone.js enhance the functionality of Angular 2?

Having trouble with react-i18next not working properly in my React Native application

A call signature is missing in the expression type of Typescript, preventing it from being invoked

How to change a specific value in an array of objects using React

The properties required for type 'never[]' are not present

Scroll automatically to the last div whenever a button is clicked using React and Typescript