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

Question

我尝试使用 react 16.8 和 typescipt 3.4.5 创建具有不可变属性的 react 组件

在这种情况下 typescript 会抛出一个错误，

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.

但是当我对 Prop 使用解构时， typescript 允许修改 Prop :

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

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

我希望 typescript 在这两种情况下都会抛出错误。

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 属性(不在大括号内)与接口(interface)无关，因为 User 本身并未实现它。接受实现接口(interface)的参数的函数本身并不实现该接口(interface)。