reactjs - როგორ დავაყენოთ ტიპები react-router-dom-ისთვის?

ჩემი React TypeScript პროექტში, ეს კოდი მაქვს:

import { useLocation } from 'react-router-dom';

export function App() {
  const location = useLocation();
  const background = location.state && location.state.background;
  ...
}

Typescript ჩივის, რომ „Property 'background' არ არსებობს ტიპზე '{}'.ts(2339)“. როგორ უნდა გავაფართოვო Location ტიპი და გავახალისო ts?

პასუხი #1

ჩვეულებრივ since react-router-dom useLocation აღარ იღებს გენერიკულ პროპსებს როგორც useLocation<{background: boolean}>, თქვენ შეგიძლიათ გამოიყენოთ იგივე გადაწყვეტილება, რაც იყენებს Redux Toolkit useDispatch და useSelector-თან ერთად, და უბრალოდ დაამატოთ ინტერფეისი. აი მაგალითი :

import { useLocation } from "react-router-dom";
import type { Location } from "react-router";

// T is to make a generic type so you can use it wherever you want. Feel free to export in into another common types file.
interface LocationWithState<T> extends Location {
  state: T;
}

interface LocationState {
  background: boolean;
  foo: number;
}

export function App() {
  const location = useLocation() as LocationWithState<LocationState>;
  const background = location.state.background; // works ✅
  const foo = location.state.foo; // works ✅
  const bar = location.state.bar; // error ❌
}