Skip to content
Advertisement

What is difference between def interface and dto inerface in Angular?

I am working on the project, which was started by someone else. There are two interface files in the model folder def and dto. The difference between def and dto interface files is not clear to me. Could any expereince developer let me know what is the difference and when and how to use dto instead of def and viceversa. Thanks in advance.

vendor-def.interface.ts:

import { SourceType, VendorType } from '../shared/enums/vendor-type.enum';

export interface VendorDef {
  vendorId: string;
  companyCode: string;
  name: string;
  acronym: string;
  alias: string;
  legalId: string;
  vendorType: VendorType;
  sourceType: SourceType;
  fiscalCode: string;
}


export interface VendorFormDef {
  sourceType: SourceType;
  companyCode?: string;
  previousMainCompany?: string;
}

export interface InUsageDef {
  acronym: boolean;
  legalId: boolean;
  fiscalCode: boolean;
}

vendor-dto.interface.ts

import { SourceType, VendorType } from '../shared/enums/vendor-type.enum';

export interface VendorDto {
  data: VendorDataDto[] | VendorDataDto;
  errors?: VendorErrorsDto;
}

export interface VendorDataDto {
  attributes: VendorAttributesDto;
  id: string;
}

export interface VendorErrorsDto {
  code: string;
  title: string;
  detail: string;
}

export interface VendorCreateDto {
  companyCode: string;
  name: string;
  acronym: string;
  legalId: string;
  fiscalCode: string;
  vendorType: VendorType;
  sourceType: SourceType;
}

Advertisement

Answer

Basically, it’s used to separate what your API gives you from the objects you will manipulate.

  • VendorDTO is your API response (hence the presence of the data and errors fields)
  • VendorDef is the definition of the object you will manipulate in your app.

It is common to have a transformer from VendorDTO to VendorDef for when you request the data and a transformer from VendorDef to VendorDTO for when you want to push an addition/update on your API.

It is not restricted to Typescript or Angular, so you might want to check your question’s tags.

Advertisement