What is the reason behind VS Code not showing an error when executing the command line tsc shows an error message?

Deliberately introducing a typo in my code results in an error. Here is the corrected code:

declare const State: TwineState;

If I remove the last character and then run tsc on the command line, it throws this error:

tsc/prod.spec.ts:7:22 - error TS2304: Cannot find name 'TwineStat'.

7 declare const State: TwineStat;

Interestingly, Visual Studio Code fails to detect any errors.

https://i.stack.imgur.com/STKLn.png

How can I configure my editor to identify the same errors that the tsc command does? Being relatively new to these technologies, I'm not sure what details would aid in troubleshooting, but here are my configuration files:

package.json:

{
...
  "version": "1.0.0",
  "main": ".webpack/main",
  "scripts": {
    "compile-typescript": "tsc && cp tscbuild/prod.js story/",
    "lint": "eslint tsc/** --fix",
    "test": "npm run lint && ts-node node_modules/jasmine/bin/jasmine && npm run compile-typescript ..."
  },
  "keywords": [],
...
  "devDependencies": {
    "@types/jasmine": "^3.5.9",
    "@types/node": "^13.9.1",
    "@typescript-eslint/eslint-plugin": "^2.24.0",
    "@typescript-eslint/parser": "^2.24.0",
    "eslint": "^6.8.0",
    "eslint-plugin-testcafe": "^0.2.1",
    "jasmine": "^3.5.0",
    "testcafe": "^1.8.2",
    "ts-node": "^8.6.2",
    "typescript": "^3.7.0"
  },
  "dependencies": {}
}

tsconfig.json:

