pull/14065/head
Simon Holthausen 2 years ago
parent afda88c1bf
commit 82dbdc4a19

@ -197,11 +197,7 @@ Using it together with dynamic components to restrict what kinds of component ca
> [!LEGACY] In Svelte 4, components were of type `SvelteComponent`
## Component helper types
### ComponentProps
`ComponentProps` extracts the properties a component expects.
To extract the properties from a component, use `ComponentProps`.
```ts
import type { Component, ComponentProps } from 'svelte';
@ -217,19 +213,17 @@ function withProps<TComponent extends Component<any>>(
withProps(MyComponent, { foo: 'bar' });
```
### ComponentExports
`ComponentExports` extracts the exports of a component, in other words you can use it to declare its instance type:
To declare that a variable expects the constructor or instance type of a component:
```svelte
<script lang="ts">
import type { ComponentExports } from 'svelte';
import { Component } from './Component.svelte';
import MyComponent from './MyComponent.svelte';
let component: ComponentExports<typeof Component>;
let componentConstructor: typeof MyComponent = MyComponent;
let componentInstance: MyComponent;
</script>
<Component bind:this={component} />
<MyComponent bind:this={componentInstance} />
```
## Enhancing built-in DOM types

@ -614,20 +614,6 @@ To declare that a component of a certain type is required:
<svelte:component this={component} foo="bar" />
```
To declare the instance type of a component, or in other words its exports:
```svelte
<script lang="ts">
+++import type { ComponentExports } from 'svelte';+++
import { Component } from './Component.svelte';
---let component: Component;---
+++let component: ComponentExports<typeof Component>;+++
</script>
<Component bind:this={component} />
```
The two utility types `ComponentEvents` and `ComponentType` are also deprecated. `ComponentEvents` is obsolete because events are defined as callback props now, and `ComponentType` is obsolete because the new `Component` type is the component type already (e.g. `ComponentType<SvelteComponent<{ prop: string }>>` == `Component<{ prop: string }>`).
### bind:this changes

Loading…
Cancel
Save