How to handle interfaces properly in Vue.js

[DevKame]

Hey, is just started using ts within my vue projects. I use Vue CLI and picked typescript within the manuall config menu, when using vue create vue_app
Currently i define interfaces wherever they are need, knowing that its just bad coding practise. Now i want to define them once and make them available for every component that needs them.

I tried creating a "Interfaces" Folder containing all Interfaces. This is my interface Items:

export interface Items
{
  open: string[];
  closed: string[];
}

In App its imported because i need an Instance of it:
App.vue:

<script lang="ts" setup>
import TheWrapper from "./components/TheWrapper.vue";

import {Items} from "./interfaces/Items";

import { provide, reactive } from "vue";

const items =
reactive<Items>({
  open: [],
  closed: [],
});


provide("items", items);
</script>

Works perfectly fine. As you can see, i provide a variable that is created on basis of that interface.
The problem starts within the component that uses it:
TheInput.vue:

<script lang="ts" setup>
import { ref, watch, inject, onMounted } from "vue";

const userInput = ref<string>("");

watch(userInput, (val:string) => {
    console.log(val);

});
const items = inject("items");

onMounted(() => {
    console.log(items);
    console.log(typeof(items));
})

function tryItemAddition() {
    items.open.push(userInput.value);
    console.log(items);
}
</script>

Without even importing the interface, it works. As you can see in the console.log of onMounted, the correct object is imported:

BUT items is highlighted red in my IDE, on hovering i get this error:

My thought was that it has something to do with the fact that i didnt apply a type for it. On importing the interface with
import {Items} from "../interfaces/Items";
and changing the inject-statement a bit
const items: Items = inject("items");

The red highlighting disappears, however, the part where i inject the items variable, is now highlighted:

I assume this has sth to do with the import and that ts doesnt know for sure if the imported ressource will be imported successfully, so i added an exclamation mark to it:
const items: Items = inject("items")!;

Now i get no highlighing, no erros and warnings, but is this kind of using Interfaces considered a good practise and how is it done properly?

[jacekkarczmarczyk]

https://vuejs.org/guide/typescript/composition-api.html#typing-provide-inject