How to type $props in Svelte 5 with JSDoc?

[danielniccoli]

How do I move my JSDoc type annotations from

/** @type {HTMLDialogElement} */
export let dialog
/** @type {string} */
export let title

to

let { dialog, title } = $props();

in an efficient way?

The only working solution I found was this

/**
 * @typedef $props
 * @type {object}
 * @property {HTMLDialogElement} dialog - an ID.
 * @property {string} title - your name.
 */

/** @type {$props} */
let { dialog, title } = $props()

which is overly verbose,
or this

/** @type {{dialog: HTMLDialogElement, title: string}} */
let { dialog, title } = $props()

which becomes unwieldy quickly, due to all of it being in one line.

Something along the lines of the follow (which does not work)

/**
 * @param {HTMLDialogElement} dialog
 * @param {string} title
 */
let { dialog, title } = $props()

[brunnerh]

You can break @type definitions over multiple lines, syntax highlighting might be a bit funky, depending on editor.

/**
 * @type {{
 *   dialog: HTMLDialogElement,
 *   title: string,
 * }}
 */
let { dialog, title } = $props()