What is the best way to outline this model using typescript?

Here is a JSON model that I am working with:

{
    "loggers" : {
        "logger1" : {
            "name" : "logger1",
            "level" : "DEBUG",
            "sub_loggers" :{
                "logger1.nested_logger1" : {
                    "name": "logger1.nested_logger1",
                    "level": "INFO"
                },
                "logger1.nested_logger2" : {
                    "name": "logger1.nested_logger2",
                    "level": "INFO",
                    "sub_loggers": {
                        "logger1.nested_logger2.more_of_that" : {
                            "name": "logger1.nested_logger2.more_of_that",
                            "level": "INFO"
                        }
                    }
                }
            }
        },
        "logger2" : {
            "name": "logger2",
            "level": "WARN"
        }
    }
}

I am trying to store this model in a variable after receiving it from an HTTP request, but I would like to map it instead of using any.

If possible, I would also like to split it into 2 separate models. However, I am facing challenges with mapping because the key names within sub_loggers are not in an array format, but rather represent the loggers directly.

typescripttypescript-typings

Answer №1

Consider this alternative:

type LogLevel = "DEBUG" | "INFO" | "WARN" | "ERROR";

type LoggersData = {
    [name: string]: LoggerData;
}

interface LoggerData {
    name: string;
    level: LogLevel;
    sub_loggers?: LoggersData;
}

let jsonData = YOUR_JSON as { loggers: LoggersData };
let loggersData: LoggersData = jsonData["loggers"];

(view code in playground)

Update

In response to your queries:

  1. Yes, the use of ? denotes an optional property.
  2. I opted for interfaces and type aliases instead of classes. The distinctions between interfaces and type aliases are detailed in the provided documentation. I avoided classes based on your requirements to solely represent the JSON structure with type safety. However, if you require functionality (methods) along with data objects, employing classes would be necessary.

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

What could be the reason my mat-form-field is not displaying the label?

I'm currently working on a project using Angular Material to build a web page. I am facing an issue with the mat-form-field component as the label is not displaying, and I can't figure out why. Any assistance would be greatly appreciated. Thank y ...

javascriptangulartypescriptangular-material

What is the best way to retrieve a specific property from an array of objects in Angular 6 using typescript?

I am currently working on a budgeting application that incorporates an array of expenses with a price property. Each expense is defined within an Expense model in Typescript. While I can easily access the price property using ngFor loop in HTML, I'm c ...

angulartypescript

Error encountered when utilizing cursor in Prisma

I am currently utilizing Prisma version 4.2.1 within a Next.js API Route to implement cursor-based pagination for posts. Upon passing the cursor to the API endpoint, I encounter an error message (500) in the console: TypeError: Cannot read properties of u ...

typescriptnext.jsbackendapi-designprisma

Typescript's intriguing concept of objects containing arrays inside other objects

