typescript error with Property 'counter' does not exist on type '{}'.ts

Question

Hi I have a working example in js and am trying to port it over to tsx but the error I see is

Property 'counter' does not exist on type '{}'.ts at multiple locations see below in the code with the comment "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 {};

I am puzzled why it worked with JS but not with TSX. Please help: )

As per suggestion I tried "export default {counter: useCounter()}"

Then I was able to compile but during runtime I see this error message:

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)

Answer 1

if you want to just mute the error changing global.counter = to (global as any).counter = will help, but if you intend to use ts in long term you need to rethink your code.

More info about your case and solution with 'any': https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html#sequentially-added-properties

This article is a good point to start migrating from js to ts.