Why are they not statically typed?

Question

typescript

Good afternoon!

I ran into the following problem:
- I create a single component
- I initialize the interface
- for the sake of interest, I change the data type in the input array, I expect to see an error, but nothing happens, as if nothing had happened

PS The application installed create-nuxt-app typescript, the configs are not touched, like writing everything on the dock)

The data is fed to the component, it renders the whole thing

<input-fc
  v-for="input in inputData"
  :input="input"
  :key="input.id"
/>

<template>
  <div class="input">
    <input
      class="input__field"
      :type="input.type"
      :placeholder="input.placeholder"
    >
    <svg
      v-if="input.icon"
      class="icon"
    >
      <use xlink:href="~/static/icons/sprite.svg#search"></use>
    </svg>
  </div>
</template>

import Vue, { PropOptions } from 'vue'

interface InputData {
  id: number
  type: string
  placeholder: string
  icon?: string
}

export default Vue.extend({
  name: 'Input',
  props: {
    input: {
      type: Object,
      required: true
    } as PropOptions<InputData>
  },
})

input array

let inputData = [
  {
    id: 0,
    type: 'text',
    placeholder: 'Поиск в новостях',
    icon: 1
  }
];

In the example above, I expect to see a type mismatch in the icon key, because I expect a string, but I get a number, but I don’t see any errors in the console.

So what's the problem?

Answer 1

I didn't understand. Do you want the TS to swear at the browser console at runtime? O_o