Question

我尝试使用react 16.8和typecipt 3.4.5创建具有不变道具的react组件

在这种情况下，打字稿会引发错误，

project >> properties >> C/C++ Build >> settings >> GCC C++ Compiler >> Dialect >> Other dialect flags >> --std=c++1z

interface IProps {
  readonly user: {name: string}
}

const User = (props: IProps) => {
  props.user = {name: "Foo"}
  return <>props.user.name</>;
};

但是当我使用解构道具时，打字稿允许修改道具：

Error:(8, 9) TS2540: Cannot assign to 'user' because it is a read-only property.

我希望打字稿在两种情况下都将引发错误。

Answer 1

readonly属性可以初始化：

在声明它的站点（ES6中的镜像const）
在类的构造函数中

在此代码中

const User = (props: IProps) => {
  props.user = {name: "Foo"}
  return <>props.user.name</>;
};

props的调用者已经声明并初始化了props.user对象及其User属性（正在传递给User组件）。可以props.user设置位置。

在此代码中

const User = ({user}: IProps) => {
  user = {name: "Foo"}
  return <>user.name</>;
};

属性user（不在括号内）与接口无关，因为User本身未实现该接口。接受实现接口的参数的函数本身并不实现此接口。

Answer 2

欢迎堆栈溢出。

我不确定打字稿，但是在ES6中，当您使用const这样保护变量时：

const x = {name: "John"}

此代码将给出错误：

x = {name: "Mikkel"}

但这不会：

x.name = "mikkel"

它所能防止的只是x被覆盖，而不是对象的内部。我怀疑打字稿也在做

为什么readonly关键字不适用于解构

2 个答案: