Property response does not exist on type error

Comments

* Add json GET response for test runs in build

* Add json GET response for test case history

* Add page size parameter to query, limit page size

* Put max page size on constant

* Rename query params

* Add missing express-serve-static-core type import

See
DefinitelyTyped/DefinitelyTyped#40138 (comment)
for the reason for this import.

* Make helper function for page info, simplify testRuns variable

* Move db initialization to top scope

* Reorder top level declarations, use pageInfo helper in buildNumber get

* Fix outdated variable name

* Add todos with tracking issues

The motivating factor here was to resolve the typing incompatibilities
between `@types/express` and `@types/express-serve-static-core` which were
caused by mis-aligned package versions.

Ref: DefinitelyTyped/DefinitelyTyped#40138

Recently, the issue described in DefinitelyTyped/DefinitelyTyped#40138 (wherein the `Request` and `Response` types from express claim never to have heard of standard properties like `headers`) flared up in our remix tests. It turns out the culprit was that a few days ago, DefinitelyTyped removed TS 4.0 support from a number of packages[1], among them `@types/express-serve-static-core` (upon which `@types/express` depends).

Key changes in this fix:

- Lock `@types/express-serve-static-core` to the last version before this change.
- Add `@types/express` to `@sentry/remix`'s dev dependencies (where it should have been all along).
- Update all usages of `@types/express` to latest. (Not strictly necessary, but done as part of my debugging. Doesn't seem to break anything, and we might as well be up to date.)

[1] DefinitelyTyped/DefinitelyTyped#62240

Answer by Kendall Allison

This happens because when you start the application, The server is actually serving the bundles(JavaScript/CSS/HTML… output files) stored in the dist folder. Sometimes, when you make changes in your code, the changes don’t reflect in your bundles, which will lead to the server still using the old bundles. ,It usually happens when you develop Angular applications. To solve this just shut down the server & start it again:,

This behavior is also happening with ionic 4 CLI. So if a service is missing it’s members restart ionic serve will help.

– Dave Gööck
Feb 12 ’19 at 14:10

It usually happens when you develop Angular applications. To solve this just shut down the server & start it again:

$ ng serve 

Answer by Alexis Novak

This happens because when you start the application, The server is actually serving the bundles(JavaScript/CSS/HTML… output files) stored in the dist folder. Sometimes, when you make…,It usually happens when you develop Angular applications. To solve this just shut down the server & start it again:,Built on Forem — the open source software that powers DEV and other inclusive communities.

It usually happens when you develop Angular applications. To solve this just shut down the server & start it again:

$ ng serve 

Answer by Celine Manning

So what is going here? We have defined an empty object first and then tried to assign it the name property. This is just plain Javascript code, and Typescript should allow us to write that transparently. So why the error message?,If you enjoyed this post, have also a look also at other popular posts that you might find interesting:,We are going to understand it by providing another example, have a look at this and try to guess if it compiles, and if not what is the error message:

If we are not familiar with how the Typescript Type system works, we might be surprised to realize that this actually does not compile. So why is that? Let’s have a look at the error message we get:

Error:(54, 6) TS2339:Property 'name' does not exist on type '{}'.

If we hover over the user variable, we can see the inferred type. In Webstorm, if we click the variable and hit Ctrl+Shift+P, we get the following inferred type:

type: {}

Again it might be a bit surprising that this code does not compile. Here is the error message:

Error:(59, 8) TS2339:Property 'lessonCount' does not exist on type '{ name: string; }'.

And if we check what is the inferred type of the variable course, we get this type:

type: {name:string}

But the line course = named does not compile, and we get the following error:

Error:(73, 1) TS2322:Type 'Named' is not assignable to type 'Course'. Property 'lessonCount' is missing in type 'Named'.

Answer by Kamari Kelly

I know I can fix the error by declaring the variable.,When compiled/transpiled through TypeScript it generates error TS2339: Property ‘myclassvar’ does not exist on type ‘MyClass’.,Can it surely be a duplicate of the ticket called «Allow declaring class members within a constructor»?

class MyClass {
    constructor(){
        this.myclassvar = 'abc';
    }
}

Answer by Cooper Guerrero

While I was trying the below example – Passing recipe data with property binding I got the following error.,For example, to pass recipe data with property binding and use ngFor loop refer below section.,When I was trying to pass component data with property binding, I got the following typescript error : Property does not exist on value of type. This tutorial guides you how to resolve this error and also guides on how to pass recipe data with property binding.

While I was trying the below example – Passing recipe data with property binding I got the following error.

Angular is running in the development mode. Call enableProdMode() to enable the production mode.
client:52 [WDS] Live Reloading enabled.
client:150 [WDS] Errors while compiling. Reload prevented.
errors @ client:150
client:159 src/app/recipes/recipe-list/recipe-item/recipe-item.component.html:5:26 - error TS2339: Property 'recipes' does not exist on type 'RecipeItemComponent'.

5    *ngFor="let recipe of recipes">
                           ~~~~~~~

  src/app/recipes/recipe-list/recipe-item/recipe-item.component.ts:5:16
    5   templateUrl: './recipe-item.component.html',
                     ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Error occurs in the template of component RecipeItemComponent.

Note, the parent-child relationship for the below example is as follows.

--recipes
---- recipe.model.ts
---- recipe-detail
---- recipe-list
------ recipe-item

recipes/recipe-list/recipe-item/recipe-item.component.html

<a href="#" 
   class="list-group-item clearfix">
    <div class="pull-left">
        <h4 class="list-group-item-heading">{{ recipe.name }}</h4>
        <p class="list-group-item-text">{{ recipe.description }}</p>
    </div>
    <span class="pull-right">
        <img 
             [src] = "recipe.imagePath"
             alt="{{ recipe.name }}" 
             class="img-responsive" 
             style="max-height: 50px;"> 
    </span>
</a>

recipes/recipe-list/recipe-item/recipe-item.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-recipe-item',
  templateUrl: './recipe-item.component.html',
  styleUrls: ['./recipe-item.component.css']
})
export class RecipeItemComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

