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

Discovering the specific value within an array of various objects through Angular

Within a list of objects, I am specifically looking to extract the name "sample 4" from the second set of objects with an ID of 2. How can this value be retrieved using JavaScript or Angular? {Id: 1, name: sample 1, code: "type", order: 1} {Id: 1, name: ...

When setupFilesAfterEnv is added, mock functions may not function properly in .test files

Upon including setupFilesAfterEnv in the jest.config.js like this: module.exports = { preset: 'ts-jest', testEnvironment: 'node', setupFilesAfterEnv: ["./test/setupAfterEnv.ts"] } The mock functions seem to sto ...

Implementing Angular 4 to fetch information from a JSON file

As a beginner in Angular, my current task involves loading data from a JSON file upon click, which I have successfully achieved so far. However, I am facing an issue where I'm unable to load the first JSON object before clicking, meaning that I want ...

Adding a unique font to the themeprovider within styled components: A step-by-step guide

In the process of developing a React application using material-ui styled-components along with TypeScript. The task at hand is to incorporate a custom font into my styled components, but I'm facing challenges in making it functional. My initial ste ...

Looking for a youtube.d.ts file to integrate the youtube-iframe-api with Angular 2?

My current challenge involves implementing the youtube iframe api for seamless video snippet display and control within an Angular 2 application. Maintaining TypeScript's type concept is crucial for both the webpack compiler and myself :). A brief ov ...

What is the process of transforming a basic JavaScript function into a TypeScript function?

As a Java developer diving into TypeScript for frontend development, I've encountered a simple JavaScript code snippet that I'd like to convert to TypeScript. The original JavaScript code is: let numbers = [123, 234, 345, 456, 567]; let names = ...

typescript undefined subscription to observable

After making an http request to fetch some data, I am facing issues in displaying it as intended. The dropdown select for entriesPerPage, and the left and right cursors for switching page in pagination are working fine. However, upon switching a page, I en ...

Exploring Next.js 13: Enhancing Security with HTTP Cookie Authentication

I'm currently working on a web app using Next.js version 13.4.7. I am setting up authentication with JWT tokens from the backend (Laravel) and attempting to store them in http-only cookies. Within a file named cookie.ts, which contains helper functio ...

The number in Typescript should fall between 0 and 1, inclusive

Is there a method in Typescript that guarantees the value of a number will be less than or greater than a certain threshold? Currently, it permits the specification of a range of values, but I'm unsure about comparison. This is similar to what I have ...

Yet another error: TS2511 - Unable to instantiate an abstract class

My issue is very similar to the one mentioned in this thread: Typescript: instance of an abstract class, however, there are some distinctions. If it is indeed a duplicate problem, I would appreciate a clear explanation as I am currently unable to resolve t ...

A guide on incorporating JavaScript variables within a GraphQL-tag mutation

I'm having trouble consistently using javascript variables inside graphql-tag queries and mutations when setting up an apollo server. Here's a specific issue I've encountered: gql` mutation SetDeviceFirebaseToken { SetDeviceFirebaseTok ...

What is the best way to provide transformers in ts-node?

Currently, I am in the process of creating my own compiler for Typescript because I require the usage of transformers. Within our workflow, we utilize ts-node to execute specific files (such as individual tests), and it is essential that these transformer ...

Getting the Correct Nested Type in TypeScript Conditional Types for Iterables

In my quest to create a type called GoodNestedIterableType, I aim to transform something from Iterable<Iterable<A>> to just A. To illustrate, let's consider the following code snippet: const arr = [ [1, 2, 3], [4, 5, 6], ] type GoodN ...

Utilize the useTheme type from Emotion Js within ReactJs using Typescript

Greetings! As a newcomer to typescript, I find myself with a query regarding the use of Theme in emotionJs. Here's the snippet of code that has been causing me some trouble: const GlobalStyle: React.FC = (props) => { const Theme = useTheme(); ...

Collaborate and reuse Typescript code across various Node projects

Imagine we have a project structured like this: webapps ProjectA SomeClass.ts Package.json ProjectB SomeClass.ts Package.json Common LoggingClass.ts Package.json The Common "LoggingClass" needs to import a module from NPM. Let's say that ...

The error message "TypeError: (0 , N.createContext) is not a function" indicates that

I'm currently in the process of developing a cutting-edge application using Next.js 14, TypeScript, and Telegram Open Network. However, I've hit a roadblock while attempting to incorporate the TONConnectUIProvider at the root of my app. Upon run ...

What steps should I take to resolve the "Expected expression. ts(1109)" error in VSCode?

When attempting to open a ReactJS file, I came across the VSCode error "Expression expected. ts(1009)". The keywords do and if were highlighted in red. Interestingly, the code runs smoothly in my local development environment and compiles without any issue ...

A guide to updating a table in Angular using an API response

My form allows me to select events from a drop-down list and choose a date. Depending on the selected date, it retrieves the number of events that occurred on that specific date. If I select an event and a date where events took place, the "All Events" sec ...

employing a variable within a function that is nested within another function

I'm encountering an issue where I am using a variable within a nested function. After assigning a value to it, I pass it to the parent function. However, when I call the function, nothing is displayed. function checkUserExists(identifier) { let user ...

On production, Heroku fails to load JavaScript files, only allowing CSS files to be loaded. However, the files load successfully when

I've been struggling to find a solution to my problem, so I'm reaching out for some help. I am in the process of deploying my node (express) app to Heroku, but I've encountered an issue where only CSS files from my public folder are being t ...