VUE/TS: "x is of type "unknown"

[DevKame]

Good morning everyone, another day, another problem.

I want a parentComponent to provide a defined object:

App.vue:

interface GameData {
    total: [number, number];
    time: number;
    spectrum: [number, number];
}
const gameData: GameData = reactive({
    total: [8, 10],
    time: 500,
    spectrum: [1, 10],
});
provide("game-data", gameData);

One of its children TheGame.vue:

const gameData = inject("game-data");

onMounted(() => {
    console.clear();
    console.table(gameData);
    console.log("totalNumbers:", computeTotalDigits());
});

function computeTotalDigits(): number {
    return Math.floor(Math.random() * (gameData.total[1] - gameData.total[0] + 1) + gameData.total[0]);
}

As you can see here, i get a red highlight of my gameData (only within the function computeTotalDigits):

But here is the part that bugs me the most: it still works! Not only do i get a random number between the values of gameData.total, the console.log within onMounted shows me gameData object just how it should be. Why am i getting such a highlighting?

Might this just be weirdness from VSCode?

For test purposes i defined the Interface for gameData again:

TheGame.vue:

interface GameData {
    total: [number, number];
    time: number;
    spectrum: [number, number];
}
const gameData: GameData = inject("game-data");

onMounted(() => {
    console.clear();
    console.table(gameData);
    console.log("totalNumbers:", computeTotalDigits());
});

function computeTotalDigits(): number {
    return Math.floor(Math.random() * (gameData.total[1] - gameData.total[0] + 1) + gameData.total[0]);
}

With that, the red highlights within my function dissappear, but now gameData gets highlighted on creation, saying:

I assume, injecting stuff makes TS doubt, that there will come actual data, thats why solving it with an exclamation mark...

const gameData: GameData = inject("game-data")!;

Made the highlights disappear. Im happy that the warnings ended, but i dont know if this is the best practise solving it like this. Why was my IDE complaining and (more important) why did my code still run?! I expect Vue to NOT to run the app, if something is wrong.

[LinusBorg]

Here's the docs you need to read:

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