Can't get a input value using typescript and use it, how to fix?

You are trying to get the 'value' property on a h1 element, which doesn't have this type of property. To get the content of the h1 element, you can set in a const h1 = document.getElementById('bla'); and then use another constant to put the property '.textContent' as const h1Value = h1?.textContent;

React is not recommended to affect the DOM without using React as much as possible.

You can use useRef hook for get value of H1. You can implement the useRef like below.

const inputElement = useRef(null);

return (
  <>
    <h1 ref={inputElement}>bla bla bla</h1>
    <Input
      onChange="handleChange"
      id="pokemonInput"
      placeholder="Pokemon name"
      className="border rounded w-1/2"
    />
    <Button>Pesquisar</Button>
  </>
);

And then, you can get the value like inputElement.current?.value

But I'd like to recommend you to use states in React.

States are simple to use it.

const [inputElement, setInputElement] = useState("bla bla bla");

function handleChange(e) {
  setInputElement(e.target.value);
}

return (
  <>
    <h1>{inputElement}</h1>
    <Input
      onChange="handleChange"
      id="pokemonInput"
      placeholder="Pokemon name"
      className="border rounded w-1/2"
    />
    <Button>Pesquisar</Button>
  </>
);

import { useRef, FormEvent } from "react";

function App()
{

const h1Ref = useRef<HTMLHeadingElement>(null)

const handleSubmit = (e:FormEvent<HTMLFormElement>)=>{
  e.preventDefault()
  console.log(h1Ref.current?.innerText)
}

  return (
    <>
    <div className="p-6 space-y-6">
      <div className="flex justify-center">
        <form onSubmit={handleSubmit} className="flex justify-between w-1/2">
          <h1 ref={h1Ref} id="bla">bla bla bla</h1>
          <input id="pokemonInput" placeholder="Pokemon name" className="border rounded w-1/2"/>
          <button type="submit">Pesquisar</button>
        </form>
      </div>

      <div className="flex justify-center">
        <img src="" id="pokemonImage" className="border rounded w-1/2"/>
      </div>
    </div>
    {/* <script type="module" src="./src/script.ts"></script> */}
    </>
  )
}

export default App

There are a few changes I have made to your code:

1. I have used useRef Hook instead of the document.getElementById. React.js was created to deal with the issue of having to manually deal with the real DOM that's why it uses the virtual DOM and the tree reconciliation algorithm before it goes to the real DOM to tear down things. React has a nice hook called useRef that allows you to reference DOM elements easily. useRef

const h1Ref = useRef<HTMLHeadingElement>(null) the <HTMLHeadingElement> is to tell typescript the type of ref it will be used on.

2. As you stated you wanted to log the inner text of the h1 so I have provided a function that logs it when you submit the form

const handleSubmit = (e:FormEvent<HTMLFormElement>)=>{
  e.preventDefault()
  console.log(h1Ref.current?.innerText)
}

3. You don't have to include your scripts that way. Your scripts should be in the index.html file. In case you want to add other scripts, add them to the index.html file as that serves as the root to your "ui".