Discovering the data type in Typescript through the use of Generics

In my data structure, I am using generics to build it. However, when I try to populate data, I encounter the need to convert simple formats into the correct types. The issue arises as the class is configured with Generics, making it difficult for me to determine the type of data in other parts of the code.

Below is a snippet extracted from my code:

export class Field<T> {
    private Name_: string;
    private Value_: T;

    constructor(FieldName:string, Data?:T) {
        this.Name_ = FieldName;
        if( Data !== undefined) {
            this.Value_ = Data;
        }
    }

    /**
     * Get the data value from this class
     * @returns T The value from Value_
     */
    get Value(): T {
        return this.Value_;
    }

    get Type(): string {
        return typeof this.Value_;
    }

    /**
     * Set the data into the data value
     * @param Data T Generic Data member as the raw data to be stored in the field.
     */
    set Value(Data:T) {
        this.Value_ = Data;
    }
}

This example illustrates the challenge I am facing. My data structure (Field) is characterized by a generic (Field), and I anticipate that the data's value should match that type.

I have been attempting to test this but have been unsuccessful in retrieving the type from the Object (as it belongs to the Field type). Therefore, my approach was to ascertain the type of the internal data field.

    describe('Get Type of Value', () => {
        let TestField:Field<number> = new Field<number>('Age', 32);
        it('should return the value type from the definition', () => {
            expect(TestField.Type).toBe('number');
        });
    });

However, the test fails showing that the Type getter function is returning undefined.

 FAIL  
    Expected value to be (using Object.is):
      "number"
    Received:
      "undefined"

Answer ā„–1

Your solution is working perfectly:

TypeScript Playground

It seems like your test runner (maybe Jest?) is causing some issues. Try moving the let newUser... declaration inside the

it('...', () => { /* here */ })
block and give it another go.

Just a heads up, in JavaScript convention, variables should be named using camel case.

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

Loop through JSON results in Ionic using Angular

I am struggling to retrieve data from a JSON file in Object format using Typescript. When I try to fetch the data from the API, it doesn't display as expected. Typescript this.http.get('http://example.com/api') .subscribe((data) => { ...

update the data source of the material table inside the subscription

Seeking guidance for updating a MatTable datasource within an Angular application. The current Typescript code involves fetching data from an API using AdminService, iterating over the results to make additional API calls for more information about a fleet ...

Since integrating redux-persist, accessing the current state of the redux store has become a challenge

For the past two days, I've been searching for answers to my problem without any luck. It seems like no one else is experiencing the exact issue I'm having, so I must be missing something obvious. Ever since I added redux-persist, I can no longe ...

Issues with functionality of React/NextJS audio player buttons arise following implementation of a state

I am currently customizing an Audio Player component in a NextJs application using the ReactAudioPlayer package. However, the standard Import Next/Audio and using just <Audio> without props did not yield the expected results. The player functions as ...

Manipulating arrays of objects using JavaScript

I am working with an array of objects represented as follows. data: [ {col: ['amb', 1, 2],} , {col: ['bfg', 3, 4], },] My goal is to transform this data into an array of arrays like the one shown below. [ [{a: 'amb',b: [1], c ...

Arrange a JavaScript map based on its values and ensure that a specific field index remains at the top position

I'm sure this question may seem simple to some, but as a JavaScript novice, I couldn't find the answer myself. Here is the code snippet I'm working with: Let map = new Map<String,String> map.set('0', select) map.set('1&a ...

What happens when i18next's fallbackLng takes precedence over changeLanguage?

I am currently developing a Node.js app with support for multi-language functionality based on the URL query string. I have implemented the i18next module in my project. Below is a snippet from my main index.ts file: ... import i18next from 'i18next& ...

Interference of NestJS provider classes in separate event loops causing conflicts

I'm currently facing an issue where my shared library injectables are conflicting with each other. The bootstrap file initiates this file alongside a proxy server to start local microservices import { serviceA } from '@company/serviceA' imp ...

Angular 2 - Ensuring service executes only when boolean condition is met

I am currently dealing with a navigation menu that utilizes the ng2-page-scroll module. When scrolling through the page using hashtag links, I encountered an issue. If I navigate across routes, there is a delay in loading the data. As a result, the servic ...

Preventing duplicate arrays from being stored in localStorage by validating them

Is there a way to ensure that when the "add to favorites" button is clicked, its data is stored in localStorage only once? If it already exists in localStorage, clicking for a second time should not have any effect except showing an alert message. I would ...

Assigning union values to an object array: a guide for Typescript

When working with union typed values in an object array, how should the setState() function be implemented? enum SomeStateEnum { IsRunning, Name, } type PersonState = { [SomeStateEnum.IsRunning]: boolean; [SomeStateEnum.Name]: string; }; const st ...

Vue3 and Ionic combined to create a Component that became a reactive object in Vue

Vue is issuing a warning about receiving a Component as a reactive object, which can cause unnecessary performance overhead. The warning suggests using markRaw or shallowRef instead of ref to avoid this issue. However, in my code, I am not explicitly using ...

Resolving "SyntaxError: Unexpected identifier" when using Enzyme with configurations in jest.setup.js

I'm currently facing an issue while trying to create tests in Typescript using Jest and Enzyme. The problem arises with a SyntaxError being thrown: FAIL src/_components/Button/__tests__/Button.spec.tsx ā— Test suite failed to run /Users/mika ...

"Send the selected radio button options chosen by the user, with the values specified in a JSON format

My current task involves inserting radio button values into a MySql database using Angular. The form consists of radio buttons with predefined values stored in a json file. Below is an example of how the json file is structured: //data.json [{ "surve ...

Generating output from a callback function in TypeScript

When I execute a graphql query, the showUsers function is supposed to display all users (styled as boxes). However, at the moment, nothing is showing up. I am utilizing a functional component instead of a class component. This function is invoked after m ...

Encountering the error message "Unable to access properties of null (specifically 'useState')" while trying to utilize a component from my custom library

After developing a personalized UI library and style guide to standardize components in my application, all was running smoothly until I incorporated a component utilizing the useState hook. An error consistently surfaces whenever I attempt to use a compo ...

What is the process for implementing an abstract factory pattern in Typescript?

Iā€™m currently facing a challenge while attempting to incorporate a standard abstract factory pattern in Typescript, only to find that the compiler is not quite on board with my efforts. Below is a simplified version of the code I am working with: abstra ...

Leveraging the ngFor local variable within nested elements

Is there a way to properly display a property of the local variable theme, such as theme.name? Below is an example of how my *ngFor is structured: <ul> <li *ngFor="#theme of themes"> <span>theme.name</span> </li> ...

How can we effectively implement alert notifications for validating image sizes and formats prior to uploading?

code playground : https://codesandbox.io/s/quizzical-lamport-ql5ep I'm encountering an issue with the code provided in the CodeSandbox link. https://i.sstatic.net/xg3aK.png I've attempted to resolve this issue using various methods, but unfortu ...

The FileSaver application generates a unique file with content that diverges from the original document

I'm attempting to utilize the Blob function to generate a file from information transmitted via a server call, encoded in base64. The initial file is an Excel spreadsheet with a length of 5,507 bytes. After applying base64 encoding (including newlines ...