Return either a wrapped or base type based on the condition

Question

Return either a wrapped or base type based on the condition

I am a beginner in TypeScript and I'm struggling to find the right combination of search terms to solve my issue. It seems like using a type condition could be helpful, but I still need to grasp how they function.

My goal is to pass a function that performs some sort of manipulation. If the function returns a specific type, then I would like to enclose it in a box; otherwise, return the original value.

For example:

class Box<T> {
    value: T;
    constructor(value: T) {
        this.value = value;
   }
}

function wrapIfString<T, TResult>(fn: (value: T) => TResult, value: T): 
   TResult extends string ? Box<string> : TResult {

   const result = fn(value);
   if (value instanceof String) {
       return new Box<string>(result);
   }

   return result;
}

However, this code does not compile. Can this be achieved in TypeScript?

typescript

Answer 1

Answer №1

Here is a solution for conditional return types that can sometimes lead to issues. Instead of using conditional return types, it may be cleaner and simpler to overload like this:

class Box<T> {
    value: T;
    constructor(value: T) {
        this.value = value;
   }
}


function wrapIfString<T>(fn: (value: T) => string, value: T): Box<string>
function wrapIfString<T, TResult>(fn: (value: T) => TResult, value: T): TResult
function wrapIfString<T, TResult>(fn: (value: T) => TResult, value: T): TResult | Box<string> {
   const result = fn(value);
    if (value instanceof String && typeof result === "string") {
       return new Box<string>(result);
   }
   return result;
}


const testType = wrapIfString((n) => "", "hello") // Box<string>
const testType1 = wrapIfString((n) => n * n, 5) // number

Answer 2

Here is a solution for conditional return types that can sometimes lead to issues. Instead of using conditional return types, it may be cleaner and simpler to overload like this:

class Box<T> {
    value: T;
    constructor(value: T) {
        this.value = value;
   }
}


function wrapIfString<T>(fn: (value: T) => string, value: T): Box<string>
function wrapIfString<T, TResult>(fn: (value: T) => TResult, value: T): TResult
function wrapIfString<T, TResult>(fn: (value: T) => TResult, value: T): TResult | Box<string> {
   const result = fn(value);
    if (value instanceof String && typeof result === "string") {
       return new Box<string>(result);
   }
   return result;
}


const testType = wrapIfString((n) => "", "hello") // Box<string>
const testType1 = wrapIfString((n) => n * n, 5) // number

Return either a wrapped or base type based on the condition

Answer №1

Similar questions

`ng-apexcharts` causing unit test failures

Step-by-step guide for importing a JSON file in React typescript using Template literal

Issue with Angular Checkbox: Inconsistencies in reflection of changes

Is the client component not initializing the fetch operation?

Is there a way to utilize Typescript enum types for conditional type checking?

Troubleshooting compilation issues when using RxJS with TypeScript

The spread operator seems to be malfunctioning whenever I incorporate tailwindcss into my code

The utilization of conditional expression necessitates the inclusion of all three expressions at the conclusion

having difficulties with angular subscribing to an observable

Understanding how to use TypeScript modules with system exports in the browser using systemjs

Only map property type when the type is a union type

What is the best way to initialize a discriminated union in TypeScript using a given type?

Using kotlinx.serialization to deserialize a JSON array into a sealed class

Is it possible to assign a type conditionally depending on the value of a boolean?

The Angular 2 Router's navigation functionality seems to be malfunctioning within a service

What is causing VSCode's TypeScript checker to overlook these specific imported types?

Creating a signature for a function that can accept multiple parameter types in TypeScript

What is causing the TypeScript error in the MUI Autocomplete example?

Anyone have any suggestions on how to resolve the issue with vertical tabs in material UI while using react.js?

Is there a way to position the label to the left side of the gauge?