What is the reason behind Typescript errors vanishing after including onchange in the code?

When using VSCode with appropriate settings enabled, the error would be displayed in the following .html file:

<!DOCTYPE html>
<html>
<body>
    <div>
        <select>
        </select>
    </div>

    <script>
        // @ts-check

        /**
         * @type {string}
         */
        const data = 0;
    </script>
</body>
</html>

Surprisingly, adding an empty onchange attribute like this makes the diagnostic disappear:

        <select onchange="">

Although you can still view variable types by hovering over them, no diagnostics are shown. The question then arises - why does this happen?

typescriptvisual-studio-codejsdoc

Answer №1

It appears that the behavior of VS Code in relation to JavaScript validation is quite specific. According to observations made in comments, it seems that for JavaScript validation to occur, along with setting the html.validate.scripts configuration in VS Code to true, the first block of JavaScript code within the HTML document must begin with a @ts-check directive comment.

To delve deeper into understanding how this process works within VS Code, one can refer to the source code and trace through various sections:

The interesting aspect here revolves around the implementation of script-valued attributes and the usage of the getEmbeddedDocument function defined in embeddedSupport.ts. Notably, there exists an optional parameter named ignoreAttributeValues that remains unutilized in the current context.

In order to ensure successful execution of JS checking alongside script-valued attributes, it is advised to include a script element early in the HTML file, preferably placed near the top within the head element, containing a @ts-check directive comment like so: 

<script>//@ts-check</script>
.

Additional information on TypeScript's recognition of the @ts-check directive can be found at this resource, specifying that the directive must reside at the commencement of a JavaScript file for proper detection.

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

The state is accurate despite receiving null as the return value

I'm feeling a bit lost here. I have a main component that is subscribing to and fetching data (I'm using the redux dev tools to monitor it and it's updating the state as needed). In component A, I am doing: public FDC$ = this.store.pipe(sel ...

angulartypescript

TS2322: Subclass missing property, yet it still exists

In my project, I have defined two Angular 4 component classes. The first class, referred to as the superclass: export class SectionComponent implements OnInit { slides: SlideComponent[]; constructor() { } ngOnInit() { } } And then there&apo ...

angulartypescript

using outlines for FontAwesome icons in React Native

I am struggling to use the fontAwesome + icon in the middle of a circle as one item. I have tried placing it inside a circle icon, but it doesn't seem to work properly. import IconFA from 'react-native-vector-icons/FontAwesome'; < ...

javascriptcssreactjstypescriptreact-native

Utilizing Typescript to retrieve a specific object property using square brackets and a variable

How can we correctly access a JavaScript object in TypeScript using variable evaluation with bracket notation, such as myObject[myVariable], when the value of the variable is unknown initially? In the code below, an error occurs due to the uncertainty of ...

typescript

"Navigate to another screen with the FlatList component upon press, displaying specific

I've created a flatlist of countries with a search filter using an API. I need help implementing a feature where clicking on a country's name in the list redirects to a screen that displays the country's name and number of cases. The screen ...

typescriptreact-nativereact-native-flatlistonpress

What is the best way to emphasize specific months and years in an Angular Material datepicker?

I have an array of days, which can be from any year. I am attempting to customize the Angular Material datepicker to highlight specific months and years in the selection views based on the array of days. .html <input [matDatepicker]="picker" ...

htmlcssangulartypescriptmat-datepicker

Unable to import necessary modules within my React TypeScript project

I am currently building a React/Express application with TypeScript. While I'm not very familiar with it, I've decided to use it to expand my knowledge. However, I've encountered an issue when trying to import one component into another comp ...

javascriptnode.jsreactjstypescriptnode-modules

Guide to iterating through different endpoints in a predetermined sequence

I am facing a challenge with testing various endpoints using different login credentials. When looping through the endpoints, the results are not appearing in the sequential order due to asynchronous nature. My goal is to iterate through each endpoint wit ...

angularjsangulartypescript

Testing the NestJS service with a real database comparison

I'm looking to test my Nest service using a real database, rather than just a mock object. While I understand that most unit tests should use mocks, there are times when testing against the actual database is more appropriate. After scouring through ...

javascriptnode.jstypescriptnestjstypeorm

NodeJS can be used to convert JSON data into an XLSX file format and allow for

I am currently working on a project in nodejs where I need to convert JSON data into XLSX format and then download it to the client's browser. I have been using the XLSX npm module to successfully convert the JSON data into a Workbook, however, I am f ...

node.jstypescriptexpressxlsx

Building a Model Class with redux-orm and TypeScriptCreating a new Model Class with

I've been successfully using redux-orm with JavaScript, however, I'm facing issues when trying to convert my code to TypeScript. Even though I have already implemented the render() method in my Folder Model Class, the TypeScript transpiler is sh ...

reactjstypescriptreduxredux-orm

Revamp the Next.js and TypeScript API for improved efficiency

I am new to using Next.js and TypeScript, and I would like to refactor my code to improve data fetching speed. Currently, I have a file called dashboard.tsx with the following code: import Layout from "@/layouts/layout"; import React, { useC ...

typescriptnext.js

Encountering an issue: The type '{ children: Element; }' does not share any properties with type 'IntrinsicAttributes & CookieConsentProviderProps'

I recently updated my packages and now I'm encountering this error. Is there a way to resolve it without reverting back to the previous versions of the packages? I've come across similar errors reported by others, but none of the suggested solut ...

reactjstypescriptnext.js

The terminal in VS CODE is not able to detect Stripe

When I attempt to run the command 'stripe listen' in the VS Code terminal, an error is thrown: The term 'stripe' is not recognized as the name of a cmdlet, function, script file, or operable program. Please check the spelling of the ...

javascriptvisual-studio-codenext.jsstripe-payments

The Angular Ivy strictTemplates error message states that the type 'Event' cannot be assigned to the type 'InputEvent' parameter

I'm feeling lost trying to figure out what's wrong with this code snippet: <input #quantity type="number" matInput formControlName="quantity" (input)="onQuantity($event, i)" placeholder="Quantity"/> onQuantity(event: InputEvent, i: number ...

htmlangulartypescriptangular-ivy

What is a more efficient way to write nested subscribe in Angular?

I am a beginner with RxJS and I'm interested in learning how to write clean code using it. I currently have a nested subscription that I've been trying to refactor without success. firstMethod() { this.testMethod(name) console.log(this.curren ...

javascriptangulartypescriptrxjs

What is the correct way to declare a variable with a generic type parameter?

Exploring the following code snippet that showcases a React component being defined with a type argument named TRow: function DataTable<TRow> ({ rows: TRow[] }) { return ( ) } Prior to this implementation, ES6 was utilized and components were c ...

genericstypescriptlambda

The Vue event was triggered, however there was no response

My current project consists of a Typescript + Vue application with one parent object and one component, which is the pager: //pager.ts @Component({ name: "pager", template: require("text!./pager.html") }) export default class Pager extends Vue { ...

typescriptvue.jsvuejs2vue-component

React/Typescript - Managing various event types within a unified onChange function

In my current project, I am working with a form that includes various types of input fields using the mui library. My goal is to gather the values from these diverse input components and store them in a single state within a Grandparent component. While I ...

reactjstypescriptnext.jsmaterial-ui

Using TypeScript to define a constant array as a type

I've hit a roadblock in my typescript project while trying to define a suitable type. Here's the setup: Within my project, I have the following constant: export const PROPERTYOPTIONS = [ { value: "tag", label: "Tag" }, { ...

reactjstypescript