refac: define typed symbol for provider

src/app/contacts/ContactForm/store.ts

@@ -1,16 +1,14 @@
 import { useLoader } from "@/shared/lib/composables/loader";
-import { validInject } from "@/shared/lib/di";
+import { defineInjectKey, validInject } from "@/shared/lib/di";
 import { reactive } from "vue";
 import { useContactsStore } from "../store";
 import type { ContactFormApiCreateProps, ContactFormApiPort } from "./ports";
 
-export const CONTACT_FORM_API_PROVIDE_KEY = Symbol("ContactFormApi");
+export const CONTACT_FORM_API_PROVIDE_KEY =
+  defineInjectKey<ContactFormApiPort>("ContactFormApi");
 
 export function useContactFormStore() {
-  const api = validInject<ContactFormApiPort>(
+  const api = validInject(CONTACT_FORM_API_PROVIDE_KEY);
-    CONTACT_FORM_API_PROVIDE_KEY,
-    "ContactFormApiPort"
-  );
 
   const contactsStore = useContactsStore();
 

src/app/contacts/ContactsTable/store.ts

@@ -1,5 +1,5 @@
 import { useLoader } from "@/shared/lib/composables/loader";
-import { validInject } from "@/shared/lib/di";
+import { defineInjectKey, validInject } from "@/shared/lib/di";
 import { storeToRefs } from "pinia";
 import { reactive } from "vue";
 import { useContactsStore } from "../store";
@@ -8,13 +8,11 @@ import type {
   ContactsTableApiPort,
 } from "./ports";
 
-export const CONTACTS_TABLE_API_PROVIDE_KEY = Symbol("ContactsTableApi");
+export const CONTACTS_TABLE_API_PROVIDE_KEY =
+  defineInjectKey<ContactsTableApiPort>("ContactsTableApi");
 
 export function useContactsTableStore() {
-  const api = validInject<ContactsTableApiPort>(
+  const api = validInject(CONTACTS_TABLE_API_PROVIDE_KEY);
-    CONTACTS_TABLE_API_PROVIDE_KEY,
-    "ContactsTableApiPort"
-  );
 
   const contactsStore = useContactsStore();
   const { contacts } = storeToRefs(contactsStore);

src/app/files/FilesTable/store.ts

@@ -1,17 +1,15 @@
 import { useLoader } from "@/shared/lib/composables/loader";
-import { validInject } from "@/shared/lib/di";
+import { defineInjectKey, validInject } from "@/shared/lib/di";
 import { storeToRefs } from "pinia";
 import { reactive } from "vue";
 import { useFilesStore } from "../store";
 import type { FilesTableApiPort } from "./ports";
 
-export const FILES_TABLE_API_PROVIDE_KEY = Symbol("FilesTableApi");
+export const FILES_TABLE_API_PROVIDE_KEY =
+  defineInjectKey<FilesTableApiPort>("FilesTableApi");
 
 export function useFilesTableStore() {
-  const api = validInject<FilesTableApiPort>(
+  const api = validInject(FILES_TABLE_API_PROVIDE_KEY);
-    FILES_TABLE_API_PROVIDE_KEY,
-    "ContactsTableApiPort"
-  );
 
   const filesStore = useFilesStore();
   const { files } = storeToRefs(filesStore);

src/app/lists/ListForm/store.ts

@@ -1,16 +1,14 @@
 import { useLoader } from "@/shared/lib/composables/loader";
-import { validInject } from "@/shared/lib/di";
+import { defineInjectKey, validInject } from "@/shared/lib/di";
 import { reactive } from "vue";
 import { useListsStore } from "../store";
 import type { ListFormApiCreateProps, ListFormApiPort } from "./ports";
 
-export const LIST_FORM_API_PROVIDE_KEY = Symbol("ListFormApi");
+export const LIST_FORM_API_PROVIDE_KEY =
+  defineInjectKey<ListFormApiPort>("ListFormApi");
 
 export function useListFormStore() {
-  const api = validInject<ListFormApiPort>(
+  const api = validInject(LIST_FORM_API_PROVIDE_KEY);
-    LIST_FORM_API_PROVIDE_KEY,
-    "ListFormApiPort"
-  );
 
   const listsStore = useListsStore();
 

src/app/lists/ListsSelect/store.ts

@@ -1,16 +1,14 @@
 import { useLoader } from "@/shared/lib/composables/loader";
-import { validInject } from "@/shared/lib/di";
+import { defineInjectKey, validInject } from "@/shared/lib/di";
 import { computed, reactive } from "vue";
 import { useListsStore } from "../store";
 import type { ListsSelectApiPort } from "./ports";
 
-export const LISTS_SELECT_API_PROVIDE_KEY = Symbol("ListsTableApi");
+export const LISTS_SELECT_API_PROVIDE_KEY =
+  defineInjectKey<ListsSelectApiPort>("ListsTableApi");
 
 export function useListsSelectStore() {
-  const api = validInject<ListsSelectApiPort>(
+  const api = validInject(LISTS_SELECT_API_PROVIDE_KEY);
-    LISTS_SELECT_API_PROVIDE_KEY,
-    "ListsSelectApiPort"
-  );
 
   const listsStore = useListsStore();
 

src/app/lists/ListsTable/store.ts

@@ -1,17 +1,15 @@
 import { useLoader } from "@/shared/lib/composables/loader";
-import { validInject } from "@/shared/lib/di";
+import { defineInjectKey, validInject } from "@/shared/lib/di";
 import { storeToRefs } from "pinia";
 import { reactive } from "vue";
 import { useListsStore } from "../store";
 import type { ListsTableApiPort } from "./ports";
 
-export const LISTS_TABLE_API_PROVIDE_KEY = Symbol("ListsTableApi");
+export const LISTS_TABLE_API_PROVIDE_KEY =
+  defineInjectKey<ListsTableApiPort>("ListsTableApi");
 
 export function useListsTableStore() {
-  const api = validInject<ListsTableApiPort>(
+  const api = validInject(LISTS_TABLE_API_PROVIDE_KEY);
-    LISTS_TABLE_API_PROVIDE_KEY,
-    "ContactsTableApiPort"
-  );
 
   const listsStore = useListsStore();
   const { lists } = storeToRefs(listsStore);

src/pages/audience/AudienceContactsPage.vue

@@ -25,7 +25,7 @@ function openAddContactForm() {
 const selectedListId = ref("");
 watch(
   () => route.params.listId,
-  (listId) => {
+  (listId: string) => {
     selectedListId.value = listId ?? "";
   },
   { immediate: true }

src/shared/lib/di.ts

@@ -1,15 +1,15 @@
-import { inject } from "vue";
+import { inject, type InjectionKey } from "vue";
 
-export function validInject<T>(key: Symbol, interfaceName?: string): T {
+export function defineInjectKey<T>(name: string): InjectionKey<T> {
-  const api = inject<T>(key);
+  return Symbol(name);
-  if (api == null) {
-    let errorMessage = `You have to provide "${key.toString()}"`;
-    if (interfaceName) {
-      errorMessage += `, that implement ${interfaceName} interface`;
 }
+
+export function validInject<T>(key: InjectionKey<T>): T {
+  const api = inject(key);
+  if (api == null) {
+    const errorMessage = `You have to provide "${key.toString()}"`;
     throw new Error(errorMessage);
   }
-  // TODO: it would be great if we could check the type for the injected object.
 
   return api;
 }