Typescript cant access object property

Question

I have little issue accessing object property in typscript. this works fine in js but doesn't in ts

let getUserName = {
    firstname : "timi",
    lastname: "oluwayomi",
    middlename: "ola",
    full : () => { return this.firstname + this.lastname + this.middlename } ,
    first: () => {  return this.firstname }
  }
console.log(getUserName.first())

in javascript output: timi but ts throws error. is there a different way to access it in ts ?

Does this answer your question? [How to create a method in object literal notation?](https://stackoverflow.com/questions/17486854/how-to-create-a-method-in-object-literal-notation) — ponury-kostek, Aug 09 '22 at 16:03

score 1 · Accepted Answer · answered Aug 09 '22 at 16:01

1

just refer to the same object in the object, this is a hack IMO

let getUserName = {
    firstname : "timi",
    lastname: "oluwayomi",
    middlename: "ola",
    full : () => { return getUserName.firstname + getUserName.lastname + getUserName.middlename } ,
    first: () => {  return getUserName.firstname }
  }
console.log(getUserName.first())

answered Aug 09 '22 at 16:01

Dean Van Greunen

5,060
2
14
28

1

yeah thanks , worked but one thing left initialization error, but already solved – Timileyin Oluwayomi Aug 09 '22 at 16:05

score 1 · Answer 2 · answered Aug 09 '22 at 16:06

this inside arrow function refers to the global object, so its giving error, you can try with traditional functions

 let getUserName = {
    firstname : "timi",
    lastname: "oluwayomi",
    middlename: "ola",
    full : function() { return this.firstname + this.lastname + this.middlename } ,
    first: function() {  return this.firstname }
  }
console.log(getUserName.first())

Timileyin Oluwayomi · Answer 3 · 2022-08-10T13:19:35.783

1

i was working on an component based project "Angular" so i had to initialize first

getUserName : any;

getUserName = {
    firstname : "timi",
    lastname: "oluwayomi",
    middlename: "ola",
    full : () => { return getUserName.firstname + getUserName.lastname + getUserName.middlename } ,
    first: () => {  return getUserName.firstname }
  }
console.log(getUserName.first())

also thanks to Dean Van Greunen

edited Aug 10 '22 at 13:19

answered Aug 09 '22 at 16:11

Timileyin Oluwayomi

159
7

If your question is resolved, please mark one of the answers as "accepted". – Darryl Noakes Aug 11 '22 at 14:32

Darryl Noakes · Answer 4 · 2022-08-11T14:31:27.567

You are accessing this within an arrow function. Inside an arrow function, this refers to the global object, not the execution context. See You Don't Know JS Yet - Chapter 3 - this Keyword for more info on this. So, to start with, use this:

let getUserName = {
  firstname : "timi",
  lastname: "oluwayomi",
  middlename: "ola",
  full() { return this.firstname + this.lastname + this.middlename },
  first() {  return this.firstname },
}

As this is of type any in this case, as the TypeScript compiler cannot infer the type of your object for you, you will need to type the object yourself (usually a good idea anyway):

type GetUserName = {
  firstname: string;
  lastname: string;
  middlename: string;
  full(): string;
  first(): string;
}

let getUserName: GetUserName = {
  firstname: "timi",
  lastname: "oluwayomi",
  middlename: "ola",
  full(this: GetUserName) {
    return this.firstname + this.lastname + this.middlename;
  },
  first(this: GetUserName) {
    return this.firstname;
  },
};

Typescript cant access object property

4 Answers4