Implementing a TypeScript generic function that converts strings to primitive types

Question

Is it possible in TypeScript to implement a generic function that automatically converts a string value to a primitive type specified as the generic function's type argument?

Basically I would like to do something like this:

const v1: boolean = getValue<boolean>("false"); // returns false
const v2: number  = getValue<number>("2345");   // returns 2345
const v3: string  = getValue<string>("2345");   // returns "2345"
const v4: number  = getValue<number>("false");  // throws an error

Answer 1

Instead, since Typescript erases types at compile time, you should instead specify the type as a parameter. I will leave the JS implementation up to you, and more specifically focus on getting the return type correctly.

Notably, you can't get an inferenced return value, specifically like false or "2345", this is just a limitation of how we infer the values.

// bigInt, Symbol, not given, but can be supported
const getValue = <T extends boolean | string | number, U extends `${T}`>(
  s: U, 
  t: T extends string ? "string"
    : T extends number ? "number"
    : T extends boolean ? "boolean"
    : never
): T => {
  return null! // Implementation left up to you
}

const v1: boolean = getValue("false", "boolean"); // returns false
const v2: number  = getValue("2345", "number");   // returns 2345
const v3: string  = getValue("2345", "string");   // returns "2345"
const v4: number  = getValue("false", "number");  // throws an error

View this on TS Playground

Answer 2

/** Every primitive compatible with a string template */
type Primitive = number | bigint | boolean | string | null | undefined;

function getValue<T extends Primitive, U extends `${T}` = `${T}`>(value: U):
  U extends `${number}` ? number :
  U extends `${bigint}` ? bigint :
  U extends `${boolean}` ? boolean :
  U extends `${null}` ? null :
  U extends `${undefined}` ? undefined :
  string extends U ? Primitive :
  string {
    // implementation
}

See in the Playground, where I’ve included a bunch of test cases for your perusal.

Note, you do not need to specify T, and usually shouldn’t. Mostly, you should just write getValue("1234"), and use the fact that it returns number.

But if you do write getValue<number>("true"), you will get an error, because "true" is not a valid `${T}`, that is, not a valid `${number}`.

Bear in mind that this is only useful if the string values are known (or limited to a specific subset) at compile time. If you pass in a string, you won’t be able to tell what you’ll get out, which is why my penultimate case just repeats all the possible options, because there’s no way to know what the string actually holds (if you pass in a known string, that we can tell is not a number, boolean, null, or undefined, that’ll just get returned as string, which I presume is what you would do).

Beyond that, explicit getValue<string> annotation is going to cause headaches. It doesn’t meaningfully restrict anything, since getValue<string>("1234") is perfectly valid as "1234" is a `${string}` (that is to say, it is a string). And because it doesn’t meaningfully restrict anything, we can’t infer that it returns string—because it might return, say, number if the runtime value is "1234". The signature above correctly captures this, but it means that getValue<string> is close to useless. Worse, even if you do have a specific string, adding <string> will turn off inference for U, and instead TS just uses the default value of `${T}` (which is the same as `${string}` which is the same as string). So even getValue<string>("test") will return Primitive, even though getValue("test") will return string.

One other useful feature is that this handles type unions gracefully. If you have (val: '1324' | 'false') => getValue(val), it will return number | boolean.