For example, to pass recipe data with property binding and use ngFor loop refer below section.

<div class="row">
    <div class="col-xs-12">
        <div class="pull-left">
            <h3>My Recipe List</h3>
        </div>   
    </div>
</div>
<hr>
<div class="row">
    <div class="col-xs-12">        
        <app-recipe-item 
          *ngFor="let recipe of recipes"
          [recipe] = "recipe"></app-recipe-item>
    </div>
</div>
<hr>
<div class="row">
    <div class="col-xs-12">
        <div class="pull-right">
            <button class="btn btn-success">Add Recipe</button>
        </div>        
    </div>
</div>

recipes/recipe-list/recipe-list.component.ts

import { Component, OnInit } from '@angular/core';
import { Recipe } from '../recipe.model';

@Component({
  selector: 'app-recipe-list',
  templateUrl: './recipe-list.component.html',
  styleUrls: ['./recipe-list.component.css']
})
export class RecipeListComponent implements OnInit {

  recipes: Recipe[] = [
    new Recipe('Recipe 1', 'This is our first recipe', 'https://lilluna.com/wp-content/uploads/2017/10/spanish-rice-resize-6.jpg'),
    new Recipe('Recipe 2', 'This is our second recipe', 'https://food.fnr.sndimg.com/content/dam/images/food/fullset/2020/07/14/0/FNK_20-Minute-Sausage-And-Pepper-Ravioli-Skillet_H_s4x3.jpg.rend.hgtvcom.441.331.suffix/1594757098344.jpeg'),
    new Recipe('Recipe 3', 'This is our third recipe', 'https://images.squarespace-cdn.com/content/v1/5c089f01f93fd410a92e642a/1589512502567-CNOAIL05BVT1TI0422P2/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/pheasant+back+burger+recipe.jpeg'),
    new Recipe('Recipe 4', 'This is our fourth recipe', 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQunf0MIpWZn3rjR-mo4u9_HKsL0Ud3SV8WTQ&usqp=CAU'),
    new Recipe('Recipe 5', 'This is our fifth recipe', 'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ_9l39e7G5y_ENz6hL6l5KhaJuroOrbzqs0Q&usqp=CAU')
  ];

  constructor() { }

  ngOnInit(): void {
  }

}

recipes/recipe.model.ts

export class Recipe {
    public name : string;
    public description : string;
    public imagePath : string;

