Guidelines for building a pristine Typescript application structure

I am in the process of developing a pure Typescript application that interacts with a database through an API. I am seeking guidance on establishing the most optimal architecture for this project. My goal is to achieve the following within my app:

  • Retrieve data from an API and efficiently map it into Typescript objects
  • Temporarily store the data (without persistence) for the duration of the session
  • Respond to user interface actions by calling appropriate data access layer functions
  • Send all processed data to an external library for graph visualization

I have included a visual sketch of how I envision this architecture should be structured https://i.sstatic.net/vOT2B.png

The challenge lies in transitioning from React, which I am familiar with, to using plain Typescript for this project. I have encountered issues with poor architecture decisions in the past and aim to avoid them by creating a clean and efficient design.

Are there any recommended resources for achieving this? Ideally, I would appreciate a straightforward example of clean code for a basic application (excluding the graphing component) for reference.

typescriptapiarchitecture

Answer №1

In my experience, I find that using the approach outlined in this article has been quite beneficial:

While not specific to Typescript, this method should work well with it. When referring to "Pure" and "Clean," I assume you are talking about the separation of concerns, which includes implementing Dependency Injection for future flexibility.

The concept of layers mentioned here pertains to organizing your codebase logically.

To implement this in your scenario:

https://i.sstatic.net/wSF6A.png

  • Keep UI and application logic in separate layers.
  • Have Dumb DTOs / POCO's in a common layer to provide consistent terminology throughout the system. This layer should not include data-mapping objects specific to databases or APIs – those belong within their respective providers.
  • The logic layer should interact with databases, APIs, external components, etc., through code interfaces represented by an abstraction layer.
  • Define each provider (database, API, etc.) within the abstraction layer with one or more interfaces, following the Interface Segregation Principle.
  • Each provider can have multiple concrete implementations, loaded at runtime using a dependency injection mechanism.

The graph component should also be abstracted like other providers because:

  • All providers offer data/functionality required by the logic layer, but we aim to maintain loose coupling between them.
  • Providers may have different dependencies that should be isolated from the rest of the codebase.

If you need to expose an external API (rather than consume one), consider placing it in the representation layer near the UI, although it seems unnecessary in your case.

The level of complexity in your dependency injection/inversion setup is entirely up to you.

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

Having an issue with utilizing the useState hook in ReactJS for implementing pagination functionality

I'm struggling to resolve an issue with the React useState. What I'm trying to achieve is making an API call to fetch movies with pagination, but for some reason one of my states is showing up as undefined and it's puzzling me. The component ...

javascriptreactjsapiaxiosreact-hooks

unable to locate the custom npm package within my service

There is a similar inquiry posted here: My custom NPM Package is not found, but unfortunately, the solution provided did not fix my issue. I am encountering an error stating: "Could not find a declaration file for module '@dc_microurb/common' ...

node.jstypescriptnpm

Create a circle surrounding the latitude and longitude on a Bing Maps angular display

I successfully integrated the Bing map with Angular using the angular-map package, and now I want to draw a circle around a given latitude and longitude. To achieve this, I installed the following npm packages: npm install --save angular-maps npm ins ...

angulartypescriptdictionary

Checking if a useState setter passed in props is triggered in a Jest test

In a React component, I have the following functions: const changeOrder => { a websocket request }; const handleArrow = async () => { const res = await changeOrder(side, headingOrder, config); if (res !== undefined) setOrder(res); }; The se ...

reactjstypescriptwebsocketjestjs

What is the method for displaying cities from a JavaScript array using zip codes?

Hey there! I'm currently working on a feature that involves taking user input for zip codes and triggering the "key up" event to populate available stores and cities in that area. Below is a snippet of the code I've been using: delivery.componen ...

javascriptangulartypescriptzipcode

What is the process in Typescript for importing JSON files and dynamically searching for values based on keys?

When working with typescript 3.0.3, I encountered an issue while importing a json file in the following manner: import postalCodes from '../PostalCodes.json'; The json file has the structure shown below: { "555": { "code": 555, "city": "Sc ...

typescript

Remove Image Upload feature in antDesign and remove item from interface

I am currently working on a project that involves multiple interfaces. One of these interfaces is specifically designed for uploading images. However, I encountered a problem with the deletion icon functionality. Whenever the icon is clicked, a modal is su ...

reactjstypescriptantdant-design-pro

Issue TS2365: The operation of addition cannot be performed between an array of numbers and the value -1000

I'm encountering an error in my ng serve logs despite the function functioning properly with no issues. However, I am concerned as this may pose a problem when building for production. How can I resolve this error? uuidv4() { return ([1e7]+-1e3+- ...

angulartypescript

What steps should be followed to properly validate an unsubmitted form in Angular?

To ensure that the user submits the form before navigating to another page, I want to implement a feature where an error dialog pops up if the user types in the form but hasn't submitted it yet and tries to click a link to go to a different page. How ...

javascripthtmlangulartypescriptvalidation

The Server Discovery And Monitoring engine has been marked as obsolete

Currently, I am integrating Mongoose into my Node.js application with the following configuration: mongoose.connect(process.env.MONGO_URI, { useNewUrlParser: true, useUnifiedTopology: true, useCreateIndex: true, useFindAndModify: false }).then ...

javascriptnode.jstypescriptmongodbmongoose

Warning in TypeScript indicating that a property is missing in one of the response types

I am handling a response like this: const response : { a : string, b : string } | { message : string } = callFunc(); When using it in my code, I have: response.message && doSomething(message); However, TypeScript is showing an error that ...

javascripttypescript

Hidden back navigation strategy in AngularJS 2 with location strategy

After creating a custom LocationStrategy to disable browser location bar changes, I am now looking to integrate smaller apps into various web pages without affecting the browser's location. While navigation works smoothly with this new strategy, I am ...

typescriptangular

Tips for dealing with strong reference cycles in TypeScript?

I have created a tree-like structure in my implementation, consisting of parent and child objects. The parents contain a list of children while the children have references to their parents, facilitating easy navigation through the tree. I am now contempla ...

typescript

TS2339: The specified property 'defaultProps' is missing from the type '(props: any) => DetailedReactHTMLElement<{ className: string; }, HTMLElement>'

When attempting to define default props using TypeScript for stateless, functional React components, the following code is used: import React from 'react' interface Props { readonly sid?: string, } const defaultProps: any = { sid: '&a ...

reactjstypescripttypescript-typingstypescript2.0

Looking to observe a decorated method using Jest even if the decorator poses a hurdle to method execution?

In my TypeScript project, decorators are a crucial part of enhancing method behavior. However, I recently ran into a situation where a decorator could potentially block the execution of a method. To test this scenario using Jest, I aim to confirm whether t ...

typescriptts-jest

Request balancing within a microservices architecture

I am currently implementing an architecture that consists of: API gateway serving as a single entry point and user request balancer (using Ocelot) Two microservices, namely data service and processor service, each with two instances. In our communication ...

.netrestarchitecturemicroservicesamqp

Exploring the attributes of a record through a combination of string template types

I'm utilizing a string template type to denote ids with a significant prefix, such as dta-t-${string} where dta-t- encodes certain details about the entity. I have various record types that are indexed by unions of string templates: type ActivityTempl ...

typescript

Insert information into a 3-tiered nested Angular FormArray within interconnected dropdown fields

After trying to retrieve data from an API call to populate a select form field, I encountered difficulties setting the value correctly using a FormArray. This led me to creating a FormArray with 3 nested levels in Angular, taking reference from this examp ...

angulartypescriptangular-formsangular-reactive-forms

The input of type 'string' cannot be assigned to type 'ChartType'

html code snippet <div style="width: 100%; display: block"> <canvas *ngIf="loaded" baseChart [data]="barChartData" [labels]="barChartLabels" [options]="bar ...

javascriptangulartypescriptchart.jsng2-charts

Exploring the functionalities of Angular routing by incorporating parameters

Greetings! I have developed a straightforward Angular 12 project featuring a login page and a home page. Below is the code structure for your reference: <div class="text-center" style="width: 100%"> <h1>home</h1> & ...

angulartypescriptquery-stringapp-route