How come TypeScript doesn't throw an error when I pass the incorrect type as a function parameter?

<template>
  <div class="app">
    Greetings, {{ name }}
    <button @click="updateName('Jane')">Modify Name</button>
  </div>
</template>

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

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

<style>

</style>

I am currently delving into TypeScript and one of its key features is enforcing "types". I have a method called 'updateName(name: string)' with a parameter 'name' that should be a string. However, when I pass a number or boolean as the argument in the template to the updateName function, it accepts them without throwing any errors.

Answer №1

If you're struggling with typescript extension unable to check types in the template section, consider downloading the Vuedx extension. This tool not only enables type checking in templates but also offers additional features:

With Vuedx extension, you get access to type checking, code completion, renaming, and refactoring specifically designed for .vue files by extending TypeScript functionalities.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Creating dynamic key objects in TypeScript with index signatures: A beginner's guide

How can the code be optimized to automatically initialize a new product type without adding extra lines of code? Failure to initialize the variable results in a syntax error. enum ProductType { PC = 'pc', LAPTOP = 'laptop', TV ...

Transform the object into an array of JSON with specified keys

Here is a sample object: { labels: ["city A", "city B"], data: ["Abc", "Bcd"] }; I am looking to transform the above object into an array of JSON like this: [ { labels: "city A", data: "Abc" }, { labels: "city B", data: "Bcd" }, ]; ...

What kind of null/undefined is being assumed?

system details: Visual Studio Code Version: 1.47.3 Typescript Version: 4.0.0-dev.20200727 tsconfig.js: "strict": true, code example: let x = null; // x is any type let y = x; // x is null type(why? x is any type on top), y is null type x = 1; / ...

I'm looking to replicate this navigation layout using Vuetify's 'navigation drawer' component. How can I go about doing this?

I'm currently utilizing Vuetify and implementing the Navigation Drawer component. I am attempting to replicate a similar navigation layout found here. The fixed menu on the left should maintain its width even when resizing the browser window. Upon ...

Passing a boolean value from the parent Stepper component to a child step in Angular

I am facing an issue with passing the boolean value isNewProposal from a parent Angular Material stepper component to its children steps. Despite using @Input(), the boolean remains undefined in the child component, even after being assigned a value (true ...

What is the best way to convert Angular form data into a POST request that the server can process?

In search of a solution to properly send data to the server in a format that it can accept. Currently, the title and descriptions are being successfully transmitted but the ratings are not coming through. It should be noted that there will be more than two ...

Having trouble using an external js file within a Vue.js project, attempted to add it in the mounted lifecycle hook to the head but encountering issues

Recently, I've been attempting to integrate an HTML admin template into vue cli. This template contains some JavaScript files that are causing me trouble. I noticed that they work properly when I first load the page, but as soon as I navigate from one ...

Utilizing the async pipe and subscribe method in Angular for handling multiple instances of *ngIf conditions

I'm currently experiencing an issue with my Angular setup and I am struggling to identify what the exact problem is. To provide some context before diving into the problem itself: Within a class called data-service.ts, there exists a method named "g ...

Troubleshooting Vue.js 2: Difficulty with Vue locating files stored in the /assets directory (v-for loop)

My Vue-cli 3 project with Webpack has the following folder structure: /public /src /assets p1.jpg p2.jpg App.vue main.js I have read that in order for Webpack to recognize the /assets directory, require() should be used in JavaScript files ...

I'm looking to achieve a horizontal wrapping alignment of cards in Vuetify 2. How can I accomplish this?

In my current project using vuetify 2, I am facing an issue where all my cards are displaying vertically within a col of width 7 instead of in a horizontal overflow. My goal is to have the cards arranged vertically with five counts on each row, and any ov ...

Tips for defining an array containing only one alias that has been declared in a type alias

Suppose I have declared a type alias in TypeScript like this: export type PlatformType = 'em' | 'ea' | 'hi'; How can I specify a property in an interface that only accepts an array containing one instance of each PlatformType ...

Implementing the "@use" directive for "sass:math" within a Vue component

In my Nuxt 2 project, I have designed a custom button component with the following CSS style: <style lang="scss"> .my-button { // Implementing various styles and effects here $height: 28px; height: $height; border-radius: ...

The functionality of the Checkbox is experiencing issues when used in conjunction with Bootstrap 5 and Vuejs

Here is a div showcasing an input with its label. However, there seems to be an issue where I am unable to click on the checkboxes. This code snippet serves as an illustration of utilizing Bootstrap 5 checkboxes within VueJs. <ul class="widget-lis ...

Referencing other styled-components in Typescript and React code bases

I'm attempting to replicate this code snippet found on https://styled-components.com/docs/advanced using TypeScript. const Link = styled.a` display: flex; align-items: center; padding: 5px 10px; background: papayawhip; color: palevioletred; ...

How can I populate an array using values from a different array in Angular?

I am facing an issue with populating three other arrays based on the property 'game type' from my array called 'my games'. Here is an example of the structure of the 'my games' array: hideScore: true, started: true, startedAt: ...

Unable to retrieve shared schema from a different schema.graphql file within the context of schema stitching

In my project, I have a user schema defined in a file named userSchema.graphql; id: String! userName: String! email: String! password: String! } In addition to the user schema, I also have separate schema files for login and register functionalit ...

Encountering an issue while utilizing Yarn to install dependencies

Encountering an issue while using yarn to install dependencies for my Vue project: Error: Unable to locate package "loader-utils@^1.4.0" required by "babel-loader@^8.0.5" on the "npm" registry. info For more information on this command, visit https://yarnp ...

Executing NestJS code after applying a pipe but before reaching the method handler

Is it possible to insert additional code after all the pipes have transformed but before the method handler is called? https://i.sstatic.net/IjQvv.png ...

What is the best way to successfully pass the desired value to the Angular 4 controller by clicking the button?

Here is some HTML code that I am working with: <div class="btn-group" role="group" aria-label="Basic example" *ngFor="let techlist of technology"> <button type="button" class="btn btn-secondary" (click)="resList()">{{techlist.TechnologyRo ...

Iterate through and remove elements within an array containing objects

Within my Vue.js application, I am working with an array of objects that I need to iterate through and display in the web browser. The array consists of four objects, but I only wish to show three based on a user's preference setting stored in a varia ...