-
-
Notifications
You must be signed in to change notification settings - Fork 4.6k
-
Scenario: You have multiple components that should all have the same set of methods.
I want to set the props interface over all the components such that it forces each component to implement certain methods I say are required. In other languages this would be something like an abstract class. Can I do this in svelte?
<script lang="ts">
export interface Props {
name?: string;
}
let { name = "world" }: Props = $props();
//Require this function be defined in all components
function GetArea(){
}
//Require this function be defined in all components
function Save(){
}
</script>
Beta Was this translation helpful? Give feedback.
All reactions
Replies: 6 comments 1 reply
-
Functions that are not exported have no effect on a component's API, so there should not be much of a point in enforcing this from a component interaction standpoint.
Though even if you do export them, the types of exports are inferred and cannot be set collectively with the exception of the part that is governed by the props.
You could collect the various functions into an object, type and export that.
// api.ts export interface Api { doThing(value: number): void; log(): void; }
<!-- A.svelte --> <script lang="ts"> import type { Api } from './api'; function doThing(value: number) { // ... } function log() { console.log('hello from A'); } export const api: Api = { doThing, log }; </script>
Beta Was this translation helpful? Give feedback.
All reactions
-
If there was a way for the component to force typings on its exports like it can its props I think we'd be in business....is there a concept for that?
Beta Was this translation helpful? Give feedback.
All reactions
-
No
Beta Was this translation helpful? Give feedback.
All reactions
-
What do you think about this as a workaround...basically create another Svelte component which acts as behalf of an abstract class. Then for each component, it would add a reference to this component to enforce the type checking on it's abstract methods
sveltejs/language-tools#2720 -- this is a bug report but the concept should apply regardless of the bug https://github.com/Jojoshua/svelte5-issue1/tree/master/src/Specialty
Beta Was this translation helpful? Give feedback.
All reactions
-
I'm going to refer to this pattern as an AbstractComponent https://github.com/Jojoshua/svelte5-issue1/blob/master/src/Specialty/AbstractComponent.svelte , it seems to fit my needs so far. Would be nice if Svelte had an official concept for this though.
Beta Was this translation helpful? Give feedback.
All reactions
-
Here's an idea to force the entire component including the exports.
The gist..
- Create a Component wrapper type - https://github.com/Jojoshua/svelte5-issue1/blob/master/src/Specialty/specialty-types.ts
- Add Abstract component using that type (component) and add any extra's as desired (doSomething) https://github.com/Jojoshua/svelte5-issue1/blob/master/src/Specialty/AbstractComponentFull.svelte
- Pull a reference to "self" and apply https://github.com/Jojoshua/svelte5-issue1/blob/db7c7d12fe0321eae17e1c1a0054ab87c9c13a01/src/Specialty/S1.svelte#L19
This allows the component to force itself to have all the props, exports, and non-exports as desired.
Beta Was this translation helpful? Give feedback.
All reactions
-
Moving to Ideas
Beta Was this translation helpful? Give feedback.