When setting up a list in TypeScript, it does not verify the type of each element during initialization

In TypeScript, the code snippet below does not generate any error or warning, even though the 1st element does not adhere to the IFileStatus interface:

interface IFileStatus {   a: string;   b: number; }
let statuses: IFileStatus[] = [
                {
                    a: '123',
                    c: [],
                }];

However, if attempting to push the element, the expected error is displayed (a should be a string, b property is missing, and c does not exist and is not allowed).

statuses.push({
                a: 123,
                c: []
            });

Why is the initial code not showing the expected error?

Is there a way to enable validation of element types in the list during the initial declaration?

The version of TypeScript being used is 3.5.2

UPDATE #1+2: Both WebStorm and gulp-typescript report other errors as expected.

Below is the content of tsconfig.json:

{ "compilerOptions": { "declaration": false, "noEmitOnError": true, "noUnusedLocals": true,

    "noExternalResolve": true,
    "target": "es5",
    "lib": ["es6", "dom"],
    "baseUrl": "",
    "sourceMap": false,
    "typeRoots": [
        "./node_modules/@types",
        "./typings"
    ],
    "types": [
        "jasmine",
        "node"
    ],
    "paths": {
        "@ngtools/json-schema": [
            "./packages/@ngtools/json-schema/src"
        ],
        "@ngtools/logger": [
            "./packages/@ngtools/logger/src"
        ],
        "@ngtools/webpack": [
            "./packages/@ngtools/webpack/src"
        ]
    }
},
"exclude": [
    "packages/@angular/cli/blueprints/*/files/**/*",
    "dist/**/*",
    "node_modules/**/*",
    "tmp/**/*"
] }

Below is the content of tslint.json:

{
    "rules": {
        "max-line-length": [
            true,
            150
        ],
        "no-inferrable-types": true,
        "class-name": true,
        "comment-format": [
            true
        ],
        "indent": [
            true,
            "spaces"
        ],
        "eofline": true,
        "no-duplicate-variable": true,
        "no-eval": true,
        "no-arg": true,
        "no-internal-module": true,
        "no-trailing-whitespace": true,
        "no-bitwise": true,
        "no-unused-expression": true,
        "no-var-keyword": true,
        "no-consecutive-blank-lines": [true, 1],
        "triple-equals": true,
        "one-line": [
            true,
            "check-catch",
            "check-else",
            "check-open-brace",
            "check-whitespace"
        ],
        "quotemark": [
            true,
            "single",
            "avoid-escape"
        ],
        "semicolon": [
            true,
            "always"
        ],
        "typedef-whitespace": [
            true,
            {
                "call-signature": "nospace",
                "index-signature": "nospace",
                "parameter": "nospace",
                "property-declaration": "nospace",
                "variable-declaration": "nospace"
            }
        ],
        "curly": true,
        "variable-name": [
            true,
            "ban-keywords",
            "check-format",
            "allow-leading-underscore",
            "allow-pascal-case"
        ],
        "whitespace": [
            true,
            "check-branch",
            "check-decl",
            "check-operator",
            "check-separator",
            "check-type"
        ]
    }
}

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

Exploring Typescript's type narrowing capabilities through destructuring

