Skip to content

Add typeof example to web docs on Component and ComponentProps #13940

@cloudymeatball

Description

@cloudymeatball

Describe the problem

A follow-up to #13770 which identified using Component<typeof MyComponent> and ComponentProps<typeof MyComponent>, this requests that an example is added to web docs typescript#The-Component-type.

Describe the proposed solution

A typical use case is when using wrapper components (for ComponentProps). It may be too much revision, but it ties along nicely with Typing wrapper components two sections above, and may fare well to move that section below Typing $state. That said I understand that $state typing is introduced so late on page as it requires generics and so do Component and ComponentProps. So a rough idea is after withProps(), add


Use typeof MyComponent for the type of your component.

<script lang="ts">
  import type { ComponentProps, Snippet } from 'svelte';
  import Banner from './Banner.svelte';
  
  let { name = 'Bruce', children, ...bannerProps} : {name?: string, children?: Snippet } & ComponentProps<typeof Banner> = $props()
</script>

<p>{name}</p>
<Banner {...bannerProps}>
   {@render children?.()} // Banner.svelte needs to accept snippets or legacy slots for this to work.
</Banner>

It's just a rough idea, feel free to totally change it.

Importance

would make my life easier

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions