What is the correct way to use useParams with TypeScript?

[NoahELE]

import { useParams } from 'wouter';

export default function Hello() {
  const params = useParams(); // eslint report `Unsafe assignment of an `any` value.`
  return (
    <div>
      <h1>Hello, {params.name}</Heading>
    </div>
  );
}

How to correctly type the params variable? I tried adding generic type variables but it didn't work.

[molefrog]

import { useParams } from 'wouter';

export default function Hello() {
  const params = useParams(); // eslint report `Unsafe assignment of an `any` value.`
  return (
    <div>
      <h1>Hello, {params.name}</Heading>
    </div>
  );
}

How to correctly type the params variable? I tried adding generic type variables but it didn't work.

useParams can’t automatically infer the type of parameters used, so it returns any by default. So you need to cast it manually, or provide a generic argument: useParams<{ id: string }>(). Does that work?

Also, the types were broken for TS4.1 as shown here #360

[NoahELE]

providing generic argument and casting does not work, also I am using the latest TS 5.1. Does the types broke for TS version greater than 4.1?

[molefrog]

I have published v2.12.1, that fixes types for TS4.1+, could you try the new version?

[NoahELE]

Yeah, it worked in the new version. Thanks!