Лучшая практика / единственная возможность. «Json to Javascript / Typescript Object через конструктор»

Question

Я начал разработку с помощью angular / typescript и создал службу для своего .NET Core API, и мне хотелось бы знать, как лучше всего получить чистый и надежный объект из моего сервиса.

У меня есть.NET CORE REST API, возвращающий результат json, представленный определением класса ниже.

Служба: demoservice.getDemo().subscribe((val) => new Demo(val));

Демо-класс представляет собой следующий код:

export class Demo  {
    public id : number;
    public name : string;
    public subDemo: SubDemo;

    constructor(demo: Demo) {
      this.id = demo.id;
      this.name = demo.name;
      this.subDemo = new SubDemo(demo.subDemo);
    }
}

export class SubDemo {
    public demoList : ListDemo[]

    constructor(subDemo: SubDemo) {
        this.demoList = new Array<ListDemo>();
        subDemo.demoList.forEach(dl => {
            this.demoList.push(new ListDemo(dl))
        });
    }
}

export class ListDemo {
    constructor(listdemo : ListDemo) {
        this.birthday = listdemo.birthday;
        this.smoker = listdemo.smoker;    
    }

    get birthDayFormatted() : Date {
        return new Date(this.birthday);
    }

    public birthday : string;
    public smoker : boolean;
}

Iэто лучший способ (полностью реализовать все конструкторы) для создания объекта.Пожалуйста, обратите внимание, что мне нравится использовать функциональность "getter" моего ListDemo Class.

Нет лучшего способа?Я только что нашел объект Object.clone / Object.assign / Object.create.

Но ни одно из этих решений не является исчерпывающим ...

Мне действительно интересен ваш опыт ..

Answer 1

Поскольку вы используете лучше и лучше, я отвечу своим, вероятно, нежелательным, мнением. Отказ от ответственности: я не гуру, этот ответ основан на мнении, не стесняйтесь игнорировать.

Не делайте этого. Ваш сервер имеет наборобъекты в его домене, вероятно, это своего рода решение проблем или область хранения данных.

У вашего клиента есть набор объектов в его домене, обычно ориентированный на представление данных пользователю и предоставление пользователю возможности понимать и манипулировать им.it.

Оба этих домена могут иметь объекты с одинаковыми именами или основанные на одной и той же концепции реального мира.Может быть заманчиво чувствовать, что они - одна и та же область с одними и теми же объектами.Они не.Если бы они были одинаковыми, вы не написали бы клиент и сервер, вы бы написали две одинаковые вещи.Эти два должны общаться с чистыми объектами данных.В TS это означает, что вы должны создавать интерфейс, а не класс, для объектов, которые вы получаете от сервера.

Вместо этого начните сначала.Создайте новый домен, основываясь на том, что вы хотите отобразить в API.Если вы разрабатываете свой API сверху вниз (пользовательский интерфейс) (службы доступа), вы, скорее всего, обнаружите, что у вас нет однозначного сопоставления между объектами.В тех случаях, когда вы это делаете, вы, вероятно, можете избежать неприятностей, связанных со случайным назначением / слиянием (см. Ниже), но я лично никогда не находил причин делать больше, чем вы написали выше.

Если вы будете настаивать, вы можете прийтипо выбору до переназначить прототип в формате JSON буквального из базы object к классу представляет данные, но это спорный вопрос и потенциальную ловушку производительности. .Лучше всего, вероятно, просто выполнить рекурсивное / глубокое задание, например, merge .

от Lodash.

Answer 2

Просто используйте интерфейсы, а не классы.

export interface Demo  {
  id: number;
  name: string;
  subDemo: SubDemo;
}

export interface SubDemo {
  demoList: ListDemo[];
}

export interface ListDemo {
    birthday: string;
    smoker: boolean;
}

и ваш API должен вернуть ту же форму, вы просто должны иметь возможность

getDemo(): Observable<Demo> {
  return this.http.get<Demo>('url');
}

в вашем сервисе и в вашем компонентеприсвойте его свойству

demo$ = this.service.getDemo();

, а затем используйте наблюдаемый с асинхронным каналом в шаблоне.

<ng-container *ngIf="demo$ | async as demo">
  {{ demo | json }}
</ng-container>

Чем меньше вам приходится манипулировать данными, тем лучше.У меня есть VS-плагин, который позволяет вам вставлять классы C # в файлы TS и конвертировать их в интерфейсы TypeScript на лету.