具有通用联合约束的 TypeScript 函数返回值

Question

我无法理解如何在 TypesScript 中实现泛型。我知道有很多类似的问题，但似乎没有一个可以解决我的用例。 （有this question，但我有一个不同的担心，即函数的输出与函数的输入是同一类型）

我想要一个这样的函数，其中泛型被限制为两种不同的类型，输出与输入的类型相同：

const increase = <T extends string | number>(
  param: T,
): T => {
    if (typeof param === "number") {
        // Here typescript should know that param can only be a number
        return param + 1;
    }
    // Here TypeScript should know that param can only be a string
    return "one more " + param;
};

const stringResult = increase("apple"); // "one more apple"
// Here TypeScript should know that stringResult is a string

const numResult = increase(2); // 3
// Here TypeScript should know that numResult is a number

但是，这会产生如下错误：

Type 'number' is not assignable to type 'T'.
  'number' is assignable to the constraint of type 'T', but 'T' could be instantiated with a different subtype of constraint 'string | number'.

但我在上面的if 语句中进行了类型检查，确保T 应该是number 而不是string | number。

我希望在 TypeScript 中实现什么？如果是这样，我做错了什么？

Answer 1

如果您不需要函数是箭头函数，您可以轻松地重载该函数：

function increase(param: string): string;

function increase(param: number): number;

function increase(param: string | number): string | number {
    if (typeof param === "number") {
        // Here typescript should know that param can only be a number
        return param + 1;
    }
    // Here TypeScript should know that param can only be a string
    return "one more " + param;
}

const stringResult = increase("apple"); // "one more apple"
// Here TypeScript should know that stringResult is a string

const numResult = increase(2); // 3
// Here TypeScript should know that numResult is a number

Playground Link

这还允许您提供单独的智能感知，详细说明取决于参数类型的行为差异。

如果您绝对需要该函数是箭头函数，请参阅this answer on how to overload an arrow function

因为 JavaScript 没有类型，所以它不能提供真正的函数重载。为了解决这个问题，TypeScript 允许你提供额外的函数签名来表达重载。函数的实际实现必须手动区分参数类型并选择适当的行为。另请参阅TypeScript Handbook。

Answer 2

是的，正如您所发现的，TypeScript 编译器不够复杂，无法按照程序的每条路径以这种方式检查类型。 Indexed types 可以解决您的问题，但这些对于您的用例来说还不够灵活。

有一种方法可以严格地做到这一点，但是——请记住——对于某些人来说，这可能有点 Java 风格：访问者模式。

本质上，如果您将每个可能的输入类型包装在一个类中，以便它们都实现一个共享接口，您可以编写访问者对象来执行您需要的任何功能，按类型键入，编译器将确保访问者对象对实现该共享接口的所有类都具有完全类型化的功能。而且看不到if 或switch，所以鲍勃叔叔不会抱怨。

这可能看起来像这样：

interface Increase<T> {
    value: T
    accept(visitor: IncreaseVisitor): T
}

class NumIncrease implements Increase<number>{
    constructor(public value: number) {}
    accept(visitor: IncreaseVisitor): number {
        return visitor.visitNum(this)
    }
}

class StrIncrease implements Increase<string>{
    constructor(public value: string) {}
    accept(visitor: IncreaseVisitor): string {
        return visitor.visitStr(this)
    }
}

interface IncreaseVisitor {
    visitNum(numIncrease: Increase<number>): number
    visitStr(strIncrease: Increase<string>): string
}

const oneMoreVisitor: IncreaseVisitor = {
    visitNum: (numIncrease: Increase<number>) => numIncrease.value + 1,
    visitStr: (strIncrease: Increase<string>) => "one more " + strIncrease.value
}

function increase <T>(param: Increase<T>): T {
    return param.accept( oneMoreVisitor )
}

const stringResult = increase(new StrIncrease("apple"))
console.log(stringResult) // "one more apple"
// Now TypeScript *does* know that stringResult is a string

const numResult = increase(new NumIncrease(2))
console.log(numResult) // 3
// Now TypeScript *does* know that numResult is a number