This code snippet is encountering errors: type Example = { x: true, y: null, z: null } | { x: false, y: Error, z: null } | { x: false, y: null, z: { val: number} } function getExample(): Example { return { x: false, y: null, z: { val ...

Utilizing indexes to incorporate elements into an object array

I'm currently working on a project using Angular. I have an index coming from the HTML, and here is the code snippet: save(index){ //this method will be called on click of save button } In my component, I have an array structured like this: data = [{ ...

Is there a way to append a unique property with varying values to an array of objects in TypeScript?

For instance: items: object[] = [ {name: 'Backpack', weight: 2.5}, {name: 'Flashlight', weight: 0.8}, {name: 'Map', weight: 0.3} ]; I prefer the items to have an 'age' property as well: it ...

Error thrown when attempting to pass additional argument through Thunk Middleware in Redux Toolkit using TypeScript

I have a question regarding customizing the Middleware provided by Redux Toolkit to include an extra argument. This additional argument is an instance of a Repository. During store configuration, I append this additional argument: export const store = con ...

Can you explain the correct method for assigning types when destructuring the `callbackFn.currentValue` in conjunction with the `.reduce()` method? Thank you

I'm working with an array of arrays, for example: const input = [['A', 'X'], ['B', 'Y'],...]; In addition to that, I have two enums: enum MyMove { Rock = 'X', Paper = 'Y', Scis ...

What is preventing me from setting the User object to null in my Angular application?

Currently, I am working on a project in Angular and encountering a specific issue. In my service class, the structure looks like this: export class AuthService { authchange: new Subject<boolean>(); private user: User; registerUser(authD ...

problem encountered while attempting to drag and drop list elements on a web application utilizing dhtmlx 5.0 and wijmo grid

My web application utilizes Dhtmlx 5.0, Wijmo grid, and Typescript. One feature of the app is a dialog box that displays a list of items which can be rearranged using drag and drop functionality. This feature works without any issues on Windows PCs but enc ...

Tips for implementing dynamic properties in TypeScript modeling

Is there a way to avoid using ts-ignore when using object properties referenced as strings in TypeScript? For example, if I have something like: const myList = ['aaa', 'bbb', 'ccc']; const appContext = {}; for (let i=0; i< ...

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 ...

How can I implement a recursive nested template call in Angular 2?

Hopefully the title isn't too misleading, but here's my dilemma: I am in the process of building an Angular 2 app and utilizing nested templates in multiple instances. The problem I am facing involves "widgets" within my app that can contain oth ...

Is there a way to access the callback function's arguments and its return value from outside the function?

Is it possible to access both the callback function argument and the return value of a function that takes a callback function as an argument, outside of the function? Consider the following example with a function called func_a. function func_a(callback: ...

Exploring the functionality of multiple checkboxes in Next.js 14, the zod library, shadcn/ui components, and react-hook

I'm currently working on a form for a client where one of the questions requires the user to select checkboxes (or multiple checkboxes). I'm still learning about zod's schema so I'm facing some challenges in implementing this feature. I ...

Learn the process of importing data types from the Firebase Admin Node.js SDK

I am currently facing a challenge with importing the DecodedIDToken type from the https://firebase.google.com/docs/reference/admin/node/firebase-admin.auth.decodedidtoken. I need this type to be able to assign it to the value in the .then() callback when v ...

What is the significance of utilizing generic types as values within a generic class?

Why is the compiler giving an error for the following code T' only refers to a type, but is being used as a value here: class Factory<T> { create(TCreator: (new () => T)): T { return new TCreator(); } test(json: string) ...

The HTMLInputElement type does not contain a property named 'name'

function handleChange(e) { console.log(e.target.name); } <input name="bb" onChange={handleChange} /> Have you ever wondered why the HTMLInputElement element does not have a name attribute in React? ...

Using a tuple as a key in a Map in Typescript/Javascript can be a powerful

Encountered a strange bug in my code where I'm struggling to achieve constant time lookup from a Map when using a tuple as the key. Here is an example highlighting the issue, along with the workaround I am currently using to make it function: hello. ...

The click method in the Angular unit test does not seem to be executing successfully

I'm facing a seemingly simple issue where I am unable to confirm that a click handler is being triggered on my component. header.component.ts import { Component, EventEmitter, OnInit, Output } from '@angular/core'; @Component({ selecto ...

Tips for successfully transferring a JsonifyObject<T> from Remix's useLoaderData<typeof loader> to a function

Encountering a TypeScript error while trying to import JsonifyObject in the Remix 2.9.2 route code below... Argument of type 'JsonifyObject<IdAndDate>' is not assignable to parameter of type 'IdAndDate'. Struggling to figure ou ...

Ways to enhance a component by incorporating default properties in React/TypeScript

I am looking to enhance a React/TS component (specifically the @mui/x-data-grid DataGrid) by populating the classes prop with my own application classes. Initially, I thought about creating a new component called CustomDataGrid like this: import React fro ...

The argument type 'string' does not match the parameter type 'keyof Chainable' in Cypress JavaScript

Trying to incorporate a unique custom command in Cypress (commands.js file) as follows: Cypress.Commands.add("login", (email, password) => { cy.intercept('POST', '**/auth').as('login'); cy.visit(& ...