Can you explain the distinction between a def interface and a dto interface within Angular development?

Currently, I am tasked with continuing a project that was initiated by someone else. Within the model folder, there are two interface files labeled def and dto. However, the distinction between these def and dto interface files is unclear to me. I would greatly appreciate it if any experienced developer could shed some light on the differences and provide guidance on when and how to utilize dto over def, and vice versa. Thank you 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;
}

Answer №1

Essentially, the purpose of this structure is to distinguish the data provided by your API from the objects that will be manipulated in your application.

  • VendorDTO represents the response from the API (which explains the inclusion of the data and errors fields)
  • VendorDef defines the object that will be manipulated within your app.

It is typical to have a converter that transforms data from VendorDTO to VendorDef when retrieving information, as well as a converter from VendorDef to VendorDTO for adding or updating entries in the API.

This concept is not limited to Typescript or Angular, so it may be beneficial to review the tags associated with your query.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to trigger JQuery .blur event

I am currently working on implementing server-side validation for an input field that needs to be validated when it loses focus. However, I'm running into an issue where the alert is not triggered when the input field loses focus. Here's a snipp ...

Angular: Issue with dynamic updates not reflecting on mat-menu-item components

My current setup includes a material menu (mat-menu) triggered from an icon button representing a history feature. This menu is supposed to display a dynamic list of accounts that the user has searched for. Within the class: searchHistoryList: Array<s ...

Despite calling Bootstrap Switch JS, no action is being executed

Struggling with integrating Bootstrap Switch into my project that already uses Bootstrap and jQuery. It seems like the JavaScript isn't affecting the HTML, which is driving me crazy. I've tried adding Bootstrap Switch using both the gem and stra ...

Angular displays X items in each row and column

I've been struggling with this task for the past 2 hours. My goal is to display a set of buttons on the screen, but I'm facing some challenges. The current layout of the buttons doesn't look quite right as they appear cluttered and unevenly ...

Determining focus on file picker dialogue using JavaScript

In my table, each row contains one or more user inputs with a focusout event listener attached to call a function: function inputFocusOut(event, el) { let row = el.closest('tr'); let curFocus = event.relatedTarget; let moveOn = tru ...

A step-by-step guide on retrieving the present date and time using TypeScript

Details This is my first time creating a VSCode extension using TypeScript, and I am having trouble displaying the current date/time in an information message. My Attempts I have searched through VSCode key bindings for any references to date/time, as w ...

The material picker consistently shows the first day of the month from the assigned date

I'm currently using a material datepicker and attempting to assign a value to it from the server. The response I receive is: 21-07-2022 Since the datepicker requires a date or moment type, I am converting the response accordingly this.form.controls[ ...

"Utilizing a null value for a zero in Material-ui's Textfield

I am currently using Formik to handle a Material-Ui TextField in my project. The input value (string) is being converted to a number on input change. One issue I am facing is that when the value zero is passed, it is treated as a false value and renders a ...

Is there a way to switch the cursor to a pointer when hovering over a bar on a ChartJS bar graph?

Here's the chart I created: createChart = function (name, contributions, idArray) { globalIdArray = idArray; var ctx = document.getElementById("myChart"); var myChart = new Chart(ctx, { type: "bar", data: { lab ...

Determine the numerical value of an input field by the option chosen in a dropdown

I want to increment the totalValue by 50 if the dropdown value is set to true. <div class="col"> <label class="form-label">Emergency</label> <select class="form-select" name="emergency" id=&q ...

When whitespace is entered as the value for an input type=email, the change event does not fire

I'm facing an issue with my 'change' event listener on a type=email input element. It seems that when I enter a couple of space characters into the email field and then click out of the element, the change event fails to trigger. Interestin ...

Is there a method to halt scrolling through programming?

This code snippet is turning off all scrolling capabilities. var myScroller = new IScroll('#wrapper'); myScroller.disable(); Is there a way to prevent scrolling without disabling iScroll? var myScroller = new IScroller('#wrapper'); m ...

Steps to show a Google Maps marker with the help of ajax

I'm trying to show a "marker" on the map using ajax, but I haven't been able to find a solution despite searching various sources online. ================= Here's the code I currently have: var map; function initialize(){ var center = ...

Monitoring every request in Express.js(logging)

My web application is built on node and express for the backend. With a large number of users, debugging using console logs can be confusing due to messy logs from different users. Is there a way to track logs based on requests (like a Request ID)? ...

Avoiding the parsing of JSON strings in JavaScript

var data = Sheet : [ {"Cell_Address":"A1","Cell_Type":"1","Cell_Value":"Name"}, {"Cell_Address":"B1","Cell_Type":"1","Cell_Value":"Phone no."}, {"Cell_Address":"C1","Cell_Type":"1","Cell_Value":"Currency"}, {"Cell_Address":"D1","Cell_Type":"1","Cell_Value ...

Difficulty in packaging JavaScript resources within Laravel Project

Having trouble setting JS functions as global in my project: In the 'resources\js"', I have: numerosALetras.js: /////////////////////////// function unidades_nal(n){ ... } function decenas_nal(n){ ... } function centenas_nal(n){ ...

What is the best way to retrieve the value of templated objects in TypeScript that refer to another object?

As a novice in typescript, I am seeking guidance on the most efficient method to accomplish this task using typescript: I have a map object that serves as a field mapping tool for combining two objects: source and target. The map object remains unalterab ...

How can I prevent ng-blur from triggering when ng-readonly is set to true in AngularJS?

I am currently working with AngularJS and have run into an issue when combining ng-blur with ng-readonly. Even though ng-readonly is set to true, ng-blur still triggers (if the input field is clicked and then somewhere else is clicked). In this example, n ...

Tabulating with jQuery Arrays

I am facing an issue when trying to perform calculations with certain numbers. Here is the specific code snippet causing trouble: for (var key in week_total) { $("." + key).html(week_total[key]); } After running this code, I keep getting a value of N ...

Using TypeScript with React: Initializing State in the Constructor

Within my TypeScript React App, I have a long form that needs to dynamically hide/show or enable/disable elements based on the value of the status. export interface IState { Status: string; DisableBasicForm: boolean; DisableFeedbackCtrl: boolean; ...