Почему React Router TS выдает ошибку loader при типизации параметров?

Question

[Boris007]

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    errorElement: <ErrorPage />,
    loader: rootLoader,
    children: [
      {
        path: "contacts/:id",
        element: <Contact />,
        loader: contactLoader <---- здесь ошибка 
      },
    ],
  },
]);

Название ошибки

Type '({ params }: { params: TParams; }) => Promise<IContact>' is not assignable to type 'LoaderFunction'.
  Types of parameters '__0' and 'args' are incompatible.
    Type 'LoaderFunctionArgs' is not assignable to type '{ params: TParams; }'.
      Types of property 'params' are incompatible.
        Property 'id' is missing in type 'Params<string>' but required in type 'TParams'.

type TParams = {
    id: number
}

type IContact = {
    first: string,
    last: string,
    avatar: string,
    twitter: string,
    note: string,
    favorite: boolean,
}

export async function loader({params}: { params: TParams}): Promise<IContact> {
  const contact = await getContact(params.id))
  return contact
}

Но при записи loader({params}: any), ошибки нет

В чем я ошибся при типизации параметра и почему он ссылается на какой-то 'LoaderFunction'?

Comments

[WbICHA]

Спешл фор ю:

Property 'id' is missing in type 'Params' but required in type 'TParams'.

[Boris007]

WbICHA, так, а в чём проблема?
Я указал, что в аргументах будет объект
Описал тип этого объекта

type TParams = {
    id: number
}

({params}: { params: TParams})

[Boris007]

WbICHA, даже, если указать
function loader(params: TParams)
Тогда ошибка

Type '(params: TParams) => Promise<IContact>' is not assignable to type 'LoaderFunction'.
  Types of parameters 'params' and 'args' are incompatible.
    Property 'id' is missing in type 'LoaderFunctionArgs' but required in type 'TParams'.

[WbICHA]

Boris007, наверно потому, что в LoaderFunctionArgs нет id? А следовательно нет никаких гарантий, что он будет передан? Тут 2 варианта: либо то, что в ответе тебе написали, либо принимать LoaderFunctionArgs и в теле уже через ин проверять наличие твоего ид.

[Boris007]

WbICHA,
Нашел в файлах роутера
Почему тут решили, что все params это обязательно строка?

export interface LoaderFunctionArgs extends DataFunctionArgs {
}

interface DataFunctionArgs {
  request: Request;
  params: Params;
  context?: any;
}

export type Params<Key extends string = string> = {
  readonly [key in Key]: string | undefined;
};

Переделав уже getContact и заменив везде, что id будет строкой, всё равно ошибка

export const loader:LoaderFunction = async (args: LoaderFunctionArgs) => {
  const contact = await getContact(args.params.id)
  return contact
}

Argument of type 'string | undefined' is not assignable to parameter of type 'string'.
  Type 'undefined' is not assignable to type 'string'.

Как сюда правильно подтянуть аргументы в парамс?

[WbICHA]

Boris007,

Почему тут решили, что все params это обязательно строка?

А тут что-то иное написано?

export type Params<Key extends string = string> = {
  readonly [key in Key]: string | undefined;
};

Переделав уже getContact и заменив везде, что id будет строкой, всё равно ошибка

И что непонятного в этой ошибке? Вот тут уже всё как раз предельно ясно написано.

[Boris007]

WbICHA, к сожалению я не совсем понимаю
Я первый раз пытаюсь изучить типизацию и много непонятно
На сколько я знаю, тут описывается, что мы можем только читать значения пропсов, но не изменять
Я не изменяю, так что ошибка с readonly отпадает
Так же описано, что все свойства строки или undefined, тоже вроде не моя ошибка, а скорее обыденное правило для свойств, что они строка или undefined, если свойства нет
Тип Params расширяет тип string и равен строке
После у нас чтение из параметров строковых свойств

Единственное, что мог предположить, что значение свойств должны быть строками
Я переделал id с number в string, но всё равно ошибка

[WbICHA]

Так же описано, что все свойства строки или undefined

Boris007, превосходно, а чего ждёт getContact?

[Boris007]

WbICHA,
Он ждет в аргументах строковой аргумент

type IContact = {
  id: string;
  first: string;
  last: string;
  avatar: string;
  twitter: string;
  note: string;
  favorite: boolean;
}

export function getContact(id: string): Promise<IContact> {
  const getTimeout = () => Math.floor(Math.random() * 1000)

  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(createRandomContact(id))
    }, getTimeout())
  })
}

[WbICHA]

Boris007,

Он ждет в аргументах строковой аргумент

А ты ему что передаёшь?

[Boris007]

WbICHA, params.id строку

[Boris007]

WbICHA, даже под объект переделал, но всё равно ошибка

export type Params<Key extends string = string> = {
  readonly [key in Key]: string | undefined;
};

export function getContact(params: {id: string}): Promise<IContact> {
  const getTimeout = () => Math.floor(Math.random() * 1000)

  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(createRandomContact(params.id))
    }, getTimeout())
  })
}

export const loader:LoaderFunction = async ({params}: {params: Params}) => {
  const contact = await getContact(params)
  return contact
}

Argument of type 'Params' is not assignable to parameter of type '{ id: string; }'.
  Property 'id' is missing in type 'Params' but required in type '{ id: string; }'.

[WbICHA]

Boris007,

params.id строку

Ты издеваешься? Наведи мышку и посмотри что там за тип, если ты уже забыл, что сам лично выше писал.

Answer 1

[Константин]

Вот тут есть примерное обсуждение Тыц..

Попробуй указать

children: [
      {
        path: "contacts/:id",
        element: <Contact />,
        loader: contactLoader as LoaderFunction
      },
    ],

И функцию loader я так понял тоже нужно типизировать с помощью LoaderFunction

Comments

[WbICHA]

contactLoader as LoaderFunction

Серьёзно? А чего не эни сразу?

[Константин]

WbICHA, Внизу есть форма, помоги и напиши правильное решение, парень уже по моему второй или третий раз этот вопрос задает, я так понял ответа никто ему до сих пор не дал.

[Boris007]

Я видел тот пример, но там как-то слишком замароченно ради описания одного аргумента функции

[WbICHA]

Boris007, там вообще-то универсальное решение для парса любых путей. Но да, написано оно, имхо, так себе.