How to read configuration files and map them to typesafe models using Vue3?

I have a Vue3 app using TypeScript and want to load a configuration file and map it to a model.

Inside the public directory I added a subdirectory configurations with a config.json file

{
    "foo": "bar"
}

This json object should get mapped to the following model config.ts

export interface Config {
  foo: number;
}

Inside my Vue component I’m reading the configuration file from the public folder and try to map it to the model

<script lang="ts">
import { defineComponent } from "vue";
import { Config } from "./config";

export default defineComponent({
  setup() {
    fetch(process.env.BASE_URL + "configurations/config.json")
      .then((response: Response) => response.json())
      .then((jsonConfiguration: any) => {
        const config: Config = jsonConfiguration as Config;
        console.log(config.foo);
      });
  },
});
</script>

I would expect an exception, e.g.

“foo must be of type number”

but the logger simply logs “bar”, although it’s not a number.

What is a common (and typesafe) approach to

• Put configuration files somewhere during deployment (e.g. customer config)
• Read them
• Map the content to a given model

using Vue3?