React 17+函数组件TypeScript项目中为Enum添加函数的方案咨询

结论 #

仅包含静态方法的工具类是该场景下完全合理的可行方案，不存在你担心的突变相关隐患。

静态工具类的合理性说明 #

React推广函数组件的核心是规避类组件的特定痛点，和仅含静态方法的工具类没有冲突：

• 类组件的风险点主要来自this指向绑定问题、内部可变状态的不可预期突变、生命周期逻辑耦合严重，和Hook的心智模型不匹配
• 仅含静态方法的工具类不会被实例化，也不持有任何内部可变状态，所有方法均为输入输出唯一的纯函数，完全不存在上述隐患，可放心使用。
  对应的实现代码参考：

class ModeUtil {
    public static toString(mode: Mode) {
        return Mode[mode];
    }
}

其他可选实现方案 #

如果你更偏好Enum搭配同名namespace的写法，也可以通过调整ESLint规则规避报错：
@typescript-eslint/no-namespace规则本身支持配置例外，你可以开启规则的allowDeclarations选项，允许用于声明合并的namespace使用，也可以直接在代码行添加临时禁用注释：

enum Mode {
    X,
    Y
}

// eslint-disable-next-line @typescript-eslint/no-namespace
namespace Mode {
    export function toString(mode: Mode): string {
        return Mode[mode];
    }

    export function parse(mode: string): Mode {
        return Mode[mode as keyof typeof Mode];
    }
}

如果既不想用类也不想用namespace，也可以直接把工具函数单独导出，更贴合纯函数式的代码风格：

export enum Mode {
    X,
    Y
}

export function modeToString(mode: Mode): string {
    return Mode[mode];
}

export function parseMode(modeStr: string): Mode {
    return Mode[modeStr as keyof typeof Mode];
}

你可以根据团队的代码规范和开发习惯自行选择合适的方案。

内容的提问来源于stack exchange，提问作者v3gard