类型“{}”.ts 上不存在属性“计数器”的打字稿错误答案

【问题标题】：typescript error with Property 'counter' does not exist on type '{}'.ts类型“{}”.ts 上不存在属性“计数器”的打字稿错误
【发布时间】：2021-04-29 08:31:47
【问题描述】：

您好，我在 js 中有一个工作示例，正在尝试将其移植到 tsx，但我看到的错误是

类型'{}'.ts 上的多个位置不存在属性'counter'，请参见下面的代码中的注释“HERE”

App.tsx

import React from "react";
import { render } from "react-dom";
import Larry from "./larry";
import useCounter from "./use.counter";
import global from "./global";

const App3 = () => {
  global.counter = useCounter();   //<===== HERE 

  return (
    <>
      <Larry />
    </>
  );
};

export default App3;

larry.tsx

import React from "react";
import global from "./global";

export default function Larry() {
  return (
    <div style={{ marginBottom: 20 }}>
      <div>Larry: {global.counter.count}</div> //<===== HERE 
      <div>
        <button onClick={global.counter.increment}>Increment</button> //<===== HERE 
      </div>
    </div>
  );
}

use.counter.tsx

import { useState } from "react";

export default function useCounter() {
  const [count, setCount] = useState(0);
  const increment = () => setCount(count + 1);

  return {
    count,
    increment,
  };
}

global.tsx

export default {};

我很困惑为什么它适用于 JS 而不适用于 TSX。请帮忙:)

根据建议，我尝试了 "export default {counter: useCounter()}"

然后我能够编译，但在运行时我看到这个错误消息：

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    at resolveDispatcher (/Users/ka/proje…development.js:1476)
    at Object.useState (/Users/ka/proje…development.js:1507)
    at Object.useCounter [as default] (use.counter.tsx:4)
    at Object.<anonymous> (global.tsx:4)
    at Object.<anonymous> (global.tsx:5)
    at Module._compile (internal/modules/cjs/loader.js:1078)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1108)
    at Module.load (internal/modules/cjs/loader.js:935)
    at Module._load (internal/modules/cjs/loader.js:776)
    at Function.f._load (electron/js2c/asar_bundle.js:5)

【问题讨论】：

因为在全局中您导出了一个空对象。所以 {} 上不存在属性计数器 :)。 JS 不会因此而失败，因为它不检查类型而 typescript 会，因此得名。也许试试export default {counter: useCounter()}？
我尝试过，但由于出现未捕获的错误而失败。我将在这里更新描述。
是的，它失败了，因为你在组件等外部产生了反应钩子，打破了钩子的规则。试着用你的柜台做一个context，这更像是一种反应方式。示例：dev.to/keke_arif/…
基本上我想做的是创建可以在组件之间共享的全局共享变量......使用上下文是否有意义？如果原因是因为违反了钩子规则，那么它不应该在javascript中也被破坏吗？
你可以像下面建议的那样投射到any，仍然推荐一个上下文

标签： javascript reactjs typescript react-typescript

【解决方案1】：

如果您只想消除错误，将 global.counter = 更改为 (global as any).counter = 会有所帮助，但如果您打算长期使用 ts，则需要重新考虑您的代码。

有关您的案例和解决方案的更多信息： https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html#sequentially-added-properties

这篇文章是开始从js迁移到ts的好点。

【讨论】：