I have a structure similar to this and I am trying to create definitions for types/interfaces, but I am facing issues in making it work correctly. layoutsSet: { 1: { "lg": [ { i: "1", x: 0, ...

typescripttypestypescript-definitions

Is it possible to use AngularJS promise scheduling with `async`/`await` syntax?

When working with AngularJS services, TypeScript often recommends that I switch my code to use async/await functions. While I understand that using the await keyword is compatible with third-party promises because it essentially translates to calling then ...

angularjstypescriptasync-awaites6-promiseangular-promise

Application: The initialization event in the electron app is not being triggered

I am facing an issue while trying to run my electron app with TypeScript and webpack. I have a main.ts file along with the compiled main.js file. To troubleshoot, I made some edits to the main.js file to verify if the "ready" function is being called. ...

javascripttypescriptwebpackelectron

What is the best way to only buffer specific items from an observable source and emit the rest immediately?

In this scenario, I have a stream of numbers being emitted every second. My goal is to group these numbers into arrays for a duration of 4 seconds, except when the number emitted is divisible by 5, in which case I want it to be emitted immediately without ...

javascriptangulartypescriptrxjs

Having trouble getting the express router to function properly in your Node.js TypeScript project?

One of the components in this application is registerClass, where all routes are added. The source code is in the dist directory since this node app is using TypeScript. However, when calling the http://localhost:9001/user endpoint, it seems that it is not ...

javascriptnode.jstypescriptexpressexpress-router

What is preventing the spread type from being applied to `Record` in TypeScript?

export type AddResourceProps<K extends string, T extends any> = (resource: BasicResource) => Record<K, T> const addtionalResourse = addResourceProps ? addResourceProps(resource) : {} as Record<K,T> const result = { ...addtionalRe ...

reactjstypescriptredux

Adjust the color of the entire modal

I'm working with a react native modal and encountering an issue where the backgroundColor I apply is only showing at the top of the modal. How can I ensure that the color fills the entire modal view? Any suggestions on how to fix this problem and mak ...

javascriptcsstypescriptreact-nativereact-native-modal

If a component does not have a specified return type annotation, it will default to an 'any' return type

I'm struggling to understand the typescript error that keeps popping up, it says: 'MyGoogleLogin', which doesn't have a return-type annotation, is being given an implicit 'any' return type. All I want is for the component t ...

reactjstypescript

Can you explain the distinction between any[] and [] in TypeScript?

Here is an example that successfully works: protected createGroups(sortedItems: Array<TbpeItem>): any[] { let groups: any[] = []; return groups; } However, the second example encounters a TypeScript error: type any[] not assignable to ...

typescript

Typescript encountering issues with addEventListener

const [status, setStatus] = useState<string>("pending"); const updateStatus = (newStatus: string) => { setStatus(newStatus); }; useEffect(() => { window.addEventListener("updateProtocol", updateStatus); return () =&g ...

typescriptreact-hooksaddeventlistener

Observer function simulated by SinonStub

I am currently testing express middleware using sinon.js My goal is to verify that it sends a specific JSON response and prevents the request from moving on to the next middleware or request handler. const middleware = (req: Request, res: Response, nex ...

javascripttypescriptexpresschaisinon

Utilizing TypeScript for various return types with the same parameters

Exploring TypeScript Signatures In an effort to embrace TypeScript fully, I am implementing strongly typed signatures in my Components and Services, including custom validation functions for angular2 forms. I have discovered that while function overloadi ...

typescriptangular2-formstypescript2.0

What could be causing the radio button to not be checked when the true condition is met in Angular?

I am working on an angular7 application that includes a dropdown list with radio buttons for each item. However, I am facing an issue where the radio button is not checked by default on successful conditions. Below is the code snippet from my component.htm ...

angulartypescript

Strange interaction observed when working with Record<string, unknown> compared to Record<string, any>

Recently, I came across this interesting function: function fn(param: Record<string, unknown>) { //... } x({ hello: "world" }); // Everything runs smoothly x(["hi"]); // Error -> Index signature for type 'string' i ...

javascripttypescript

atom-typescript encounters difficulty locating typings

After setting up a new Angular/Typescript project in Atom with atom-typescript, I encountered an issue. The main angular module file imports all modules and type definition files, but errors are now showing in my .ts files. This is due to atom-typescript n ...

typescriptatom-editor

How to conceal the side navigation bar on specific pages or components within an Angular application

Currently immersed in developing a web application with Jhipster and Angular. I've managed to set up a side navbar along with a top navbar on every page. However, I'm struggling to hide the side navbar on specific pages and could use some guidanc ...

angulartypescripthidenavbarjhipster

Retrieve the structure from a React application

When it comes to documenting architecture, the process can be incredibly beneficial but also quite time-consuming and prone to becoming outdated quickly. I have come across tools like Doxygen that are able to extract architectural details such as dependen ...

javascriptreactjstypescriptarchitecturecontinuous-integration