使用 create-react-app + typescript + immutable.js 的问题

Question

我最近注意到 create-react-app 现在支持打字稿但是运行移植我现有的代码库时出现问题，该代码库使用 react-scripts-ts 其中我的大部分类来自 Record can no-longer be constructed with errors of the format: Cannot set on an immutable record. I found an old Babel issue 这听起来很相似，但我找不到任何关于如何配置 Babel 来避免这个问题的文档。我怎样才能让它工作？

我按照 here 所述使用 Immutable.js，例如

import { Record } from 'immutable'

interface PersonProps {
  firstName: string
  lastName: string
}

const defaultPersonProps: PersonProps = {
  firstName: '',
  lastName: '',
}

class Person extends Record(defaultPersonProps) implements PersonProps {
  public readonly firstName!: string
  public readonly lastName!: string

  public constructor(values: PersonProps) {
    super(values)
  }
}

见github issue

Answer 1

如果不对此进行测试，将您的代码重构为以下内容是否有帮助？

import { Record } from 'immutable'

interface PersonProps {
  firstName: string
  lastName: string
}

const personPropsRecord = Record({
  firstName: '',
  lastName: '',
});

class Person extends personPropsRecord implements PersonProps {
  public readonly firstName!: string
  public readonly lastName!: string

  public constructor(values: PersonProps) {
    super(values)
  }
}

Answer 2

我不得不重新编写代码以避免使用 !并实现 Readonly<PersonProps> 而不是 PersonProps 以获得关于不变性的类型提示。

Answer 3

我认为解决这个问题的合适方法是在 "loose: false" 选项中添加“@babel/plugin-proposal-class-properties”以避免赋值（参见 babel doc on assignment vs definition ：https://babeljs.io/docs/en/babel-plugin-proposal-class-properties#via-babelrc-recommended-） .它将改为使用 Object.defineProperty。 Immutable.Record.

无法赋值

这是我的基本示例，从 create-react-app --typescrip 开始，我弹出了 create-react-app 以快速测试这个 "loose: false" 选项并且它有效（参见 [= 的 babel 部分21=]): https://github.com/kimulus/typescriptimmutablerecord

使用 create-react-app + typescript + immutable.js 的问题

Issue using create-react-app + typescript + immutable.js

typescript

create-react-app

immutable.js