javascript - should I define type for my json data in typeScript? - Stack Overflow

admin管理员组

文章数量:1399959

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 ponent

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: './mainponent.html',
  styleUrls: ['./mainponent.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;
    });
  }

}

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 ponent

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.ponent.html',
  styleUrls: ['./main.ponent.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;
    });
  }

}

• javascript
• angular
• typescript
• typescript-typings

Share Improve this question Follow edited Mar 22, 2021 at 7:27 Hovhannes Gevorgyan asked Mar 22, 2021 at 7:13 Hovhannes GevorgyanHovhannes Gevorgyan 55211 gold badge88 silver badges2525 bronze badges 3

• why not use interface instead of class? if you don't need create functions it's unnecesary create a class – Eliseo Commented Mar 22, 2021 at 7:24
• Added code where I'm getting that error, on this.data in getData method. – Hovhannes Gevorgyan Commented Mar 22, 2021 at 7:29
• I see you accepted @AakashGarg's answer. That answer really made the error in getData go away? That seems surprising. While it's true users was missing, that didn't seem to be the main issue. – T.J. Crowder Commented Mar 22, 2021 at 7:44

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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[];
}

本文标签： javascriptshould I define type for my json data in typeScriptStack Overflow