Feature Request: Native Interface Support on <script setup> Components

[Firedan1176]

What problem does this feature solve?

There are situations where a developer may need to create a Vue component with custom behavior using a Vue-compatible library. If the library defines an interface by which it will call functions in the Vue component, it is up to the developer to keep track of the required methods. Using <script lang="ts">, it's somewhat possible to enforce interface implementations:

<script lang="ts">
import { defineComponent } from "vue";

interface MyInterface {
  requiredMethod(): void;
}

export default defineComponent({
  setup(): MyInterface {
    function impl() { }
    return { requiredMethod: impl };
  }
})
</script>

This has the benefit of allowing the developer to specify the interface, and the adherence to such is enforced by Typescript through the return. However it doesn't appear this is feasible using <script setup lang="ts">. A possible workaround is to define a class and construct a class instance in the Vue component, and call methods on the class instance:

<script setup lang="ts">

// Possibly defined in a library or ts file
interface MyInterface {
  requiredMethod(): void;
}

class MyClass implements MyInterface {
  requiredMethod(): void { }
}

const myInstance = new MyClass();

function componentFunction() {
  myInstance.requiredMethod();
}
</script>

However, this presents a few downsides:

1.) The developer needs to define one or more class(es) in order to enforce interface implementations, adding boilerplate
2.) Each Vue component that wants to adhere to the interface needs to define its own class in order to provide a unique implementation
3.) Interface enforcement is not made a responsibility of the Vue component, but the class itself. The Vue component has no strict native adherence

By providing interface adherence on the Vue component itself, it would enforce that the component itself adheres to a strict behavior policy, rather than requiring the developer to enforce this on classes. In the example above which uses a class, the Vue component itself has no restrictions regarding which methods are defined, circumventing implementation enforcement.

Adding native interface enforcement at the component level using <script setup> signals that the Vue component follows specific behavior, and would allow developers and library creators to design components that strictly adhere to their libraries. Developers would be able to confidently know their Vue components support extending a library's tools through strict interface adherence.

What does the proposed API look like?

Add support for a new attribute named implements, and allow the developer to specify one or more interfaces on the <script setup> tag:

<script setup lang="ts" implements="MyInterface">

Using multiple interfaces:

<script setup lang="ts" implements"MyInterface, LibraryInterface">

Specifying an interface on the Vue component via this API would require the developer to implement the interface within the component directly:

// src/interfaces/index.ts
export interface MyInterface {
    requiredMethod(): void;
}

<script setup lang="ts" implements="MyInterface">
import type { MyInterface } from "@/interfaces";

// Excluding this required method would generate an error on the `implements` attribute
function requiredMethod() {
  return;
}
</script>

At compile-time, the developer would receive errors during build or IDE warnings on the implements attribute that one or more required members are not defined in the Vue component.

However this proposal may provide significant complexity:

1.) Additional bloat to the Vue framework. It may not be known how often this strict interface type adherence would be helpful
2.) Potentially significant development for supporting compile-time and IDE warnings
3.) May not even be feasible due to the way Vue typescript support handles types on components

While Vue 3 supports the generic directive, it does not seem to be a sensible route to handle interface adherence:
https://stackoverflow.com/questions/77906182/how-to-define-an-interface-that-vuejs-dynamic-components-must-implement

[pikax]

This is already possible, but it might be very clear on how to get that.

Methods/variables in setup are internal only.

Components using <script setup> are closed by default - i.e. the public instance of the component, which is retrieved via template refs or $parent chains, will not expose any of the bindings declared inside <script setup>.

see defineExpose

Based on that, you can expose it with defineExpose and make your interface required:

defineExpose<MyInterface>({
 requiredMethod: () => {
 // code
 },
})

Full example