{
  "compilerOptions": {
    /* Basic Options */
    // "incremental": true,                   /* Enable incremental compilation */
    "target": "es5",                          /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                     /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "lib": ["es6","dom"],                           /* Specify library files to be included in the compilation. */
    "allowJs": false,                         /* Allow javascript files to be compiled. */
    .
    .
    .

.eslintrc.js:

module.exports = {
  env: {
    browser: true,
    es6: true,
    node: true,
    jasmine: true,
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:testcafe/recommended"
  ],
  globals: {
    Atomics: "readonly",
    SharedArrayBuffer: "readonly"
  },
  parser: "@typescript-eslint/parser",
  parserOptions: {
    ecmaVersion: 2018,
    project: "./tsconfig.json",
  },
  plugins: ["@typescript-eslint", "testcafe"],
  rules: {
    quotes: ["error", "double"],
    "no-plusplus": ["off"],
    "@typescript-eslint/camelcase": ["off"]
  }
};

Answer №1

There could be multiple reasons why this issue occurs. It has happened to me before and I cannot pinpoint the exact cause, but one possibility is that the incremental feature/flag in the tsconfig.json file might be storing outdated data, leading to inconsistencies in transpilation results. It seems like Visual Studio Code may not utilize this cached data while the command line does.

To troubleshoot and resolve this problem, there are two approaches you can take. Firstly, try setting the incremental flag in the tsconfig.json to false. This should display errors on the command line. However, upon reverting the flag back to true, the errors may vanish. Another option is to delete the outDir directory, commonly named dist/ or build/.

An unverified third alternative involves deleting the tsconfig.tsbuildinfo file located within the outDir. If you cannot find it there, check the location specified by the tsBuildInfoFile property in tsconfig.json. Modifying this setting may redirect the file to a different directory.

Answer №2

One reason the reporting of errors in VS Code differs from that of the command line tool tsc could be due to how VS Code applies your changes even before you save them.

For instance, if you make changes to an interface but do not save the file, VS Code might flag errors related to incompatible types, whereas tsc is using the original saved version of the file without any modifications and therefore does not detect any issues. This can be particularly problematic with pinned files that have subtle modified-icons, which may go unnoticed, as I found out the hard way.

Answer №3

Instead of running the TypeScript compiler directly with tsc, I decided to create a custom script in my package.json file.

"scripts": {
    ....
    "type-check": "tsc --noEmit",
},

I'm not entirely sure why this approach works for me.

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

Problem with Angular 5: Data Binding Issue未知EncodingException

Struggling to understand... I want to make a GET request to my service to retrieve the specific hardware associated with the barcode I scanned - this part is working correctly. The hardware information is returned as an object that looks like this -> How ...

Switching between different types of generic functions in typescript

Is there a way to convert between these two types of generic functions: type Foo=<S>(a: S) => S type FooReturnType = ReturnType<Foo> // unknown type Bar<S> = { (a: S): S } type BarReturnType = ReturnType<Bar<string> ...

Warning: The attribute 'EyeDropper' is not recognized within the context of 'Window & typeof globalThis'

Attempting to utilize "window.EyeDropper" in a project that combines vue2 and TypeScript. When writing the following code: console.log(window.EyeDropper); An error message is generated by my Vetur plugin: Property 'EyeDropper' does not exist on ...

The issue of resolving custom paths imports in Typescript has been a persistent challenge for developers

Currently, I am developing a project in PHP and utilizing Typescript. I aim to follow a monorepo pattern similar to what NX offers. However, I am facing challenges when attempting to compile typescript for each of my apps. Here is the current structure of ...

CDK Error: Unable to locate MethodResponse in AWS API Gateway configuration

I'm facing an issue in vscode while trying to access the MethodResponse interface from apigateway. Unfortunately, I'm getting an error message: The type 'typeof import(".../node_modules/aws-cdk-lib/aws-apigateway/index")' d ...

Using Typescript alongside Angular 1.6 and browserify for your development needs

Currently navigating the world of working with Angular types in TypeScript and bundling code using Browserify. After following a TypeScript guide related to Gulp, I utilized npm to install the Angular types and put together this simple ts file. import * a ...

Utilize Function type while preserving generics

Is there a way in Typescript to reference a function type with generics without instantiating them, but rather passing them to be instantiated when the function is called? For instance, consider the following type: type FetchPageData<T> = (client : ...

Initiate the input change event manually

Struggling with creating a custom counter input component where the input value is controlled by custom increment/decrement buttons. Desired output: Content projection will be used to expose the input for form usage and adding properties like a regular n ...

Contrasting @Input with Dependency Injection in Angular 10

Is there a way to pass values from a parent component to a child component without using the @Input decorator? I'm thinking about creating an instance of the Parent class in the constructor (Dependency Injection) and then accessing the variable value ...

Exploring the usage of array map parameters in rxjs 6 when combined with withLatestFrom

Prior to Rxjs 6, we were able to achieve the following: interface TypeA { payload: any; } source$.pipe( withLatestFrom(source2$, (source1: TypeA, source2: TypeB) => ({ payload: source1.payload, source2 }) ), ) In the resultSelector method ...

The TypeScript namespace does not exist or cannot be located

Currently, I am working on coding in TypeScript. The specific code pertains to an Angular 2 application, but the main focus of my inquiry lies within TypeScript itself. Within my project, there are certain files that contain various models, such as the exa ...

Having trouble with Angular routing in a .NET MVC 5 application with Angular 6?

I have integrated an Angular 6 application into an existing .NET MVC 5 application. A fallback route was set up in the MVC app (RouteConfig.cs) to direct "unknown" routes to the Angular app's router module (app.routes.ts). However, it seems that the r ...

Strategies for iterating over an array in React with TypeScript

I'm currently working on looping through an array to display its values. Here's the code I have: ineligiblePointsTableRows() { return this.state[PointsTableType.INELIGIBLE].contracts.map(contract => { return { applied: (&l ...

After the form submission, my Next.js component keeps rendering repeatedly in a cumulative manner

I am currently working on a memory game application using Next.js, Node.js, and Express.js. I seem to be encountering an issue specifically with the login page. Initially, there are no issues when submitting the form for the first time. However, after the ...

Problem with Angular Slider

I'm in the process of creating a carousel component in Angular, but I'm facing an issue where the carousel is not appearing as it should. Below is the code for my carousel component. carousel.component.html: <div class="carousel"> ...

Navigating from a Card to a new View in Angular

I am currently developing a project using Angular (latest version). Within my application, I have the functionality to dynamically generate bootstrap cards from an Order Array and display them in my "Order-Item-Component through its respective template. ...

There seems to be an issue with AppModule in your code. The error message states that it is not recognized as an NgModule and the problem

After upgrading to node 6, angular 4, typescript 2.3.2, and @angular/cli 1.02, I meticulously followed the steps outlined in the Guide for updating @angular/cli. I will include my entire package.json below in case there are any relevant details. The specif ...

Insufficient attributes in TypeScript component for React application

Developing with React import {Input} from '@xxx/forms'; <Input label="account Name" name="account"/> Type Definition for input import React, { Ref } from 'react'; import { InputProps as UITKInputProps } from ...

Clicking on an element- how can I find the nearest element?

Encountering an issue with my next js app where I am attempting to assign a class to an element upon clicking a button. The problem arises when trying to access the next div using the following code snippet: console.log(e.target.closest('.request_quot ...

After defining Partial<T>, encountering an error trying to access an undefined property is unexpected

In my function, I am attempting to standardize certain values by specifying the whole function type as Partial. However, despite declaring the interaction variable as Partial Type, I keep encountering the error message saying "Cannot read property endTime ...