Typescript array asignment error

Question

I have this class:

user.ts

const ADMIN = 1;
const AGENT = 2;
const ADJUSTER = 3;
const MANAGER = 4;
const MOTORCYCLIST = 5;

export class User {
  id: number;
  name: string;
  email: string;
  phone: string;
  status: string;
  role: number;

  isAdmin(): boolean {
    return this.role === ADMIN;
  }

  isAgent(): boolean {
    return this.role === AGENT;
  }

  isAdjuster(): boolean {
    return this.role === ADJUSTER;
  }

  isManager(): boolean {
    return this.role === MANAGER;
  }

  isMotorcyclist(): boolean {
    return this.role === MOTORCYCLIST;
  }
}

For testing reasons I'm using a mock users array (for brevity I will show an array of just 5 users, but in my code I have more than 1000):

mock-users.ts

import { User } from '../models/user';

export const USERS: User[] = [{"id":301,"name":"Shirlee Zboncak","email":"[email protected]","phone":"044 93 1342 0977","status":"inactive","role":3},{"id":302,"name":"Erich Auer","email":"[email protected]","phone":"044 87 8444 6879","status":"inactive","role":2},{"id":303,"name":"Jerrold McDermott","email":"[email protected]","phone":"044 64 7490 1751","status":"inactive","role":3},{"id":304,"name":"Yael Hilpert","email":"[email protected]","phone":"044 16 9190 7970","status":"inactive","role":4},{"id":305,"name":"Pat Hodkiewicz","email":"[email protected]","phone":"044 12 0242 7692","status":"inactive","role":3}]

The problem is that that code fails with this message in console

And in my editor it shows this another message:

Missing property 'isAdmin' on type '{ "id": number; "name": string; "email": string; "phone": string; "status": string; "role": numbe...'.

How can I make my User class to not try to assign the methods. I only want to assign those id, name, email, phone, status and role properties. I have tried to use a constructor but the error is the same.

“I have tried to use a constructor but the error is the same.” I doubt this; please show us. — jcalz
– jcalz, Commented Jan 5, 2018 at 22:39
@jcalz what happened is that I just created the constructor but didn't do anything else — javierojeda
– javierojeda, Commented Jan 5, 2018 at 22:55

Tsvetan Ganev · Accepted Answer · 2018-01-05 22:54:50Z

2

You said that you have tried using a constructor, but maybe you didn't do it right as well.

Here is one way to solve your problem. First an interface is created to unify the user data needed to construct a User object.

export interface UserData {
  id: number;
  name: string;
  email: string;
  phone: string;
  status: string;
  role: number;
}

Then in the User class definition a field of type UserData is declared where the user data will be kept.

export class User {
  data: UserData;

  constructor(userData: UserData) {
    this.data = userData;
  }

  isAdmin(): boolean {
    return this.data.role === ADMIN;
  }

  // + all other method declarations
}

If you don't want to store your user data into a field of type UserData, you can just use the interface in the constructor, like this:

export class User {
  id: number;
  name: string;
  email: string;
  phone: string;
  status: string;
  role: number;

  constructor(userData: UserData) {
    this.id = userData.id;
    this.name = userData.name;
    // etc.
  }

  isAdmin(): boolean {
    return this.role === ADMIN;
  }
}

Then you can instantiate objects from the User class by using the new keyword and the constructor, which takes an UserData object as a parameter.

export const USERS: User[] = [
  new User({
    id: 301,
    name: "Shirlee Zboncak",
    email: "[email protected]",
    phone: "044 93 1342 0977",
    status: "inactive",
    role: 3
  })
];

Now you can create User objects without specifying the method definitions.

edited Jan 5, 2018 at 22:54

answered Jan 5, 2018 at 22:47

Tsvetan Ganev

8,9164 gold badges32 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

javierojeda Over a year ago

This looks like a very cool approach. I will use it and I will let you know if it worked for me.

Tsvetan Ganev Over a year ago

Added an alternative class definition if you want to keep your existing class declaration field structure.

javierojeda Over a year ago

Thanks! I was wondering how to do that. I tried the way you did it and worked fine!

user1641172 · Accepted Answer · 2018-01-05 22:42:59Z

0

You could add a constructor to the class and just map the array:

constructor(id,name,email,phone,status,role) {
    this.id = id;
    //...etc
}

then

export const USERS: User[] = [{...array values}].map(u=>new User(...u))

answered Jan 5, 2018 at 22:42

user1641172

Collectives™ on Stack Overflow

Typescript array asignment error

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related