    constructor(name : string, description : string, imagePath : string){
        this.name = name;
        this.description = description;
        this.imagePath = imagePath;
    } 
}

I figured out the reason why I was getting error Property ‘recipes’ does not exist on type ‘RecipeItemComponent’. I forgot to add the following statement in the RecipeItemComponent class.

  @Input() recipe: Recipe;

recipe-item.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { Recipe } from '../../recipe.model';

@Component({
  selector: 'app-recipe-item',
  templateUrl: './recipe-item.component.html',
  styleUrls: ['./recipe-item.component.css']
})
export class RecipeItemComponent implements OnInit {

  @Input() recipe: Recipe;

  constructor() { }

  ngOnInit(): void {
  }

}

Answer by Lincoln Giles

Property value does not exist on type EventTarget Example,Property ‘value’ does not exist on type ‘EventTarget’ Error is a common error in Angular. It shows up when you try to access the value property of an HTML element during event binding.,The solution is to cast the event.target to appropriate HTML element as shown below

This error is flagged by the TypeScript compiler.

The $event in both examples are of type HTMLElement. It can represent any HTML Element. Hence the value property is not guaranteed to exist in the $event.target.

$event

This error is flagged by the TypeScript compiler.

The $event in both examples are of type HTMLElement. It can represent any HTML Element. Hence the value property is not guaranteed to exist in the $event.target.

HTMLElement

This error is flagged by the TypeScript compiler.

The $event in both examples are of type HTMLElement. It can represent any HTML Element. Hence the value property is not guaranteed to exist in the $event.target.

value

This error is flagged by the TypeScript compiler.

The $event in both examples are of type HTMLElement. It can represent any HTML Element. Hence the value property is not guaranteed to exist in the $event.target.

$event.target

Answer by Harvey Brady

import { of } from 'rxjs';

Answer by Wayne Moody

The EventTarget type does not inherit from the Element type which is why TypeScript fails to recognize properties such as id, class, etc. that we would expect to exist on a typical Element object.,
Without setting the proper type for the event target, we’ll get the «Property ‘value’ does not exist on type ‘EventTarget'» error while trying to get the value property of the input element. Therefore, as discussed earlier, we need to assert the type we expect the event target to be like in the following way for example:
,
Alternatively, we can also do the following if we only need to use the target property from the event:

Let’s suppose we have the following HTML element:

<div id="foo"></div>

With the following code snippet we will receive the element above as an event target in our event listener:

const elem = document.getElementById('foo');

elem.addEventListener('test', function (e) {
    // Property 'id' does not exist on type 'EventTarget'.
    console.log(e.target.id); // 'foo'
}, false);

elem.dispatchEvent(new Event('test'));

To make TypeScript understand the correct type for the event target, we can specify it like so:

const elem = document.getElementById('foo');

elem.addEventListener('test', function (e) {
    const target = e.target as Element;
    console.log(target.id); // 'foo'
}, false);

elem.dispatchEvent(new Event('test'));

We can also inline it like so:

(e.target as Element).id

Alternatively, we can also do the following if we only need to use the target property from the event:

const elem = document.getElementById('foo');

elem.addEventListener('test', function (e: { target: Element }) {
    console.log(e.target.id); // 'foo'

    // Property 'type' does not exist on type '{ target: HTMLInputElement; }'.
    console.log(e.type);
}, false);

elem.dispatchEvent(new Event('test'));

As it is evident from the example above, after specifying the correct type for e.target it works fine. However, other properties (such as e.type, etc.) would throw a TypeScript error. If we need to access those other properties of the event as well, we could do so in the following way:

const elem = document.getElementById('foo');

elem.addEventListener('test', function (e: Event & { target: Element }) {
    console.log(e.target.id); // 'foo'

    // other Event object properties are recognized too now:
    console.log(e.type); // 'test'
}, false);

elem.dispatchEvent(new Event('test'));

We can, of course, get more specific with the type of the target events. For example, let’s suppose we wanted to get the value attribute of the following target input element:

<input id="foo" type="text" value="bar" />

Without setting the proper type for the event target, we’ll get the «Property 'value' does not exist on type 'EventTarget'» error while trying to get the value property of the input element. Therefore, as discussed earlier, we need to assert the type we expect the event target to be like in the following way for example:

const elem = document.getElementById('foo');

elem.addEventListener('test', function (e) {
    console.log((e.target as HTMLInputElement).value); // 'bar'
}, false);

elem.dispatchEvent(new Event('test'));

Assuming that the event target is <input type="file">, we can fix this error like so:

// Property 'files' does not exist on type 'EventTarget'.
e.target.files;

// possible fix:
(e.target as HTMLInputElement).files;

Assuming that the event target is an HTML audio/video element, we can fix this error like so:

// Property 'controls' does not exist on type 'EventTarget'.
e.target.controls;

// possible fixes:
(e.target as HTMLMediaElement).controls;
(e.target as HTMLVideoElement).controls;
(e.target as HTMLAudioElement).controls;

Here, using the HTMLMediaElement should be sufficient. However, we can also do the following when the target element can be either an audio or a video element:

type MediaType = HTMLVideoElement | HTMLAudioElement;
(e.target as MediaType).form;

Assuming that the event target is an HTML input element, we can fix this error like so:

// Property 'form' does not exist on type 'EventTarget'.
e.target.form;

// possible fix:
(e.target as HTMLInputElement).form;

Assuming that the event target is an HTML textarea element, we can fix this error like so:

// Property 'form' does not exist on type 'EventTarget'.
e.target.form;

// possible fix:
(e.target as HTMLTextAreaElement).form;

If the target element can be either an input or a textarea element, we can create a new intersection type like so:

// Property 'form' does not exist on type 'EventTarget'.
e.target.form;

// possible fix:
type InputType = HTMLInputElement | HTMLTextAreaElement;
(e.target as InputType).form;

Assuming that the event target is an HTML <input type="radio"> or <input type="checkbox"> element, we can fix this error like so:

// Property 'checked' does not exist on type 'EventTarget'.
e.target.checked;

// possible fix:
(e.target as HTMLInputElement).checked;

Assuming that the event target is an HTML <img> element, we can fix this error like so:

// Property 'src' does not exist on type 'EventTarget'.
e.target.src;

// possible fix:
(e.target as HTMLImageElement).src;

Assuming that the event target is an HTML <source> element, we can fix this error like so:

// Property 'src' does not exist on type 'EventTarget'.
e.target.src;

// possible fix:
(e.target as HTMLSourceElement).src;

The classList property exists on every HTML element, so we could use Element, HTMLElement or a more specific type (for e.g. HTMLInputElement, etc.). For example:

// Property 'classList' does not exist on type 'EventTarget'.
e.target.classList;

// possible fixes:
(e.target as Element).classList;
(e.target as HTMLElement).classList;
// etc.

The parentNode property exists on every HTML element, so we could use Element, HTMLElement or a more specific type (for e.g. HTMLInputElement, etc.). For example:

// Property 'parentNode' does not exist on type 'EventTarget'.
e.target.parentNode;

// possible fixes:
(e.target as Element).parentNode;
(e.target as HTMLElement).parentNode;
// etc.