Sometimes in JSDoc, we need to get the type of a Svelte component’s props in a different module. Svelte provides ComponentProps to achieve that goal:

// other-module.js

/**
 * @import { ComponentProps } from 'svelte'
 * @import ListComponent from 'path/to/List.svelte'
 * */


/** @type {ComponentProps<typeof ListComponent>} */
let list = {
  id: 'awesome-list',
  isAwesome: true
}

First, we import ComponentProps type from the svelte package as well as the default export of the Svelte component, in this example <List> (List.svelte).

Then, to get the type of the props that our <List> component defines (see below), we can use ComponentProps<typeof ListComponent> to extract just the type of the List component’s $props(). Basically, we provide the type of the ListComponent as a generic type variable to receive the $props that List.svelte define.

For completeness, this is how the Svelte component in this example could be typed with JSDoc:

<script>
  // List.svelte

  /**
   * @typedef {Object} Props
   * @property {string} id a nice id
   * @property {boolean} [isAwesome=true] is this list awesome?
   */

  /** @type {Props} */
  let {id, isAwesome = true } = $props();
</script>
...