我应该在 typeScript 中定义 json 数据的类型吗？

Question

在我的项目中，我在购物应用程序中使用此 json 来获取按热门类型和品牌类型分隔的产品。我试图为整个 json 对象定义一个“完整”类型，但它在我的代码中无法正常工作。我尝试对 json 使用这种方法。但似乎与实际数据类型不匹配

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

但它不起作用并给出以下错误类型“对象”不可分配给类型“数据”。我需要找到正确的方法来定义我的 json 类型。

我的组件出现错误

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;
    });
  }

}

Answer 1

您的数据类不正确。另外，当您没有类型的方法时，您应该使用接口而不是类。

正确的接口是：-

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

或者为用户提供适当的类型，例如：-

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

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