Question

作为React的新手开发人员，我刚刚意识到我一直在无意间直接改变状态和道具。

有很多例子：

const {variable} = this.props;
variable[index] = value;
// do something local with var - not realizing that variable is changed

我的代码库中有数百个实例。

是否有一条tslint规则或一种方法，可以找到对道具或状态进行了变异的每个实例，该实例应该是只读的。

我知道在

处有一条tslint规则

TS2540: Cannot assign to ‘url’ because it is a constant or a read-only property.

但是我不知道如何打开它。根据我的理解，在React Typescript中，道具和状态都包装在Readonly <>中，这在我每次尝试更改道具或状态时都会触发此错误。

Answer 1

在创建接口时，可以将它们声明为readonly，并在数组，道具和状态中使用ReadonlyArray，例如：

interface ButtonProps {
  readonly onChange: (event: ChangeEvent) => void;
  readonly classes: ReadonlyArray<string>;
}

class Button extends React.Component<ButtonProps> { ... }

这样，只要所有成员都是readonly，就应该遍历所有地方，而且打字稿编译器会出错，而不是tslint。

您可以做的一件事就是使用tslint-immutable中的规则，以确保您不会错过接口和数组上的任何readonly

使用tslint强制不变性

1 个答案: