chore: be type safe

.config/nuxt.ts

@@ -159,5 +159,8 @@ export default defineNuxtConfig({
  },
  features: {
  inlineStyles: false
+ },
+ experimental: {
+ typedPages: true
  }
 });

app/components/CookiesController.vue

@@ -20,9 +20,9 @@ moduleOptions.localeTexts = {
  }
 };
 
-moduleOptions.cookies.necessary[0].name = t("cookies_necessary_title");
-moduleOptions.cookies.necessary[0].description = t("cookies_necessary_description");
-moduleOptions.cookies.necessary[0].links = {
+moduleOptions.cookies.necessary[0]!.name = t("cookies_necessary_title");
+moduleOptions.cookies.necessary[0]!.description = t("cookies_necessary_description");
+moduleOptions.cookies.necessary[0]!.links = {
  "/legal/cookies": t("cookie_policy"),
  "/legal/privacy": t("privacy_policy"),
  "/legal/terms": t("terms_of_use")

app/components/ToastsController.client.vue

@@ -7,7 +7,7 @@ watch(toasts, () => {
  nextTick(() => {
  if (!refToasts.value) return;
  for (let i = 0; i < refToasts.value.length; i++) {
- const toast = $bootstrap.showToast(refToasts.value[i]);
+ const toast = $bootstrap.showToast(refToasts.value[i]!);
  if (!toast) continue;
  toast.addEventListener("hidden.bs.toast", () => {
  if (i + 1 === refToasts.value?.length) $toasts.removeAll();

app/components/bond/BondMarkers.vue

@@ -130,8 +130,8 @@ watch(() => props.markers, (value) => {
  <Icon v-if="edit" name="tabler:grip-horizontal" size="1rem" class="position-absolute start-50 bottom-0 translate-middle-x text-primary" />
  <div class="w-100 h-100 text-break">
  <h5 class="d-flex align-items-center gap-1">
- <span class="d-flex" :title="t(groups[marker.group].key)">
- <Icon :name="groups[marker.group].icon" class="text-primary" size="1.5rem" />
+ <span class="d-flex" :title="t(groups[marker.group]!.key)">
+ <Icon :name="groups[marker.group]!.icon" class="text-primary" size="1.5rem" />
  </span>
  {{ marker.title }}
  </h5>

app/components/bond/BondStories.vue

@@ -128,7 +128,7 @@ watch(() => props.marker, () => {
  <div class="card-footer">
  <small class="text-body-secondary">
  <span>{{ story.year }}</span>
- <span v-if="story.month">, {{ t(months[story.month - 1]) }}</span>
+ <span v-if="story.month">, {{ t(months[story.month - 1]!) }}</span>
  </small>
  </div>
  <Transition name="fade">

app/components/map/MapPublic.vue

@@ -50,7 +50,7 @@ onMounted(() => {
  }
  const length = markers.value.length;
  if (length) {
- setView([markers.value[length - 1].lat, markers.value[length - 1].lng], 3);
+ setView([markers.value[length - 1]!.lat, markers.value[length - 1]!.lng], 3);
  }
 });
 

app/components/map/MapView.vue

@@ -75,7 +75,7 @@ onMounted(() => {
  }
  const length = props.markers.length;
  if (length) {
- setView([props.markers[length - 1].lat, props.markers[length - 1].lng], 3);
+ setView([props.markers[length - 1]!.lat, props.markers[length - 1]!.lng], 3);
  }
 });
 

app/pages/app/premium/subscribe.vue

@@ -13,9 +13,9 @@ if (!user.value.bond?.id) {
 const loading = ref(false);
 const paid = ref(false);
 
-const { _ptxn } = useRoute().query;
+const { query } = useRoute("app-premium-subscribe");
 const isPtxnValid = ref(false);
-if (_ptxn) loading.value = true;
+if (query._ptxn) loading.value = true;
 
 const { $paddle, $toasts } = useNuxtApp();
 const initialized = ref(false);
@@ -51,7 +51,7 @@ onMounted(async () => {
  if (!subscribe) return;
  paid.value = true;
  await sessionFetch();
- if (_ptxn) return;
+ if (query._ptxn) return;
  $toasts.add({ message: t("subscribed"), success: true });
  $paddle.close();
  },
@@ -75,7 +75,7 @@ useSeo({
  <div class="col-lg-8 col-xl-6 mx-auto">
  <div class="bg-body rounded-3 px-3 py-4 p-lg-4">
  <SpinnerCircle v-if="loading" />
- <template v-else-if="_ptxn">
+ <template v-else-if="query._ptxn">
  <div v-if="isPtxnValid" class="text-center">
  <Icon name="solar:check-circle-bold" class="text-success" size="5rem" />
  <h1>{{ t("transaction_completed") }}!</h1>

app/pages/login.vue

@@ -1,13 +1,12 @@
 <script setup lang="ts">
 definePageMeta({ layout: "access", middleware: "authenticated" });
 
-const { error } = useRoute().query;
+const { query, meta } = useRoute("login");
 
-const needsConfirm = ref(error === "verify_needed" ? true : false);
+const needsConfirm = ref(query.error === "verify_needed" ? true : false);
 const resent = ref(false);
 const submit = ref({ loading: false, error: false });
 
-const { meta } = useRoute();
 const { $toasts } = useNuxtApp();
 
 const { form } = useFormState({
@@ -52,7 +51,7 @@ const resendVerification = async () => {
 };
 
 onMounted(() => {
- if (error) $toasts.add({ message: t(error.toString()), success: false });
+ if (query.error) $toasts.add({ message: t(query.error.toString()), success: false });
  if (!meta.email) return;
  $toasts.add({ message: t("registered"), success: true });
 });

app/pages/map/[code].vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({ layout: "map" });
 
-const { params } = useRoute();
+const { params } = useRoute("map-code");
 
 const { data: bond } = await useFetch(`/api/bond/public/${params.code}`);
 const { $bootstrap } = useNuxtApp();
@@ -81,11 +81,11 @@ onMounted(() => {
  };
 
  canvasHeader.value.addEventListener("touchstart", (event) => {
- touch.startY = event.changedTouches[0].screenY;
+ touch.startY = event.changedTouches[0]!.screenY;
  }, { passive: true });
 
  canvasHeader.value.addEventListener("touchend", (event) => {
- touch.endY = event.changedTouches[0].screenY;
+ touch.endY = event.changedTouches[0]!.screenY;
  if (touch.endY < touch.startY) {
  expandCanvas.value = true;
  return;
@@ -135,10 +135,10 @@ useSeo({
  <div v-if="marker">
  <div class="p-3 border-bottom">
  <p>{{ marker.description }}</p>
- <div class="d-flex gap-1 mb-2" :title="t(groups[marker.group].key)">
+ <div class="d-flex gap-1 mb-2" :title="t(groups[marker.group]!.key)">
  <strong>{{ t("group") }}:</strong>
- <Icon :name="groups[marker.group].icon" class="text-primary" size="1.5rem" />
- <span>{{ t(groups[marker.group].key) }}</span>
+ <Icon :name="groups[marker.group]!.icon" class="text-primary" size="1.5rem" />
+ <span>{{ t(groups[marker.group]!.key) }}</span>
  </div>
  <div class="d-flex gap-1">
  <button v-if="filter.year" class="btn btn-sm btn-danger rounded-3">
@@ -174,7 +174,7 @@ useSeo({
  <div class="card-footer">
  <small class="text-body-secondary">
  <span>{{ story.year }}</span>
- <span v-if="story.month">, {{ t(months[story.month - 1]) }}</span>
+ <span v-if="story.month">, {{ t(months[story.month - 1]!) }}</span>
  </small>
  </div>
  </div>
@@ -203,7 +203,7 @@ useSeo({
  <div>
  <span>{{ t("story_date") }}: </span>
  <strong>
- <span v-if="currentStory.month">{{ t(months[currentStory.month - 1]) }} {{ currentStory.year }}</span>
+ <span v-if="currentStory.month">{{ t(months[currentStory.month - 1]!) }} {{ currentStory.year }}</span>
  <span v-else>{{ currentStory.year }}</span>
  </strong>
  </div>

app/pages/recovery/[email]/[code].vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 definePageMeta({ layout: "utils" });
 
-const { params } = useRoute();
+const { params } = useRoute("recovery-email-code");
 const { $toasts } = useNuxtApp();
 
-const emailCode = ref(params.email.toString());
-const code = ref(params.code.toString());
+const emailCode = ref(params.email);
+const code = ref(params.code);
 const submit = ref({ loading: false, error: false });
 
 const email = ref("");

app/pages/signup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({ layout: "access", middleware: "authenticated" });
 
-const { error } = useRoute().query;
+const { query } = useRoute("signup");
 
 const { form, formReset } = useFormState({
  name: "",
@@ -40,9 +40,9 @@ const signUp = async () => {
 };
 
 onMounted(() => {
- if (!error) return;
+ if (!query.error) return;
  const { $toasts } = useNuxtApp();
- $toasts.add({ message: t(error.toString()), success: false });
+ $toasts.add({ message: t(query.error.toString()), success: false });
 });
 
 useSeo({

app/pages/verify/[email]/[code].vue

@@ -9,9 +9,9 @@ onBeforeRouteLeave((to, from, next) => {
 const loaded = ref(false);
 const verified = ref(false);
 
-const { params, meta } = useRoute();
-const emailCode = ref(params.email.toString());
-const code = ref(params.code.toString());
+const { params, meta } = useRoute("verify-email-code");
+const emailCode = ref(params.email);
+const code = ref(params.code);
 const email = ref("");
 try {
  email.value = atob(emailCode.value);

app/plugins/bootstrap.client.ts

@@ -30,7 +30,7 @@ class Bootstrap {
  if (e.key !== "Escape") return;
  const modals = document.querySelectorAll(".modal.show");
  if (!modals.length) return;
- const id = modals[modals.length - 1].id;
+ const id = modals[modals.length - 1]!.id;
  const instance = Modal.getInstance("#" + id);
  if (instance) instance.hide();
  });
@@ -89,6 +89,12 @@ class Bootstrap {
  }
 }
 
+declare module "#app" {
+ interface NuxtApp {
+ $bootstrap: Bootstrap;
+ }
+}
+
 export default defineNuxtPlugin(() => {
  const bootstrap = new Bootstrap();
  return {

app/plugins/countries.ts

@@ -14,6 +14,12 @@ class Countries {
  }
 }
 
+declare module "#app" {
+ interface NuxtApp {
+ $countries: Countries;
+ }
+}
+
 export default defineNuxtPlugin(() => {
  const countries = new Countries();
  return {

app/plugins/leaflet.client.ts

@@ -78,8 +78,8 @@ class Leaflet {
  if (!this.markers[group]) {
  this.markers[group] = [];
  }
- this.markers[group].push(marker);
- marker.addTo(this.groups[group]);
+ this.markers[group]!.push(marker);
+ marker.addTo(this.groups[group]!);
  return marker;
  }
 
@@ -109,6 +109,12 @@ class Leaflet {
  }
 }
 
+declare module "#app" {
+ interface NuxtApp {
+ $Leaflet: typeof Leaflet;
+ }
+}
+
 export default defineNuxtPlugin(() => {
  return {
  provide: { Leaflet }

app/plugins/paddle.client.ts

@@ -65,6 +65,12 @@ class Paddle {
  }
 }
 
+declare module "#app" {
+ interface NuxtApp {
+ $paddle: Paddle;
+ }
+}
+
 export default defineNuxtPlugin(async () => {
  const { clientId, planId } = useRuntimeConfig().public.paddle;
 

app/plugins/toasts.client.ts

@@ -18,6 +18,12 @@ class Toasts {
  }
 }
 
+declare module "#app" {
+ interface NuxtApp {
+ $toasts: Toasts;
+ }
+}
+
 export default defineNuxtPlugin(() => {
  const toasts = new Toasts();
  return {

app/utils/helpers.ts

@@ -16,7 +16,7 @@ export const getGroups = () => {
 };
 
 export const getGroup = (i: number) => {
- return t(groups[i].key);
+ return t(groups[i]!.key);
 };
 
 export const formatDate = (time: number, showTime?: boolean) => {

package.json

@@ -65,6 +65,7 @@
  "typescript": "^5.5.2",
  "vitepress": "^1.2.3",
  "vue-draggable-next": "^2.2.1",
+ "vue-tsc": "^2.0.24",
  "wrangler": "^3.62.0",
  "zod": "^3.23.8"
  },