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 functionality to generate personalized worldwide timezone pipe is not functioning

Clicking the button fails to trigger the modal popup

Resetting md-radio-button choices within an Angular 2 application

Developing custom events in an NPM package

ReactJS Provider not passing props to Consumer resulting in undefined value upon access

Executing npm and ng commands via an Ant script on a Windows machine leads to the error message "The specified file could not be found."

A different approach to handling multiple constructors in Angular 4

What is the correct approach to managing Sequelize validation errors effectively?

NPM installation stalls only when attempting to install the specific package, ts-jest

Dynamically loading components within an Angular application

Is there a method to create a typecheck for hasOwnProperty?

determine the values of objects based on their corresponding keys

Leveraging angular2-material with systemjs for Angular2 development

The current enablement status does not support the experimental syntax 'flow' (7:8):

Transform the IO type to an array of Either in functional programming with the fp-ts

Simulated FileList for Angular 5 App Unit Testing

When buttons are clicked within Angular Material's Card component, it automatically triggers the click event of the card itself

Is it possible to implement a customized pathway for the functions within an Azure function app?

Encountering issues when attempting to set up graphqlExpress due to type

The Axios function is unable to read the 'Ok' value because of undefined properties