TypeScript中如何简化Mobx makeAutoObservable字段排除及无前置声明赋值

1. TypeScript中能否不提前声明字段直接赋值？ #

在TypeScript默认的严格模式下不可以。TypeScript的类型系统要求类的实例属性必须提前声明，否则会触发编译错误——这是为了避免隐式any类型，保证类型安全。

如果要绕过这个限制，只能修改tsconfig.json关闭相关检查（比如strictPropertyInitialization: false、noImplicitAny: false），但这会丢失TypeScript的核心类型校验优势，不推荐在生产环境使用。

2. 更简洁的非可观察字段排除方式 #

针对MobX的makeAutoObservable，有几种比逐个字段设置false更高效的方案：

方式一：使用exclude数组（MobX 6+支持） #

在配置对象中直接传入exclude数组，批量列出所有需要排除的字段名：

constructor(notifier: Notifier, apiClient: any) {
    makeAutoObservable(this, {
        exclude: [
            "notifier", 
            "apiClient", 
            "navigator", 
            "loadOperation", 
            "textFilter", 
            "showInactiveFilter", 
            "sorter", 
            "pager", 
            "orchestrator", 
            "lifecycle"
        ]
    })

    // 后续字段赋值逻辑保持不变
}

方式二：批量归类非可观察字段 #

把所有非可观察的依赖、工具类包装到一个单独的属性中，只需要排除这一个属性即可：

class List {
    readonly dependencies: {
        notifier: Notifier;
        apiClient: any;
        loadOperation: LoadOperation;
        textFilter: TextFilter;
        showInactiveFilter: ShowInactiveFilter;
        sorter: Sorter;
        pager: Pager;
        orchestrator: Orchestrator;
        navigator: Navigator;
        lifecycle: Lifecycle;
    };

    constructor(notifier: Notifier, apiClient: any) {
        makeAutoObservable(this, {
            dependencies: false
        })

        this.dependencies = {
            notifier,
            apiClient,
            loadOperation: LoadOperation(this.executeLoad, { onError: this.loadFailed }),
            textFilter: TextFilter(),
            showInactiveFilter: ShowInactiveFilter(),
            sorter: Sorter(),
            pager: Pager(),
            orchestrator: Orchestrator({
                loadOperation: this.dependencies.loadOperation,
                filters: [this.dependencies.textFilter, this.dependencies.showInactiveFilter],
                sorter: this.dependencies.sorter,
                pager: this.dependencies.pager
            }),
            navigator: Navigator(),
            lifecycle: Lifecycle(this.dependencies.loadOperation.execute)
        }
    }
}

这种方式既减少了排除项数量，也让代码结构更清晰，把非可观察的工具类和依赖统一管理。

方式三：用makeObservable替代makeAutoObservable #

如果类中需要变成可观察/动作/计算属性的成员远少于非可观察字段，可以反过来，用makeObservable只显式声明需要MobX处理的字段，剩余字段默认不会被处理：

constructor(notifier: Notifier, apiClient: any) {
    // 仅声明需要MobX管理的成员
    makeObservable(this, {
        executeLoad: action,
        loadFailed: action,
        // 其他可观察属性、计算属性...
    })

    // 非可观察字段赋值逻辑保持不变
}

这种方式适合可观察成员较少的场景，无需逐个排除非可观察字段。

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