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

What methods are available to change one JSON format into another?

The types 'X' and 'string' do not intersect

Mapping the preselected values of multiple input fields into an array in Angular 6: A step-by-step guide

Finding the location of a file within a published web component

Can you explain the execution process of this Http.post method and provide details about the code path it follows

Is there a method we can use to replace fixture fields with data created during the test case to produce a dynamic payload? (Already attempted existing solution)

Slate - developing a TypeScript function to filter and retrieve an object containing the highest property value

Challenges faced with the Nativescript Software Development Kit

Ionic app: refresher functionality works in browser but not on iOS home screen app

Finding the total of values within an array in Angular 2 and Ionic 2 by utilizing *ngfor

The declaration file for the 'express' module could not be located

What is the best way to check the API response status in NextJS13?

Using TypeScript to pass objects to an arrow function

Angular testing with Jasmine and TypeScript

Error: Typescript foreach loop encountering 'Expression yields void type'

Tips for accurately implementing the onHoverIn TS type in the React Native Web Pressable component

In React and TypeScript, when I pass a state as a prop, the data fails to render

Tips for Customizing the Width of Your Material UI Alert Bar

How come the type checker is not throwing an error for this indexable type?

Vue: rendering props cannot be utilized with TSX