Ensuring type safety for a generic union type

Question

Ensuring type safety for a generic union type

A new union type has been defined:

type CustomParameterType = number | string | boolean | Array<number>;

An object is created to hold key-value pairs of this union type:

class CustomParameter
{
    constructor(name: string, value: CustomParameterType)
    {
        this.Name = name;
        this.Value = value;
    }

    public Name: string;
    public Value: CustomParameterType;
}

An array of these CustomParameters can be used to store keys and values:

let customParams: Array<CustomParameter> = new Array<CustomParameter>();
customParams.push(new CustomParameter("one", 1));
customParams.push(new CustomParameter("two", "param2"));

By implementing a GetParameter function, typed values can be retrieved from the array. Here's an example:

// should return a number with value 1
let numParam: number | undefined = this.GetParameter<number>("one", customParams);

// should return a string with value "param2"
let strParam: string | undefined = this.GetParameter<string>("two", customParams);

// should return undefined since 'two' is not of type number
let undefParam: number | undefined = this.GetParameter<number>("two", customParams);

However, there seems to be an issue with checking the generic type in the GetParameter function. It might require a type guarding function. Is it possible to resolve this?

Explore the example further in the TypeScript Playground: Playground

typescript typeguards

Answer 1

Answer №1

When TypeScript is compiled into JavaScript, the type T and its specific details like <number> or <string> are removed, resulting in no reference to T at runtime. This lack of presence means that using the instanceof operator on primitive types such as string and

boolean</code won't yield the desired results (<code>"foo" instanceof String

returns false).

To accommodate for this dynamic, you can introduce a type guard function as an argument in the GetParameter() function, ensuring its existence during runtime.

An updated version of GetParameter() would look like:

function GetParameter<T extends RequestParameterType>(
  parameterName: string,
  parameters: Array<RequestParameter>,
  guard: (x: RequestParameterType) => x is T // new param
): T | undefined {
  let result: T | undefined = undefined;

  for (let parameter of parameters) {
    if (parameter.Name === parameterName && guard(parameter.Value)) {
      result = parameter.Value;
    }
  }

  return result;
}

The guard() function must be able to narrow down an object of type RequestParameterType to type T. Here's an example set of guard functions you can implement:

const guards = {
  number: (x: RequestParameterType): x is number => typeof x === "number",
  string: (x: RequestParameterType): x is string => typeof x === "string",
  boolean: (x: RequestParameterType): x is boolean => typeof x === "boolean",

  numberArray: (x: RequestParameterType): x is number[] => Array.isArray(x) 
};

You can use the GetParameter() function with these guard functions as follows:

let numberParam = GetParameter("one", parameters, guards.number);
console.log(numberParam); // 1

let stringParam = GetParameter("two", parameters, guards.string);
console.log(stringParam); // param2

let undefinedParam = GetParameter("two", parameters, guards.number);
console.log(undefinedParam); // undefined

By replacing <number> with guards.number, you ensure correct type narrowing and expected output values. Good luck with your implementation!

Code Link

Answer 2

When TypeScript is compiled into JavaScript, the type T and its specific details like <number> or <string> are removed, resulting in no reference to T at runtime. This lack of presence means that using the instanceof operator on primitive types such as string and

boolean</code won't yield the desired results (<code>"foo" instanceof String

returns false).

To accommodate for this dynamic, you can introduce a type guard function as an argument in the GetParameter() function, ensuring its existence during runtime.

An updated version of GetParameter() would look like:

function GetParameter<T extends RequestParameterType>(
  parameterName: string,
  parameters: Array<RequestParameter>,
  guard: (x: RequestParameterType) => x is T // new param
): T | undefined {
  let result: T | undefined = undefined;

  for (let parameter of parameters) {
    if (parameter.Name === parameterName && guard(parameter.Value)) {
      result = parameter.Value;
    }
  }

  return result;
}

The guard() function must be able to narrow down an object of type RequestParameterType to type T. Here's an example set of guard functions you can implement:

const guards = {
  number: (x: RequestParameterType): x is number => typeof x === "number",
  string: (x: RequestParameterType): x is string => typeof x === "string",
  boolean: (x: RequestParameterType): x is boolean => typeof x === "boolean",

  numberArray: (x: RequestParameterType): x is number[] => Array.isArray(x) 
};

You can use the GetParameter() function with these guard functions as follows:

let numberParam = GetParameter("one", parameters, guards.number);
console.log(numberParam); // 1

let stringParam = GetParameter("two", parameters, guards.string);
console.log(stringParam); // param2

let undefinedParam = GetParameter("two", parameters, guards.number);
console.log(undefinedParam); // undefined

By replacing <number> with guards.number, you ensure correct type narrowing and expected output values. Good luck with your implementation!

Code Link

Ensuring type safety for a generic union type

Answer №1

Similar questions

The error message is: "Cannot access property 'up' of an undefined object within the material UI library using theme.breakpoints."

The TypeScript error is causing issues in the Express router file

Learn how to retrieve images from the web API at 'https://jsonplaceholder.typicode.com/photos' and showcase them on a webpage using Angular10

The method this.$el.querySelector does not exist

Mastering the art of Typescript typing

EventListener cannot be removed

Is there a way to verify the presence of multiple array indices in React with TypeScript?

Having trouble getting ng-click to function properly in TypeScript

Place information from an input field into a specific row within a table

Discover the subsite inventory of a SharePoint site using TypeScript

Incorporate an external JS file (File A) that is dependent on another JS file (File B) into a TypeScript file within the context of Angular 4

Exclude the initial argument from functions listed within a JSON structure

Angular keeps FormArray elements' validity up-to-date as new elements are added to the array

Capture Video on iOS devices using the MediaRecorder API and display it using HTML5 Video Player

Having trouble retrieving information from Node.js service in AngularJS 2

Applying a Typescript Generic to enhance the functionality of the API fetcher

When clicking initially, the default input value in an Angular 2 form does not get set

Storing numerous string labels and arrays in a TypeScript associative array

What is the method for retrieving the name of an object's property within an Angular template

ESLint not functioning properly on TypeScript (.ts and .tsx) files within Visual Studio Code