使用启用了新 typescript 的 reactjs 版本时超出了最大调用堆栈大小

Question

我使用新的 typescript 支持版本的 reactjs

与 redux-orm 一起，当你尝试将一个值插入到 store 中时，我会遇到“超出最大调用堆栈大小”的问题，这与旧模板相同

下面是带有新 typescript 支持的 reactjs 的代码，它会抛出错误 https://reactjs.org/docs/static-type-checking.html#typescript 和旧的 github 版本 https://github.com/microsoft/TypeScript-React-Starter 可以工作。

https://drive.google.com/open?id=15eolNjeYroyubgSmbGaaKfjxbe-IZ8KK

我无法理解导致新版本出现错误的不同之处。感谢您的帮助。

Answer 1

属性不能直接在模型类上定义。

根本原因在于 create-react-app 的 babel 预设 - 转译输出在 Model 原型链中引入了额外的属性描述符。

这些属性会干扰 redux-orm 在模式注册期间安装的描述符，从而导致 Maximum call stack size exceeded 错误。

这可以通过声明合并来避免，特别是通过提供具有匹配名称的类和接口。接口包含Model属性，类与JSModel定义几乎1:1。

例子：

interface Book {
    id: number
    title: string
}

class Book extends Model<typeof Book> {
    static modelName = 'Book' as const

    static fields = {
        id: attr(),
        title: attr()
    }
}

我创建了一个带有工作示例的存储库：https://github.com/tomasz-zablocki/redux-orm-ex-types-react-example

请注意，这些是自定义类型，但绝对是我想将 @types/redux-orm 包带到的地方，可能是 redux-orm 的 0.14 版本。