[Fixed] should I define type for my json data in typeScript?

Issue

In my project, I’m using this json for my shopping application to get products that are separated by types hot and branded. I’m trying to define a "full" type for the whole json object but it’s not working correctly in my code. I tried to use this approach for the json. But it seems it is not matching with real data type

import {Product} from './Product';

export class Data {
  products: {branded: Product[], hot: Product[]};
  users: {}[];
}

export class Product {
  content: string;
  image: string;
  price: string;
  title: string;
}

export const DATA = {
  "products": {
    "hot": [
      {
        "title": "Hot Tittle 1",
        "content": "Hot Content 1",
        "image": "...",
        "price": "100"
      },
      {
        "title": "Hot Tittle 2",
        "content": "Hot Content 2",
        "image": "...",
        "price": "200"
      },
      {
        "title": "Hot Tittle 3",
        "content": "Hot Content 3",
        "image": "...",
        "price": "300"
      }
    ],
    "branded": [
      {
        "title": "Branded Tittle 1",
        "content": "Branded Content 1",
        "image": "...",
        "price": "400"
      },
      {
        "title": "Branded Tittle 2",
        "content": "Branded Content 2",
        "image": "...",
        "price": "500"
      },
      {
        "title": "Branded Tittle 3",
        "content": "Branded Content 3",
        "image": "...",
        "price": "600"
      }
    ]
  },
  "users": [
    {
      "id": 1,
      "email": "some email",
      "password": "some password"
    }
  ]
};

but it’s not working and giving the following error
Type ‘object’ is not assignable to type ‘Data’. I need to find the right way to define a type for my json.

I’m getting error in my component

import { Component, OnInit } from '@angular/core';
import {AuthService} from '../../services/auth.service';
import {ShoppingService} from '../../services/shopping.service';
import {Product} from '../../models/Product';
import {Data} from '../../models/Data';

@Component({
  selector: 'app-main',
  templateUrl: './main.component.html',
  styleUrls: ['./main.component.scss']
})
export class MainComponent implements OnInit {
  data: Data;
  brandedProducts: Product[];
  hotProducts: Product[];

  constructor(
    private shoppingService: ShoppingService
  ) { }

  ngOnInit(): void {
    this.getData();

    this.brandedProducts = Object.values(this.data.products.branded);
    this.hotProducts = Object.values(this.data.products.hot);
  }

  getData(): void {
    this.shoppingService.getData().subscribe(data => {
      // TS2739: Type '{}' is missing the following properties from type 'Data': products, users
      return this.data = data;
    });
  }

}

Solution

You Data class is incorrect. plus you should use interfaces instead of classes when you don’t have methods for types.

correct interface would be :-

export interface Data {
  products: {branded: Product[], hot: Product[]};
  users: {[key: string]: any}[];
}

Or Give Users a proper type like :-

export interface User {
  id: number;
  email: string;
  password: string;
}

export interface Data {
  products: {branded: Product[], hot: Product[]};
  users: User[];
}