Question

我正在学习棱角分明，并试图制作一个非常简单的英雄列表。

我在这样的json中有英雄列表

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

我将此json列表加载到组件中，我希望在其中将所有它们显示在表中，并且希望能够单击它们以查看其详细信息。

我想将该json转换为简单的打字稿类/对象，这样我就不必猜测和进行硬编码this.hero["stats"]了，而只需MyHeroClass.stats。

我的问题是，我应该把这个类存储在哪里，应该怎么做？

是否必须是导出的组件（没有html和css？），还是可以在某个地方制作一个类并将其导入到需要的地方？

谢谢

Answer 1

您可以创建一个类或接口并定义其属性

界面

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

课程

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

Answer 2

尝试一下：

创建一个hero.ts文件：

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

然后，您可以在任何地方导入该hero.ts文件，并将其用作这样的数据类型：

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

瞧！现在，您可以利用IDE提供的智能代码完成功能。

Answer 3

您可以在src文件夹中创建一个文件夹，在该文件夹中添加所有export ts文件类

在user.data.ts命名中添加一个类文件

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

将此类文件导入您要调用api的服务中

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

存储您的api数据

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

在使用此组件的组件中，还需要导入

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

，您可以像

这样使用

userdata：UserData = new UserData（）;

您可以在

之类的服务调用函数中填充此用户数据

this.userdata = data.results;

Answer 4

如果您想要更安全一点，可以尝试使用 ts-data-class，它也提供构造函数、字段验证和有用的功能，例如 copyWith 和 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',
});

在Angular / Typescript中创建简单数据类

4 个答案: