Create Simple Data Class in Angular/Typescript

Question

I am learning angular and trying to make a very easy hero list.

I have a list of hero in a json like this

    {
        "name" :"Bobby",
        "avatar" : "myHero1.jpg",
        "power" : "12",
        "description" : "the strongest"
    }

I load this json list in a component, where i want to display all of them in a table, and beeing able to click on them to see their stats in detail.

I want to cast that json in an simple typescript class/Object, so that I don't have to guess and hard coding this.hero["stats"] and just have MyHeroClass.stats.

My question is, in angular, where should i store this class, and how should I make it?

Does it have to be an exported component (with no html and css?) or can I make just a class somewhere and import it where i need it ?

thanks

Answer 1

Try this:

Create a hero.ts file:

export class Hero {
  name: string;
  avatar: string;
  power: string;
  description: string;
}

then, in any where, you can just import that hero.ts file and use as a datatype like this:

import { Hero } from '@/hero';
...
hero: Hero = {
    "name" :"Bobby",
    "avatar" : "myHero1.jpg",
    "power" : "12",
    "description" : "the strongest"
};

voila! now you can leverage the intelligent code completion provided by the IDE.

Answer 2

You can create a class or an interface and define their properties

Interface

interface MyHero {
   name: string;
   avatar: string;
   power: number;
   description: string
}

Class

class MyHero {
   constructor(name: string, avatar: string, power: number, description: string) {  }
}

Answer 3

you can create a folder in your src folder adding all export ts file class in that folder

add a class file in naming user.data.ts

export class UserData {
name: string;
avatar:string;
power:string;
description:string;
}

import this class file in your service where you are calling your api's

import { UserData } from "../domain/user.data";

store your api data

getuserdata() {
        return this.httpc.get<UserData>(your_url + '/name/getusername');
    }

also in your component where you are using this you need to import

import { UserData } from "../domain/user.data";

and you can use this like

userdata : UserData = new UserData();

you can populate this userdata in function calling to service like

this.userdata = data.results;

Answer 4

If you'd like a little more safety, you can try using ts-data-class, which also provides a constructor, field validation and useful functionality like copyWith and parse.

const strParser = (v: unknown) => (typeof v === 'string' ? v : 'unknown');
const parsers: DClassParsers<Hero> = {
  name: strParser,
  avatar: strParser,
  power: strParser,
  description: strParser,
};

class Hero extends DClass<Hero> {
  name!: string
  avatar!: string
  power!: string
  description!: string

  constructor(params: DClassMembers<Hero>) {
    super(parsers);
    this.assign(params);
  }
}

const hero1 = new Hero({
  name: 'Bobby',
  avatar: 'myHero1.jpg',
  power: '12',
  description: 'the strongest',
});

const hero2 = hero1.copyWith({
  name: 'Cooler Bobby',
  power: '48',
});