Tips for configuring VSCode to display strictNullChecks Typescript errors

Whenever I compile my project using the specified tsconfig.json settings, an error occurs after enabling strictNullChecks: true.

{
    "version": "2.3.4",
    "compilerOptions": {
        "allowSyntheticDefaultImports": false,
        "removeComments": true,
        "strictNullChecks": true,
        "sourceMap": true,
        "jsx": "react",
        "target": "es5",
        "lib": [
            "es6",
            "dom",
            "scripthost"
        ],
        "outDir": "../build/"
    },
    "include": [
        "./*.ts",
        "./*.tsx",
        "./{client,mobile,server,shared,test,tools}/*.ts",
        "./{client,mobile,server,shared,test,tools}/*.tsx",
        "./{client,mobile,server,shared,test,tools}/**/*.ts",
        "./{client,mobile,server,shared,test,tools}/**/*.tsx",
        "./desktop/*.ts"
    ]
}

Despite not displaying any errors in VSCode itself.

In addition, the following vscode setting is configured:

"typescript.tsdk": "./node_modules/typescript/lib",

Everything functions correctly within VSCode except for the strictNullChecks error.

typescriptvisual-studio-code

Answer №1

Make sure to double check if the file is actually included in your tsconfig.json and not excluded by any rules.

Situations to consider:

  • Make sure you are including all nested folders by using **/*.ts instead of just *.ts or ./*.ts. This was the issue raised in the original question.
  • Watch out for any new include rule that may override the default setting of **/*.*.

Credit to Matt Bierner for providing helpful insights in the comments. However, since it was not officially posted as an answer, it may not be easily visible to others.

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

What is the best way to reproduce the appearance of a div from a web page when printing using typescript in Angular 4?

Whenever I try to print a div from the webpage, the elements of the div end up on the side of the print tab instead. How can I fix this issue? Below is my current print function: print(): void { let printContents, popupWin; printContents = document.getEl ...

angulartypescript

React, Typescript, and Material-UI 4 compilation dilemma

Out of the blue, my entire project collapsed and I can't seem to build it. I recently reset the project using a fresh create-react app build, which seemed fine initially. However, just yesterday, I encountered a similar issue but with a different erro ...

reactjstypescriptmaterial-ui

Dependency mismatch in main package.json and sub package.json

Imagine you have a project structure in Typescript set up as follows: root/ api/ package.json web/ package.json ... package.json In the main package.json file located in the root directory, Typescript is installed as a dependency to make ...

node.jstypescript

Error in Typescript: Array containing numbers is missing index property `0`

This is the code for my class: class Point{ coordinates: [number, number, number]; constructor(coordinates: [string, string, string]) { this.coordinates = coordinates.map((coordinate) => { return Math.round(parseFloat(coordinate) *100)/ ...

typescript

Testing Angular applications using Karma

After utilizing the yo angular 1 generator, it generated a landing page and some tests. However, I am facing an issue when trying to compile the code in VS as I receive an error stating that "module('fountainFooter');" is undefined. /// <refe ...

typescriptangular-mockgulp-karma

What would be a colloquial method to retrieve the ultimate result from the iterator function?

I've got a rather complex function that describes an iterative process. It goes something like this (I have lots of code not relevant to the question): function* functionName( config: Config, poolSize: number ): Generator<[State, Step], boo ...

javascripttypescriptiteratorgeneratoryield

I am facing issues with my filtering functionality on the Angular Typescript mat-table component

I am facing issues while trying to filter my table, the reaction is not correct and I can't seem to find where I went wrong. Here is the HTML part : <mat-form-field appearance="outline"> <mat-label>Search</mat-label> & ...

angulartypescriptfilterangular-filtersangular-material-table

"Exploring the process of creating a custom type by incorporating changes to an existing interface

One of the challenges I'm facing is defining an object based on a specific interface structure. The interface I have looks like this: interface Store { ReducerFoo : ReducerFooState; ReducerBar : ReducerBarState; ReducerTest : ReducerTestSt ...

typescript

Processing Data with JavaScript

I am new to working with JavaScript, coming from the Python world. I need some assistance. Currently, I am retrieving data from the back end that has the following structure: { "Airports": { "BCN": { "Arrivals": [ ...

javascriptarraystypescriptjavascript-objectsdata-manipulation

What is the reason for TypeScript not throwing an error when an interface is not implemented correctly?

In my current scenario, I have a class that implements an interface. Surprisingly, the TypeScript compiler does not throw an error if the class fails to include the required method specified by the interface; instead, it executes with an error. Is there a ...

typescripttypescript-typingstypescript-generics

Unexpected error encountered in Angular 2 beta: IE 10 displays 'Potentially unhandled rejection [3] SyntaxError: Expected'

Question regarding Angular 2 Beta: I am starting off with a general overview in the hopes that this issue is already recognized, and I simply overlooked something during my research. Initially, when Angular 2 Beta.0 was released, I managed to run a basic m ...

javascriptangularjsinternet-explorertypescriptangular

Guide to creating a universal interface using the generic class concept

I am in the process of developing a new augmented, generic interface that is based on an existing interface. The original interface sets out the properties that the object will possess (root). The enhanced type should also have these properties, but instea ...

typescripttypescript-generics

Number as the Key in Typescript Record<number, string> is allowed

As a newcomer to TypeScript, I am still learning a lot and came across this code snippet that involves the Record utility types, which is quite perplexing for me. The code functions correctly in the playground environment. const data = async (name: string ...

typescriptpromise

Enforce numerical input in input field by implementing a custom validator in Angular 2

After extensive research, I was unable to find a satisfactory solution to my query. Despite browsing through various Stack Overflow questions, none of them had an accepted answer. The desired functionality for the custom validator is to restrict input to ...

angulartypescriptecmascript-6angular-forms

Oops! There seems to be a hiccup: Unable to locate the control with the specified path: 'emails -> 0 -> email'

I am attempting to design a form incorporating a structure like this: formGroup formControl formControl formArray formGroup formControl formControl However, upon clicking the button to add reactive fields and submitting the form ...

angulartypescriptangular-reactive-formsangular-directiveformarray

ability to reach the sub-element dictionaries in typescript

class ProvinciaComponent extends CatalogoGenerico implements OnInit, AfterViewInit { page: Page = new Page({sort: {field: 'description', dir: 'asc'}}); dataSource: ProvinciaDataSource; columns = ['codprovi ...

javascriptangulartypescript

Updated the application to Angular 6 but encountered errors when attempting to run npm run build --prod. However, running the command npm run build --env=prod was executed without any issues

Running the command npm run build -- --prod results in the following error messages: 'PropertyName1' is private and can only be accessed within the 'AppComponent' class 'PropertyName2' does not exist in type 'AppCompo ...

jquerynode.jsangulartypescriptnpm

When validation fails, all fields are highlighted in the Div containing the FormGroup

In my Angular application, I need to utilize two fields - produced date and expiry date. It is important to note that I must use <div [formGroup]...> since this component will be called within other forms. Using the form tag here is not an option. ...

angulartypescriptvalidationformbuilderformgroups

Clickable Angular Material card

I am looking to make a mat-card component clickable by adding a routerlink. Here is my current component structure: <mat-card class="card" > <mat-card-content> <mat-card-title> {{title}}</mat-card-title> &l ...

javascriptangulartypescriptangular-material

The ngtools/webpack error is indicating that the app.module.ngfactory is missing

I'm currently attempting to utilize the @ngtools/webpack plugin in webpack 2 to create an Ahead-of-Time (AoT) version of my Angular 4 application. However, I am struggling to grasp the output generated by this plugin. Specifically, I have set up a ma ...

node.jsangulartypescriptwebpackangular2-aot