> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Import JSDoc

## Article: Import JSDoc

## Article Link: https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/import-jsdoc.md

## Article Content:

# Set up Type Checking and Autocomplete by Importing JSDoc Types
You can import JSDoc types to use in your JavaScript code.

Apply a JSDoc type to a parameter to enable [type checking and autocomplete](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/using-jsdoc.md#type-checking-and-autocomplete).

<blockquote class="important">
  <strong>Important:</strong> Importing JSDoc is supported only in the code editor, not in the Wix IDE or your local IDE.
</blockquote>

## Step 1 | Define and export a type
You can skip this step if you want to use a type defined by Wix.

To define and export a type using JSDoc:

1. Use [JSDoc tags and definitions](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/velo-workspace/code-editor-ide/using-jsdoc.md#jsdoc-tags-and-definitions) to define a type. For example:
    ```js
    /**
     * @typedef {object} employee
     * @property {string} name Employee's name.
     * @property {string} seniority The number of years the employee has worked at the company.
     * @property {number} hours The number of hours the employee works a week.
     */
    ```

1. You can expose your type to your site's files as either a global type or a restricted type:
    - **Global type**: You can use your defined type in any JavaScript file without further changes.
    - **Restricted type**: You can define different types with the same name in different files. To restrict your type, add `export {};` below your JSDoc declaration. For example:
        ```js
        /**
         * @typedef {object} employee
         * @property {string} name Employee's name.
         * @property {string} seniority The number of years the employee has worked at the company.
         * @property {number} hours The number of hours the employee works a week.
         */
        export {};
        ```

## Step 2 | Access a JSDoc type

The way that you import the JSDoc type depends on where and how the type is exposed:
- [Self-defined global type](#self-defined-global-type)
- [Self-defined restricted type](#self-defined-restricted-type)
- [Wix editor elements](#wix-editor-elements)
- [Backend event handlers](#backend-event-handlers)
- [Router functions](#router-functions)

### Self-defined global type
Use the type without importing it. For example:
```js
/**
 * @param {employee} employee
 */
export function salaryCalculator(employee) {
  return `Salary for ${employee.name}: ${employee.hours * employee.seniority * 100}`;
}
```

### Self-defined restricted type
Import your type using `import('<file-path.js>').<type-def-name>` directly in the JSDoc's tag type declaration. For example:
```js
/**
 * @param {import('backend/myJSDocFile.js).employee} employee
 */
export function salaryCalculator(employee) {
  return `Salary for ${employee.name}: ${employee.hours * employee.seniority * 100}`;
}
```

### Wix editor elements
You can use [Wix editor elements](https://dev.wix.com/docs/velo/api-reference/$w/introduction.md) directly in JSDoc types without importing them. Define the JSDoc data type using `$w.Element`. For example:

```js
/** @param {$w.Text} parameterName */
```

### Backend event handlers
By default, the file for [backend event handlers](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/backend-code/events/about-backend-events.md), `events.js`, doesn't know the type of the parameter you are passing to a function.

To tell your `events.js` file the parameter's type:
1. Check your event's `EventObjectName`. You can find it in the method declaration in [API reference](https://dev.wix.com/docs/velo.md).
1. Add the following code above your function declaration:
    ```js
    /** @param {import('api-module-name').Events.<EventObjectName>} parameterName */
    ```

<details>
<summary>Example: <a href="fallback::https://dev.wix.com/docs/velo/api-reference/wix-bookings-v2/events/on-booking-created"><code>onBookingCreated</code></a></summary>.md

To add JSDoc to <code>wix-bookings.v2</code> event, <code>onBookingCreated()</code>:

<ol>
<li>Open the API reference for <a href="fallback::https://dev.wix.com/docs/velo/api-reference/wix-bookings-v2/events/on-booking-created"><code>onBookingCreated</code></a>..md Find the <code>EventObjectName</code>.<br/><img src="https://wixmp-833713b177cebf373f611808.wixmp.com/images/import-js-doc-md_velo-articles_velo-workspace_images_booking-created-event-object.png" width="750px"/></li>
<li>Add the following JSDoc annotation above the event handler function in the <code>events.js</code> file:<br/><code>/** @param {import('api-module-name').Events.BookingCreated} event */</code></li>
</ol>

<pre><code class="language-js">
/** @param {import('api-module-name').Events.BookingCreated} event */
export function wixBookings_onBookingCreated(event) {
  // Handle your event
}
</code></pre>

</details>

### Router functions
By default, the [routers.js](https://dev.wix.com/docs/develop-websites/articles/coding-with-velo/routers/about-routers.md) file doesn’t support autocomplete or type checking for [WixRouterRequest](https://dev.wix.com/docs/velo/api-reference/wix-router/wix-router-request/introduction.md) objects passed to router functions.

To support autocomplete or type-checking in a `routers.js` file, add the following JSDoc annotation above your router functions:
```js
/** @param {import('wix-router').WixRouterRequest} parameterName */
```