error TS2339: Property 'email' does not exist on type 'Object'

Question

I'm using angular 5 and i got an error, heres the code :

signIn(provider) {
    this._auth.login(provider).subscribe(
      (data) => {
        console.log(data);
        this.hideForm = false;

        this.emaill = data.email;
        this.nom = data.last_name;
        this.prenom = data.first_name;
        this.profileImage = data.image;
    })
}

The error is :

src/app/authentification/authentification.component.ts(34,28): error TS2339: Property 'email' does not exist on type 'Object'. src/app/authentification/authentification.component.ts(35,25): error TS2339: Property 'last_name' does not exist on type 'Object'. src/app/authentification/authentification.component.ts(36,28): error TS2339: Property 'first_name' does not exist on type 'Object'. src/app/authentification/authentification.component.ts(37,34): error TS2339: Property 'image' does not exist on type 'Object'.

Answer 1

I had similar problem while using ViewChild decorator, so what I did was, I created a property by the name childMsg in my parent component by using which I was able to access the key:

    @ViewChild(PostListComponent)
  childComp!: { childMsg: string };

  message!: string;

  ngAfterViewInit(): void {
    this.message = this.childComp.childMsg;
    console.log(this.message);
  }

I hope this helps!

Answer 2

Doing data: any works but it is definitely not the right way. Defeats the whole purpose of typescript. Here's what you should do instead.

• Create a types.d.ts file in your root directory (or just paste this code on top of your current file).

// ? See below for explanation
type data = {
  email: string,
  last_name: string,
  first_name: string,
  image: string, // or string | undefined if it can be empty
}

Here, we will have the type of data. Try to print the data first and check the values which are in it. From looking at your code I assume these are the values present in the data:

• email (string)
• last_name (string)
• first_name (string)
• image (string or whatever the type is. Also, might have to use string | undefined if the image can be absent.)

Using this information the types are created.

Answer 3

Using any only turns off the type checking which is not so good. If you will still like to keep it typed. You need to create a typescript type/interface with optional properties.

interface FormValues {
  email: string; 
  password: string;
}

type FormErrors = {
  [key in keyof FormValues]?: string;
}

You can afterward use the new type for the error object without any typing issues. const error: FormErrors = {}

Answer 4

use of [] gives an excellent way to use actual value of variable as key/property while accessing JavaScript objects.

e.g.- someObject[someKey]

(data: object) => {
    this.emaill = data['email'];
}

if still error exists or want future proof coding, add checking like -

if (data.hasOwnProperty('email')) {
    this.email = data['email'];
}

Answer 5

The Most upvoted answer is not great because it defeats the whole purpose of Typescript also mentioned by @Alex Lomia

Solution for this are -

1. To fix this, create an interface that describes your schema and extends mongoose.Document: check this similar question here - similar question

2. Use Javascript instead of TypeScript , if someone is using NestJS in the backend is most likely to run into this error so if you don't want to go through the process of making interfaces and DTO's use javascript , also with javascript the built file will be smaller too .

Answer 6

You can use data:any:

signIn(provider) {
    this._auth.login(provider).subscribe(
      (data:any) => {
        console.log(data);
        this.hideForm = false;

        this.emaill = data.email;
        this.nom = data.last_name;
        this.prenom = data.first_name;
        this.profileImage = data.image;
    })
}

Now it will work properly, because i had same problem.

Answer 7

This same error occurred in my Nodejs Typescript project -

Code -

app.post('/form-submit', (req, res) => {
   const errors = {};
   if (...condition) {
      errors.email = ['Email is not valid.'];
   }
});

Error -

Property 'email' does not exist on type '{}'.ts(2339)

Solution (add :any and the error resolve) -

const errors:any = {};

Answer 8

Property 'hostname' does not exist on type 'Object'.

I'm using Vue and typescript, error occurred on debug when trying to console.log this.dropdownItems[0].hostname after loading some data in. The error for me looks to be a typescript type check on the declaration of the variable:

dropdownItems: Array<Object> = []

should have been:

dropdownItems: any[] = []

Derived from: https://www.reddit.com/r/ionic/comments/9cxc79/property_courses_does_not_exist_on_type_object/

Answer 9

I personally encountered this problem. The original code was :

if (response.data !== 'undefined') {
    // ...
}

And should have been :

if (response["data"] !== 'undefined') {
    // ...
}

Answer 10

Replace (data) with (data : any) on 3rd line.

Answer 11

check the condition for your object is empty or not

if(data!==null && data!==undefined && data.email !==undefined)
{
    this.emaill = data.email;
    this.nom = data.last_name;
    this.prenom = data.first_name;
    this.profileImage = data.image;
}

Answer 12

The error occures because data is of the type Object which has none of your properties. You could check if the Object has your property and use it:

if (data.hasOwnProperty('email')) this.email = data['email'];

Answer 13

or better practice to use interfaces. you may declare the interface:

export interface DataI {

 email: string;
 ...
 constructor(...){this.email = email .....}

and then use it as type