Dynamic List Rendering in Vue with TypeScript

This challenge focuses on implementing a render function in a Vue component using TypeScript. You'll be responsible for dynamically rendering a list of items based on data provided to the component, demonstrating a deeper understanding of Vue's rendering process and TypeScript's type safety. This is useful for scenarios where you need fine-grained control over the rendering process or want to avoid using templates.

Problem Description

You are tasked with creating a Vue component that renders a list of items using a custom render function. The component will receive an array of Item objects as a prop. The render function should iterate through this array and render a div element for each item, displaying the item's id and name. The id should be displayed as a bold tag, and the name should be displayed in regular text.

Key Requirements:

• The component must be written in TypeScript.
• The component must accept an array of Item objects as a prop named items.
• The render function must iterate through the items array.
• For each item, a div element must be created.
• Inside each div, the item's id (bolded) and name must be displayed.
• The component must correctly handle an empty items array (render nothing).

Expected Behavior:

When the component receives an array of Item objects, it should render a list of div elements, each displaying the id and name of an item. If the items array is empty, the component should render nothing.

Edge Cases to Consider:

• Empty items array.
• items array containing null or undefined values (should be gracefully handled - skip rendering for those).
• Item objects missing id or name properties (should be gracefully handled - skip rendering for those).

Examples

Example 1:

Input: items = [{ id: 1, name: "Apple" }, { id: 2, name: "Banana" }]
Output:
<div><b>1</b> Apple</div>
<div><b>2</b> Banana</div>
Explanation: The component iterates through the `items` array and renders a `div` for each item, displaying the `id` (bolded) and `name`.

**Example 2:**

Input: items = [] Output: (Nothing rendered) Explanation: The component handles the empty array case by rendering nothing.

Example 3:

Input: items = [{ id: 1, name: "Apple" }, { id: 2, name: null }, { id: 3, name: "Cherry" }]
Output:
<div><b>1</b> Apple</div>
<div><b>3</b> Cherry</div>
Explanation: The component skips rendering the item with a null name.

## Constraints

*   The component must be a functional component.
*   The `Item` type is defined as: `{ id: number; name: string | null; }`.
*   The component should be performant enough to render lists of up to 100 items without noticeable lag.
*   The component must be valid Vue code and render correctly in a Vue environment.

## Notes

*   You'll be using the `h` function (createElement) from Vue to create the elements.
*   Consider using optional chaining (`?.`) to safely access properties of the `Item` objects.
*   Focus on creating a clean and readable `render` function.
*   Remember to import the necessary Vue types and functions.
*   The component should be named `ItemList`.
*   The `items` prop should be explicitly typed.