Typesafe injections #10447

DevKame · 2024-03-02T22:01:42Z

DevKame
Mar 2, 2024

I am using Vue with <script setup> and typescript.
In my application i want to have fixed element div.bar, that indicates how far the user has scrolled:

It (for some reason) works! What i wasted hours of my live is the reason why it works despite all the warnings of my IDE.

I could ignore the warnings as long as it works but i dont think this is good practise. So here is the code ( i will only post the snippets that are important in my opinion. Just in case i missed something i will post the complete code at the very end of this post):

App.vue:

// returns the percentage of how far the user has scrolled the window
const scrollProgress = computed(() => {
  const max = body.getBoundingClientRect().height - innerHeight;
  return (sval.value / max) * 100;
});
provide("progressvalue", scrollProgress);

TheBar.vue:

// receives the percentage
let progress = inject("progressvalue");
// watches the percentage
watch(progress, val => {
    let percent = progress;
    if(percent > 100) percent = 100;
    bar.value!.style.width = val + "%";
});

Now comes the fun part(keep in mind, the website just works as intended, its the IDE thats going on my nerves):

This is how my watch looks like:

It becomes even more fun for me when hovering over the parameter "progress":

i have no idea what it wants from me.
When hovering over percent, it says this error:

Those are the sources i researched so far, all without any help:

https://stackoverflow.com/questions/57722093/no-overload-matches-this-call-type-string-is-not-assignable-to-type-signals
https://javascript.plainenglish.io/how-to-use-typescript-with-vue-js-your-go-to-guide-7b40f40cc3c4
https://vuejs.org/guide/typescript/composition-api#typing-provide-inject
https://stackoverflow.com/questions/64449182/is-it-possible-to-watch-injected-property

Here are my questions:

Why is it still working?
when adding a type to inject like let progress = inject<number>("progressvalue"); it changes nothing
But when i add a non-null-assertion to it let progress = inject<number>("progressvalue")!; the percent variable isnt highlighted anymore. it recoginzes it as number. but, ironicly, it stil does NOT realize progress as number, what results in more confusion. How can percent be recognized as number, when its defined like percent = progress while progress STILL is throwing this error.

