在 useState 的调度中使用未声明的字段时如何获取打字稿错误

Question

理想情况下，我想知道为什么 ts 在下面的情况下不会抛出任何错误，以及是否有办法解决它以使其按预期工作。

尝试通过useState 的调度程序回调更新某些状态时，我预计会出现打字稿错误，但没有任何反应。这似乎是有效的：

  type State = {
    age?: number;
  };

  const [, setState] = useState<State>();

  setState((prev) => {
    // const copy = { ...prev };
    // this is a ts error;
    // copy.name = "scotty";
    // this is not
    return { ...prev, name: "scotty" };
  });

我希望 ts 在额外的未声明字段 name 上引发错误（我可以指定返回类型，但我不应该这样做，因为应该推断调度的参数 ((prevState: S) => S)）。

我怎样才能输入这样我得到我期待的 ts 错误；此更新唯一允许的字段应该是在State 中定义/类型的字段。

最重要的是为什么这不起作用？

这里有一个codesandbox 来玩。

Answer 1

Typescript 错误来自 typescript linter，它由您通常放在项目根目录的 tsconfig.json 文件定义。

并且您没有在您的codesandbox 中添加任何tsconfig.json

请将此 tsconfig.json 添加到您的根文件夹中，以获得您预期的 lint 错误：

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

将此添加到您的代码框后，我得到了预期的错误：

现在您可以在此错误中看到，它仍然允许您在不应添加的位置添加 name 属性。

为此，您只需将返回类型添加到您的 SetStateAction ：

  useEffect(() => {
    
    setState((prev):State => { // <=== Add the State return type here
      // const copy = { ...prev };
      // copy.name = "scotty";
      return { ...prev, name: "scotty" };
    });
  }, []);

单线解决方案：

  useEffect(() => setState((prev) => ({ ...prev, age: 9 })), []);