如何将类型作为函数参数传递

Question

I have the below types checking code to verify if userInput is one of the defined value

const variantColorValues = ['primary', 'black', 'green', 'red', 'white'] as const;
export type VariantColor = (typeof variantColorValues)[number];

function isOfTypeVariantColor(selectedColor: string): selectedColor is VariantColor {
  return (variantColorValues as readonly string[]).includes(selectedColor);
}

isOfTypeVariantColor('red') //true
isOfTypeVariantColor('purple') //false

The code above works great. However the code will bulk up if I implement same logic to other properties too, so I thought of turning isOfTypeVariantColor into a generic function.

function isOfType(userInput: string, valueList: string[]): userInput is VariantColor {
  return (valueList as readonly string[]).includes(userInput);
}

And my problem now is that I'm not sure how to turn userInput is VariantColor where VariantColor becoming a parameter

Answer 1

You could use this:

// Make sure to make valueList readonly so you can use readonly arrays like variantColorValues
function isOfType<T, U extends T>(userInput: T, valueList: readonly U[]): userInput is U {
  return (valueList as readonly T[]).includes(userInput);
}

const string: string = 'red';
if (isOfType(string, variantColorValues)) {
    string; // VariantColor
}

const number: number = 0
if (isOfType(number, [1, 2, 3] as const)) {
    number; // 1 | 2 | 3
}

T is the user input type and you are checking if userInput is type U . For example, when using isOfType with variantColorValues , T would be string and U would be VariantColor .

Playground link

---

Edit: Per Gerrit0's comment, you don't actually need two type parameters:

function isOfType2<T>(userInput: unknown, valueList: readonly T[]): userInput is T {
  return (value as readonly unknown[]).includes(userInput);
}

However, it won't pick up on this:

if (isOfType(number, variantColorValues)) {}
//                   ~~~~~~~~~~~~~~~~~~
// Argument of type 'readonly ["primary", "black", "green", "red", "white"]' is not assignable to parameter of type 'readonly number[]'.
//   Type 'string' is not assignable to type 'number'.

if (isOfType2(number, variantColorValues)) {
  number; // never
}

Playground link

Answer 2

Here's how I've done it:

const variantColorValues = ['primary', 'black', 'green', 'red', 'white'] as const;
export type VariantColor = (typeof variantColorValues)[number];

const variantRoleValues = ["teacher", "student"] as const; 
export type VariantRole = (typeof variantRoleValues)[number];

// This possibly isn't needed, it could be just strings, but I think it's good to explicitly narrow the types. 
type PossibleVariants = VariantColor | VariantRole

function isOfType<T extends PossibleVariants>(value: string, arrayOfPossibleValues: readonly T[]) : value is T {
   return (arrayOfPossibleValues as readonly string[]).includes(value);
}

Demo of use:

const t1  = "teacher"; // In this scenario typescript knows this is the narrowest type "teacher"

if (isOfType(t1, variantColorValues)){ // No error, this is what we want right? 
    if (t1 === 'red') { //t1 is of type never, it's annoying that this doesn't give you an error. 
     //see: https://github.com/microsoft/TypeScript/issues/28982
    
    }
}

const t2  = "teacher" as VariantRole; // For demo purposes, lets say we don't know if this is "teacher" or "student"

if (isOfType(t2, variantColorValues)){ // No error, this is what we want right? 
    if (t2 === 'red') { // t2 is of type never
}

const t3  = "teacher" as string; // For demo purposes, we don't know what kind of string this is. 

if (isOfType(t3, variantColorValues)){ // No error, this is what we want right? 
    if (t3 === 'red') { // t3 is of type "red" |"black" ... 

    if (t3 === 'student') { // expected error:  This condition will always return 'false' since the types '"primary" | "black" | "green" | "red" | "white"' and '"student"' have no overlap.(2367)

    }
}

Playground link