The Power of TypeScript Generics

I'm currently working on refining my log method to be more versatile. The main concept I'm aiming for is outlined below:

class A {
    user_id: number;
    // and other properties...
}

class B {
    service_name: string;
    // and other properties...
}

function log<T>(...T parameters) {
    // log the input parameters
}

log<A>(
    A.user_id = 123
);

log<B>(
    B.service_name = 'my_service_name';
);

My attempts so far have been unsuccessful in achieving this, but it's important as my project continues to expand with more layers and entries added each day.

enum levels {
    error,
    info,
}

enum entries {
    user_id,
    service_name,
}

function log(level: levels, ...entries: entries[]) {
    // carry out the logging operation...
}

log(
    levels.info,
    entries.user_id = 123
);

log(
    levels.error,
    entries.service_name = 'my_sevice_name'    
);

I decided to utilize enums in my example to guide developers towards choosing predefined values from a list rather than resorting to magic numbers or strings.

Answer №1

Can defining the keys be simplified by using unions?

type Section = "warning" | "note"

type KeyName = "customer_id" | "product_name"

type DataEntry = Partial<{
  [K in KeyName]: string
}>

function record(section: Section, ...dataEntries: DataEntry[]) {
    // execute the recording process...
}

record("warning", {product_name:"computer"})

Answer №2

If you desire your secondary solution to be successful, you will need to modify the function calls like so:

enum ranks {
    warning,
    debug,
}

interface record {
    user_id,
    service_name,
}

function log(level: ranks, ...records: record[]) {
    // carry out the logging process...
}

log(
    ranks.debug,
    { user_id: 456 }
);

log(
    ranks.warning,
    { service_name: 'new_service' }
);

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

Using an AJAX function to retrieve data from two different server-side scripts and populate two separate HTML elements on the page

My goal in this coding situation is to change values in multiple DOM targets. The example from Tizag shows the DOM being altered within the onreadystatechange function, like this: if(ajaxRequest.readyState == 4){ document.myForm.time.value = ajaxRequ ...

Why does Res.send return an empty object when console.log indicates it is not empty?

I am currently facing a challenge while using the Google Sheets API with Express, as I have limited experience with JavaScript. My goal is to pass a JSON object from Express to React, but for some reason, when I send the object, it appears empty on the fro ...

Vue.js behaving abnormally due to certain circumstances

Currently, I am working on a vue application where I encountered some errors related to script execution on certain websites. By implementing the following code snippet, the issue is resolved: if ( window.location.href === 'chrome-extension:// ...

The image slide change feature ceases to function properly when incorporating two separate functions

I have a function that successfully changes the image of a container every 5 seconds. However, I am facing an issue when trying to add 2 containers side by side and change their images simultaneously. When I run the functions for both containers, only one ...

Is there a way to collect multiple optional phone numbers dynamically using DOM manipulation?

I have a piece of code here where I am looking to dynamically add additional phone numbers as an optional field. Can anyone help me figure out how to achieve this? <div class="col-12 row border my-2 py-2"> <di ...

What is the most effective way to enlarge an HTML table in the center?

Currently, I am dynamically generating an HTML table using a repeater. The table consists of four columns that I populate with company data. My goal is to enable users to click on a row and have another row appear below it, containing a Google map and addi ...

Using the value immediately set by useState is not allowed

I'm facing a dilemma regarding react's useState and I'm unsure of how to resolve it. Here's some context: I have a registration form with field validation triggered onBlur. The validation works perfectly when I blur individual fields, ...

What is the best way to insert fresh input values into a different element?

click here to view image description I am working with an input element where I take input values and store them in an element. However, I would like to know how to input new values into the next element. Any assistance would be greatly appreciated. Thank ...

What is the mechanism through which createStore fetches the initialState from the reducer function in redux?

While analyzing the code of redux in createStore.js, I am having trouble understanding how it retrieves the initial state from the reducer function when it is specified as the 1st argument. https://github.com/reduxjs/redux/blob/master/src/createStore.js#L ...

There seems to be an issue with rendering or redirecting in Jade files, the routes folder, and server/app.js

//routes/meal.js var express = require('express'); var router = express.Router(); var app = express(); /* GET users listing. */ router.get('/meal', function(req, res, next) { res.render('/home/noah/Desktop/gadfit/views/meal.jad ...

CSS3 Transform can sometimes cause unpredictable z-index or depth arrangements

Could there possibly be a glitch in CSS3, or am I just making a simple mistake? Take a look at the page I'm currently working on: View Page I wish I could demonstrate the error, but its behavior seems to be completely unpredictable. Here's what ...

The error message "npm ERR! enoent" indicates that npm is unable to locate a specific file

How do I troubleshoot this issue? After attempting the master version, I encountered a similar error. My operating system is OSX Yosemite: bash-3.2$ yo meanjs You're utilizing the official MEAN.JS generator. ? Which version of mean.js would you like ...

Using Cypress and JWT, automate the login process for JHipster

Is there a way to automate the bypassing of the JHipster login screen? This is my goal: let jwt_token before(function fetchUser() { cy.request('POST', '/api/authenticate', { username: 'user', password: &a ...

Storing blank information into a Mongodb database with Node.js and HTML

Can someone please assist me with solving this problem? const express=require("express"); const app=express(); const bodyparser=require("body-parser"); const cors=require("cors"); const mongoose=require("mongoose"); ...

I am attempting to create a multi-line tooltip for the mat-icon without displaying " " in the tooltip

I attempted to create a multiline tooltip using the example below. However, the \n is showing up in the tooltip. I am looking to add a line break like we would with an HTML tooltip. Check out the code here. ...

What steps can I take to resolve the error message "TypeError: url.lastIndexOf is not a function" in three.js?

I am currently experimenting with loading a gLTF file in Three.js r105. After successfully loading the file, I decided to try changing the URL post-loading to see if it was possible. However, this decision led me straight into a problem. Initially, I atte ...

Is it possible to add a click event to a table row that contains an input checkbox, without interfering with the ability to click the checkbox itself?

I have a table: <table> <tr> <td>Something</td> <td>Something Else</td> <td><input type='checkbox' value='clickme' id='yes'></td> </tr> When a user ...

Clicking on an element in React Material UI Autocomplete will bring it

I'm currently working with a material-ui autocomplete element <Autocomplete id="combo-box-demo" autoHighlight openOnFocus autoComplete options={this.state.products} getOptionLabel={option => option.productName} style={{ width: 300 ...

Discovering the name of an object property by locating its corresponding id

I am working with a basic JSON data structure where I need to retrieve the name from an object by comparing its ID. For example, if I have the number 2, I need to check if it matches any object's ID. If the ID is equal to 2, then I must fetch the corr ...

Is it possible to modify the icon of a date picker in Ant Design?

Is it feasible to switch the icon of a date picker from the ant design framework to a material ui icon? https://i.sstatic.net/blbH1.png Material UI icon for reference: https://i.sstatic.net/zpJsZ.png ...