如何在Angular(typescript)中声明一个带有对象数组的接口?[已关闭]

iqjalb3h  于 2022-12-30  发布在  TypeScript
关注(0)|答案(1)|浏览(153)

3天前关闭。
这篇文章是昨天编辑并提交审查的。
Improve this question
我创建了一个Angular项目,在该项目中,我从后端接收了一个具有以下结构的对象:

{
    status: "ok",
    totalResults: 12,
    articles: [
        {
            source: {
                id: null,
                name: "Sports Illustrated"
            },
            author: "Albert Breer",
            title: "Some Title",
            description: "Some description",
            urlToImage: "http://google.ch/someImage.jpg"
        }
    ]
}

然后我尝试创建一个与该对象对应的接口,但我很难定义引用对象或对象数组的属性(例如article)。
在我的第一次尝试中,我尝试内联定义对象:

export interface Noticias {
    status: string;
    totalResults: number;

    articles: Array<{
        id: string;
        name: string;
        title: string;
        description: string;
        urlToImage: string;
    }>
}

然后,我尝试将属性定义为重复:

export interface Noticias {
    status: string;
    totalResults: number;

    id: string;
    name: string;
    title: string;
    description: string;
    urlToImage: string;

    articles: Array<{
        id: string;
        name: string;
        title: string;
        description: string;
        urlToImage: string;
    }>
}

Visual Studio代码不断向我显示错误,因此我怀疑我的方法是否正确。任何帮助都将不胜感激!

toe95027

toe950271#

根据第一个屏幕截图中的json-structure,您需要创建三个单独的接口:一个用于Noticias,一个用于Article,一个用于Source。那么Noticias包含类型为Article的数组,并且Article包含类型为Source的对象;

通知.型号.ts:

import { Article } from './article.model';

export interface Noticias {
  status: string;
  totalResults: number;

  articles: Article[];
}

产品型号ts:

import { Source } from './source.model';

export interface Article {
  source: Source;
  author: string;
  title: string;
  description: string;
  urlToImage: string;
}

源.模型.ts:

export interface Source {
  id: string;
  name: string;
}

相关问题