Why typescript not giving any error when i pass wrong type in function parameter?

Question

<template>
  <div class="app">
    Hello, {{ name }}
    <button @click="changeName(1)">Change Name</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
  components: {
  },
    data(){
      return {
        name:'Link'
      }
    },
    methods: {
      changeName(name: string){
        this.name = name
      }
    }
});
</script>

<style>

</style>

I am trying to learn Typescript and one of the thing that i know about typescript is it checks "type". I have a methods 'changeName(name: string)" with argument "name" that should be string. But when i pass number or boolean from template changeName function parameter. It accepts and doesn't even throw an error.

Answer 1

The typescript extension cannot check types in template section, so you should install the Vuedx extension which allows you to check types in template and it comes with other features :

This extension provides features like type checking, completion, renaming and refactoring for .vue files by extending TypeScript extension.

Answer 2

Install Extension Vscode: Vue Language Features (Volar)