Alexandroppolus

https://developer.mozilla.org/ru/docs/Web/JavaScri...

reply.replies = [newReply,...reply.replies]
setReplies(rootReplies=>[...rootReplies])

ты неправильно обрабатываешь стейт. По факту здесь меняется содержимое некоего узла, а потом возвращается поверхностная копия всего дерева.

есть 3 варианта:
1) Продолжать использовать дерево в useState. Но менять его надо иммутабельно. То есть если у какого-то узла что-то поменялось, то надо заменить узел и все его паренты, а не только корневой массив.
2) Нормализовать данные в плоскую структуру. Каждому реплаю присваивается уникальный id, все реплаи складываются в объект, где ключем будет id. В массиве replies у каждого объекта будут лежать не сами объекты, а только id, и потом надо будет их соединять во время рендера. Этот вариант канонично используется для redux, но как зайдет для useState, навскидку не совсем понятно.
3) Использовать MobX с этими его observable.deep (или просто observable). Как всегда, самый простой и удобный вариант.

e: React.ChangeEvent<HTMLInputElement>

но если ты создаешь функцию прямо в пропсе элемента (как в примере из вопроса), то тип для e можно не указывать - функция протипизируется "снаружи".

а точно нужен объект WhenChange?
если вместо одного объекта передавать в функцию аргументы по отдельности, то всё просто

interface User {
   name: string
   age: number
   validate: boolean
}

let data = {}

function handleChange<K extends keyof User>(field: K, value: User[K]) {
  data = {
   [field]: value,
  };
}

handleChange('validate', true);

с объектом такое не прокатывает, приходится резолвить генерик вручную

const cash = CashTypeSelector(state => state.cash)

Судя по ошибке, в cash попадает не число, а объект {cash: number}

Что такое CashTypeSelector? Что лежит в Редуксе?

как исправить

const cash = CashTypeSelector(state => state.cash.cash);

typescript почему то в автокомплите показывает свойство name игнорируя остальные

Оно и понятно: ts может быть уверен только в наличии name, потому как неизвестно, какой там вариант из двух.

Попробуй так:

if ("children" in obj) {
    obj.children ...
} else {
    obj.link ....
}

По идее ts должен определять, что к чему

У тебя, наверно, Реакт 18
Там из React.FC выкинули на мороз поле children, теперь нет.

Надо добавлять вручную.

у себя на проекте запилил такой тип:

import type {FC, PropsWithChildren} from 'react';

export type ReactFC<Props extends Record<PropertyKey, unknown> = {}> = FC<PropsWithChildren<Props>>;

он добавляет children в пропсы, то есть работает как старый добрый React.FC

Вроде бы всё работает если не использовать generic.
export type NextPageAuth = NextPage & TypeRoles;

работает потому что в генерике NextPage для параметра есть значение по умолчанию.
но ведь может понадобиться какое-то иное.

type PlaceholdersFrom<
    T extends ObjectPlaceholders, K extends keyof ObjectPlaceholders
> = T[K]

Не совсем понятно, зачем тебе WrapperSVG. Скорее всего, это вообще не будет работать, поскольку ты никуда не передаешь тот проп className, который придет от styled.

это ведь styled-components?

попробуй так

export const SVG = styled.svg`
  transition: all 0.15s ease-in-out;
`;

type X<T> = Pick<UseFormReturn<T>, 'register' | 'formState'>;

Как-то так

На мою имху, лучше всего такой вариант:

const Context= React.createContext(null as unknown as IContext);

...
const { someClass } = useContext(Context);

да, это обман тайпскрипта и ошибка переедет в рантайм, но в случае с контекстом такого не избежать, потому как TS не может проконтролировать наличие провайдера. Данный вариант сразу обнаруживает ошибку в рантайме во время дебага, после чего следует одноразовая починка - добавляется забытый провайдер.

если компонент, использующий значение из контекста, может без него обойтись, и например, что-то осмысленное нарисовать, то можно так:

const Context= React.createContext<IContext | null>(null);

тогда useContext вернет IContext | null, то есть значение просто надо проверять на null и в этом случае что-то делать - например, отрендерить какое-то сообщение. Но если от значения контекста зависят другие хуки, то везде надо втыкать проверку и будет лишний говнокод.

худший вариант - воткнуть в createContext бессмысленную заглушку, формально соответствующую интерфейсу. Это так же приведет к ошибке в рантайме (если забыли провайдер), но ошибка будет скорее всего малопонятная, в отличии от первого варианта.

ну и разумеется, в контексте может лежать что-то простое, например, текущий язык, тогда задание дефолтного значения имеет смысл.

может, так?

clearInterval(interval.value);

или например

if (interval.value) {
  clearInterval(interval.value);
}