I also tried one of the solutions of the provided links, using InjectionKey (whereas i cannot full understand why i should define and import a complete Interface just for a simple number-type:

keys.ts:

import type { InjectionKey } from "vue";

interface Progress {
    percent: number;
}

export const ProgressKey: InjectionKey<Progress> = Symbol("Progress");

App.vue:

import { ProgressKey } from "./types/keys";
const scrollProgress = computed(() => {
  const max = body.getBoundingClientRect().height - innerHeight;
  return (sval.value / max) * 100;
});
provide(ProgressKey, {percent: scrollProgress.value});

TheBar.vue:

import { ProgressKey } from "@/types/keys";
let progress = inject(ProgressKey);
watch(progress, val => {
    let percent = progress;
    if(percent > 100) percent = 100;
    bar.value!.style.width = val + "%";
});

Ironicly, after using this fancy InjectionKey, the "animation" of the bar does not work anymore^^.
I also get a warning in devtools saying:

Im at the end of my ideas, let me know what i missed please.

The complete code:

App.vue:

<template>
  <the-bar></the-bar>
  <the-header></the-header>
  <the-news></the-news>
  <section class="space"></section>
</template>

<script lang="ts" setup>
import TheHeader from "./components/singleUse/TheHeader.vue";
import TheBar from "./components/singleUse/TheBar.vue";
import TheNews from "./components/singleUse/TheNews.vue";

import { onMounted, ref, computed, provide } from "vue";

// REFERENCE TO THE <body> ELEMENT
const body: HTMLBodyElement = document.querySelector("body")!;
// REFERENCE TO THE CURRENT scrollY - VALUE
const sval = ref<number>(scrollY);
// COMPUTES THE SCROLLPROGRESS OF THE DOCUMENT IN PERCENT
const scrollProgress = computed(() => {
  const max = body.getBoundingClientRect().height - innerHeight;
  return (sval.value / max) * 100;
});
//PROVIDING THE SCROLL PROGRESS FOR "FADING IN" OF OTHER COMPS
provide("progressvalue", scrollProgress);
// SET A SCROLL LISTENER TO THE WINDOW ELEMENT
onMounted(() => {
  window.addEventListener("scroll", e => {
    sval.value = scrollY;
  });
});
</script>

TheBar.vue:

<template>
    <aside>
        <div class="bar bg-tert" ref="bar"></div>
    </aside>
</template>

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

// REFERENCE TO THE <div> ELEMENT DISPLAYING THE CURRRENT SCROLLPROGRESS IN %
const bar = ref<HTMLDivElement>();
// INJECTED SCROLL PROGRESS OF THE DOCUMENT IN PERCENT
let progress = inject("progressvalue");
// CHANGE div.bar WITH WHEN SCROLLPROGRESS CHANGES
watch(progress, val => {
    let percent = progress;
    if(percent > 100) percent = 100;
    bar.value!.style.width = val + "%";
});
</script>

Answered by LinusBorg

Mar 4, 2024

firstElementChild could be an element that does not have this property.

So you would need to tell TS that it's an element that does. Not really related to Vue, rather TS types for the DOM

View full answer

LinusBorg · 2024-03-03T13:30:26Z

LinusBorg
Mar 3, 2024
Maintainer

Your problems, in order:

The type of an injection cannot be inferrered on itd own, you need to provide a hint to TS. Without a hint, its unknown. And you TS will complain when you try to watch an unknown value.
3.an injection can still be undefined at runtime, i.e. when the component is used in a place where the injection isn't provided from above. Thats why when you provide a type to inject, it will result in i.e. number | undefined - you need to either provide a runtime default value or use !
You defined the injection type as number. But you can't watch a number.
It still worked because you actually did not provide a number, but a (computed) ref returning a number. That can be watched at runtime
The way you used the injection key now provides a nonreactive object, which also can't be watched.

There's likely more details you missed, but those are the important ones, I think.

The easiest solution to you issues likely looks like this:

const progress= inject<ComputedRef<number>>('progressvalue')

4 replies

DevKame Mar 3, 2024
Author

i see, i stumbled upon a source that also said, that watcher need reactive objects like ref or reactive but it didnt help me much.
and by using inject<ComputedRef<number>> i basically tell Vue:
"recognize 'progress' not just as a number but rather as a reactive Element that contains a number so the watcher clearly has something valid to watch at."
Did i summarize that correctly?

What about functions? I have a simmilar problem where i defined a function in
App.vue:

const wait = (ms: number) => new Promise(resolve => setTimeout(resolve, ms));
provide("wait", wait);

and tried adjusting your solution to the original problem to this one too in
TheAbout.vue:

const wait = inject<ComputedRef<Function>>("wait")!;

async function openTextbox() {
    await wait(50);
    aboutTextbox.value!.classList.add("first-open");
    await wait(300);
    aboutTextbox.value!.classList.add("second-open");
}

Unfortunatly TS is still unhappy with me and shows me the following:

It still works as intended but hey, its not our standard of working is it?

Thank you again for your time and the tremendous quality of your answers!!!

LinusBorg Mar 3, 2024
Maintainer

i basically tell Vue:
"recognize 'progress' not just as a number but rather as a reactive Element that contains a number so the watcher clearly has something valid to watch at."
Did i summarize that correctly?

Correct, almost - you tell that to Typescript, in your IDE. Vue itself doesn't care about your TS types, it cares about what your code actually does at runtime.

Now about your new example, you provide just a function, not a computed, but then go on and tell TS that you inject a computed property returning a function. You lied to TS again, just the other way around than before. Hence why this is working at runtime, but TS is complaining in your IDE.

The correct type would be:

const wait = inject<() => Promise<any>)>("wait")!;

DevKame Mar 4, 2024
Author

Thank you again for your professional answers, both worked perfectly!
I totally remember why i hated typescript, its seductive to just ignore TS Errors as long as it works on runtime.

Is there any valid source for searching for typing of Vue-Specific datas? Because even the official docs just mention this issue vague.

For example, a new problem occured 😆 :

<script lang="ts" setup>
import { ref } from 'vue';
const btnWrapper = ref<HTMLDivElement>();

function scrollLeftTop() {
    const firstButton = btnWrapper.value!.firstElementChild!;
    const offsetTop = firstButton.offsetTop;
    console.log(firstButton);
    console.log(offsetTop);
}
</script>

TS cries about offsetTop not beeing a property but (you guessed it) it works on runtime.

I get the expected value in my console, how do i manage that?

LinusBorg Mar 4, 2024
Maintainer

firstElementChild could be an element that does not have this property.

So you would need to tell TS that it's an element that does. Not really related to Vue, rather TS types for the DOM

Answer selected by DevKame

Vue

Typesafe injections #10447

Uh oh!

Uh oh!

DevKame Mar 2, 2024

Replies: 1 comment · 4 replies

Uh oh!

Uh oh!

LinusBorg Mar 3, 2024 Maintainer

Uh oh!

Uh oh!

DevKame Mar 3, 2024 Author

Uh oh!

Uh oh!

LinusBorg Mar 3, 2024 Maintainer

Uh oh!

DevKame Mar 4, 2024 Author

Uh oh!

Uh oh!

LinusBorg Mar 4, 2024 Maintainer

DevKame
Mar 2, 2024

Replies: 1 comment 4 replies

LinusBorg
Mar 3, 2024
Maintainer

DevKame Mar 3, 2024
Author

LinusBorg Mar 3, 2024
Maintainer

DevKame Mar 4, 2024
Author

LinusBorg Mar 4, 2024
Maintainer