Question

我最近注意到create-react-app现在支持打字稿，但是在移植使用react-scripts-ts的现有代码库时遇到了问题，在该代码库中，我从Record派生的大多数类再也无法构建有错误了格式：Cannot set on an immutable record.，我发现一个听起来很旧的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，vs vs definition：{{3} }。相反，它将使用Object.defineProperty。无法使用Immutable.Record进行分配。

这是我的基本示例，从create-react-app --typescrip开始，我弹出了create-react-app来快速测试此“ loose：false”选项，并且它起作用了（请参阅package.json的babel部分）：https://babeljs.io/docs/en/babel-plugin-proposal-class-properties#via-babelrc-recommended-

使用create-react-app +打字稿+ immutable.js的问题

3 个答案: