使用枚举重载 TypeScript 函数

Question

在尝试使用 TypeScript 结合作为参数传递的枚举和类型取决于枚举的第二个参数来实现函数重载时，我遇到了一个小问题。

例如:

如果枚举是 FOO ，那么第二个参数是 string类型

如果枚举是 BAR ，那么第二个参数是 number类型

如果枚举是 BAZ , 没有第二个参数

我的代码如下，但不知何故 TypeScript 会抛出一个错误，因为即使我在检查枚举的第一个参数时，智能感知也不会缩小第二个参数的类型: fieldValue总是 string | number .

enum ViewName {
    FOO = 'foo',
    BAR = 'bar',
    BAZ = 'baz'
}

function myFunction(viewName: ViewName.FOO, stringValue: string);
function myFunction(viewName: ViewName.BAR, numberValue: number);
function myFunction(viewName: ViewName.BAZ);
function myFunction(viewName: ViewName, fieldValue?: string | number): void {

    if (viewName === ViewName.FOO) {
        fieldValue = fieldValue.reverse();
    }

    if (viewName === ViewName.BAR) {
        fieldValue *= 2;
    }

    if (viewName === ViewName.BAZ) {
        return console.log('No fieldvalue is supplied by BAZ.');
    }

    console.log(fieldValue);
}

代码也可以在 TypeScript Playground上查看.

Answer 1

Typescript 不会根据第一个参数的类型来缩小第二个参数的类型。此功能未在 typescript 中实现。

您可以向 if 添加额外的检查。让编译器缩小 fieldValue 的类型

function myFunction(viewName: ViewName.FOO, stringValue: string);
function myFunction(viewName: ViewName.BAR, numberValue: number);
function myFunction(viewName: ViewName.BAZ);
function myFunction(viewName: ViewName, fieldValue?: string | number): void {

    if (viewName === ViewName.FOO && typeof fieldValue === "string") {
        fieldValue = fieldValue.reverse();
    }
    else if (viewName === ViewName.BAR && typeof fieldValue === 'number') {
        fieldValue *= 2;
    }

    console.log(fieldValue);
}

或者你可以只使用类型断言:

function myFunction(viewName: ViewName.FOO, stringValue: string);
function myFunction(viewName: ViewName.BAR, numberValue: number);
function myFunction(viewName: ViewName.BAZ);
function myFunction(viewName: ViewName, fieldValue?: string | number): void {

    if (viewName === ViewName.FOO) {
        fieldValue = (fieldValue as string).reverse();
    }
    else if (viewName === ViewName.BAR) {
        fieldValue =  (fieldValue as number) * 2;
    }

    console.log(fieldValue);
}

更大的变化是使用可区分的联合，这将允许编译器以更预期的方式缩小参数的类型:

function myFunction(p: { viewName: ViewName.BAZ }
    | { viewName: ViewName.BAR, fieldValue: number }
    | { viewName: ViewName.FOO, fieldValue: string }): void {

    if (p.viewName === ViewName.FOO) {
        p.fieldValue =  p.fieldValue.reverse();
    }
    else if (p.viewName === ViewName.BAR) {
        p.fieldValue *=  2;
    }

    console.log(fieldValue);
}