I have an Angular project with a model that looks like this:
export class Party {
  name!: string;
  address!: string;
}
export class Bank extends Party {
  bic: string|null = null; 
}
The frontend needs to both read and write collections of such parties (mixed collections of Party and Bank instances) to/from a REST service implemented in Spring Boot. Because the logic (both frontend and backend) is different if a party is a Bank, it is essential that the correct (sub)types are instantiated when deserializing the JSON data, both in the frontend and the backend.
On the backend/Java side there is the exact same class structure:
@JsonTypeInfo(use= JsonTypeInfo.Id.NAME, property = "type")
@JsonSubTypes({
        @JsonSubTypes.Type(value=Party.class, name="party"),
        @JsonSubTypes.Type(value=Bank.class, name="bank")})
public class Party {
    private String name;
    private String address;
}
public class Bank extends Party {
    private String bic;
}
As you see I have already implemented part of the solution by annotating the Java class with @JsonTypeInfo and @JsonSubTypes. This produces JSON payload that looks like this:
{
  "parties": [
    {
      "type": "party",
      "name": "John Smith",
      "address": "Some address",
    },
    {
      "type": "bank",
      "name": "UBS SWITZERLAND AG",
      "address": "Another address",
      "bic": "UBSWCHZHXXX"
    }
  ],
  "apiErrors": []
}
which is consumed in Angular like this:
public getParties() : Observable<Party[]> {
  
  return this.httpClient.get(PARTIES_URL, {headers: AppConfig.HEADERS}).pipe(
    map((response) => {
       return response['parties'];
    })
  );
}
however response['parties'] is just an array of "raw" JavaScript Objects and not Party or Bank instances.
What do I need to do in TypeScript so that
- the JSON is deserialized into the correct types (Party or Bank instances)
- the Party or Bank instances are serialized back into JSON that contains the correct type information ?
