Verifying TypeScript errors before each commit in a Vue application

We have set up a git hook in our app using Husky for pre-commit actions.
Whenever someone commits code, it triggers the pre-commit code -

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

nvm use
npx lint-staged

And in the package.json file, we have -

"lint-staged": {
  "*.(js|ts|vue)": "eslint --cache --fix --max-warnings=0"
}

The current setup catches lint errors effectively but does not flag issues in the TypeScript codebase, such as calling a non-callable variable -

Even though this passes the lint check.

I understand that only lint is being run, but is there a straightforward way to also validate TypeScript? The only option currently available is running a build, which is too time-consuming for a commit hook.

Any suggestions or assistance on adding TypeScript validation will be highly appreciated. Thank you!

Answer №1

To implement type-checking in your project, consider creating a script within your package.json file that specifically focuses on this task. Then, utilize this script in your pre-commit hook to ensure that type-checking is performed before committing any changes.

"type-check": "vue-tsc --noEmit",

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

Vue Error: "the main template must have one and only one root element"

Exploring My Component Setup components exposed: <template> <!--<post-form/>--> <div class="wrapper"> <b-table :data="posts"> <template slot-scope="props"> <b-table-column fie ...

Tips on narrowing down the type of callback event depending on the specific event name

I've been working on implementing an event emitter, and the code is pretty straightforward. Currently, tsc is flagging the event type in eventHandler as 'ErrorEvent' | 'MessageEvent'. This seems to be causing some confusion, and I ...

Using Vue.js to route objects with routerlink

I have a bus list with icons representing different buses. When an icon is clicked, it should pass an object item from an API request. The structure of the item object is as follows: item: { "id": 1, "bus_number": "xx-xx-xxx", "bus_color": "black" } Belo ...

Is it possible to pass parameters using getters in Nuxt?

When attempting to pass the ID using $route.params.id in my getters method, it's not functioning as expected. Within my component, I have an object called blogs; I would like to store this.$route.params.id in blogId and then utilize it in my getters ...

The specified 'contactId' property cannot be found within the data type of 'any[]'

I am attempting to filter an array of objects named 'notes'. However, when I attempt this, I encounter the following error: Property 'contactId' does not exist on type 'any[]'. notes: Array < any > [] = []; currentNot ...

Toggle the visibility of an input field based on a checkbox's onchange event

I am facing a challenge where I need to display or hide an Input/Text field based on the state of a Checkbox. When the Checkbox is checked, I want to show the TextField, and when it is unchecked, I want to hide it. Below is the code snippet for this compon ...

Observables and the categorization of response data

Understanding Observables can be a bit tricky for me at times, leading to some confusion. Let's say we are subscribing to getData in order to retrieve JSON data asynchronously: this.getData(id) .subscribe(res => { console.log(data.ite ...

Is it possible to utilize the maximum value from the store in Vuelidate while implementing Vue?

Utilizing VUE and Vuelidate for form input validation, specifically within a modal popup that retrieves data through ...mapGetters from the store. When static values are set like this, it functions correctly : validations: { refundAmount: { ...

What is the best way to structure files within the css and js folders after running the build command in Vue-cli?

Vue-cli typically generates files in the following structure: - dist -- demo.html -- style.css -- file.commom.js -- file.commom.js.map -- file.umd.js -- file.umd.js.map -- file.umd.min.js -- file.umd.min.js.map However, I prefer to organize them this way: ...

Personalizing the display of Vuetify pagination controls

I've implemented the vuetify pagination with the following code snippet: <v-pagination v-model="page" :length="n" total-visible="7" ></v-pagination> When n is greater than 7, if you're on the first few pages, it will display b ...

When Firebase and ServiceWorker are initialized in a Vue CLI project, the mobile webpage appears empty

(I'm a beginner with VueJS and Firebase) Greetings! I've encountered a strange issue with my project. I've been attempting to integrate FCM (Firebase Cloud Messaging) into my Vue CLI project. Here is the code from my main.js that functions ...

Clicking on multiple instances of the same Vue.js component (popover) results in displaying identical data

Attempting to display an AJAX response in a popover shown by clicking an icon (a custom Vue component) brings about a challenge. The issue arises when there are multiple instances of this component, dynamically rendered through the v-for directive within a ...

Vue.js Issue: Image not properly redirected to backend server

Having an issue with my Vue app connecting to the backend using express. When I attempt to include an image in the request, it doesn't reach the backend properly. Strangely though, if I bypass express and connect directly from the Vue app, everything ...

When working with Angular 12, the target environment lacks support for dynamic import() syntax. Therefore, utilizing external type 'module' within a script is not feasible

My current issue involves using dynamic import code to bring in a js library during runtime: export class AuthService { constructor() { import('https://apis.google.com/js/platform.js').then(result => { console.log(resul ...

How is it possible for this for loop to function properly without the need to pass the incrementing variable

I managed to compile my code and it's working fine, but there's something interesting - the variable that should reference the incrementing value is not included as an argument in the for loop. var _loop2 = function _loop2() { var p = docume ...

Displaying information in a table format

How do I capture the titles of 'th' and 'td' elements in Vue.js when the save button is clicked? Here's my HTML code snippet: <tr> <th>Himalayan Salajit (Pakistan Onl ...

Ways to generate an Angular 7 component

Seeking guidance on creating an angular 7 component. I have forked a jsFiddle at this link: https://jsfiddle.net/gauravshrestha/fdxsywLv/. The chart in the fiddle allows data points to be dragged up and down. My goal is to convert this into a component whe ...

What steps can I take to stop a browser from triggering a ContextMenu event when a user performs a prolonged touch

While touch events are supported by browsers and may trigger mouse events, in certain industrial settings, it is preferred to handle all touch events as click events. Is there a way to globally disable context menu events generated by the browser? Alternat ...

The 'roleName' property is not found within the 'never' data type

// ** React Component and Library Imports import { useEffect, useState } from 'react' import Box, { BoxProps } from '@mui/material/Box' import Button from '@mui/material/Button' import Drawer from '@mui/material/Drawer&ap ...

Upon mounting, Vue.js 3 composable data is not available

Currently, I am utilizing Vue.js 3 along with a basic test composable: TEST COMPOSABLES Load post id: {{ i }} <div v-if="error"> <p>Uh oh! An error has occurred: {{ error.message }}</p> <button @click="r ...