Model in Angular and Typescript. Class, SubClass and Interface

typescript class implements interface
typescript access modifiers
angular model interface
typescript interface constructor
typescript model class
typescript abstract class
typescript initialize class object
typescript interface array

On and Angular 7 / Typescript service I am calling a GetTopPosts API method that returns:

"result": [
  {
    "id": 1,
    "title": "History of Design",
    "category": {
      "id": 3,
      "name": "design"
    }
  },
  {
    "id": 2,
    "title": "Angular",
    "category": {
      "id": 4,
      "name": "code"
    }
  }
]

The model on my backend from which each post is generate is Response:

public class GetTopPostsModel {

  public class Response {  

    public Int32 Id { get; set; }
    public String Title { get; set; }  
    public CategoryModel Category { get; set; }

    public class CategoryModel {
      public Int32 Id { get; set; }
      public String Name { get; set; }
    }

  }

}

How to translate GetTopPostsModel to Typescript?

  1. Should I use interface or class?
  2. Can subclasses be used, e.g., CategoryModel is a subclass of Response which is a sub class of GetTopPostsModel

Note

In TypeScript I am defining Envelope as follows:

export class Envelope<T> {

  result: T[];

  constructor(result: T[]) {
    this.result = result;
  }

}

You may translate it as

export interface Response {
    public number Id;
    public string Title;  
    public Category category
}

export interface Category {
      public number id;
      public string name;
    }

and use the angular http service to get it:

import { HttpClient } from "@angular/common/http"

public getLatest(): Observable<Response[]> {
    return this.http.get<Response[]>("api/latest");
}

When the entities are coming from a REST service (and not created directly), you can use interfaces. Keep in mind that typescript get traspiled and type information gets lost.

For this reason, the shape of the object is the only important thing: an object declaring all the fields and methods of your interface can be treated as a "true" object implementing that interface. This is a bit strange when you come from a strongly typed language like C#.

With this in mind, the concept of "subclass" becomes "has the same shape".

Handbook - Interfaces, When an interface type extends a class type it can only be implemented by that class or a subclass of it. Typescript is not Java, but it provides good support to OOP operations and hierarchy. We could use inheritance and suppose that there is a generic implementation of responses and then subclass the

I believe in your case the best would be to translate the object to an interface ITopPosts, so then in your service you'd do something like:

getTopPosts() {
  // now returns an Observable of ITopPosts
  return this.http.get<ITopPosts>(this.configUrl);
}

And in the Component consuming the request you'd be able to check for the returned data to conform to your requirements like below:

topPosts: ITopPosts;

showTopPosts() {
  this.topPostService.getTopPosts()
    .subscribe((data: ITopPosts) => this.topPosts= { ...data });
}

Interface in Typescript can use a similar approach to the subclass you mentioned, like the following:

interface IInterface {
  myDate: IAnotherInterface
}

interface IAnotherInterface {
  something: myEnum
}

enum myEnum {
  1 = 'One',
  2 = 'Two'
}

Handbook - Classes, Derived classes are often called subclasses, and base classes are often called superclasses. Abstract methods share a similar syntax to interface methods. The practice of using classes as interfaces in TypeScript is most commonly promoted in the Angular style guide, which says (emphasis mine): Consider using a class instead of an interface. The recommendation is to think about using a concrete class as an interface using the implements keyword.

TypeScript is not a class based language, it uses prototype, so you'd be better of using interface

Read more here

For your requirements, You are looking for something like this:

export interface GetTopPostModel{
  response: Response;
}

export interface Response{
    id: number;
    title: string;
    category: Category
}

export interface Category {
      id: number;
      name: string;
}

TypeScript Class: Extending Classes & Interfaces, Learn how classes and interfaces can be extended using TypeScript IEngine; basePrice: number; state: string; make: string; model: string;  If your Angular components contain identical or similar functionality and you find yourself copying and pasting that code, it makes sense to implement some class inheritance, which is available with TypeScript. And, you can simplify the child components even further by removing the dependencies from the parent constructor arguments and manually

TypeScript Type vs Interface, What is the difference between type and interface in TypeScript? Working with models in Angular One thing I've got pretty used to is using models in Angular; using objects which hold your data may be pretty useful. It makes the developer live significantly easier - so let me show you what I'm talking about and how I handle models in Angular.

TypeScript - Interfaces, is an abstract type, it does not contain any code as a class does. Classes Introduction #. Traditional JavaScript uses functions and prototype-based inheritance to build up reusable components, but this may feel a bit awkward to programmers more comfortable with an object-oriented approach, where classes inherit functionality and objects are built from these classes.

Interfaces, makes them act like a singleton while defining non-static properties and methods make them act like a factory. Let’s further explain this core difference between interface and class by considering Pizza as a class again. Using TypeScript class vs using Typescript interface. As it is, our current code provides type-checking for Pizza but can’t create a pizza: