Как типизировать props и состояние React-компонента в TypeScript?
- Как описать тип children?
Props описывают типом или интерфейсом и указывают в параметре: function Button({ label, onClick }: ButtonProps). Необязательные — ?, значения по умолчанию — в деструктуризации. children — React.ReactNode. Колбэки — сигнатурой: onSelect: (id: string) => void. useState выводит тип из начального значения; если начальное null или пустой массив — указывают явно: useState<User | null>(null), useState<string[]>([]). Атрибуты нативного элемента наследуют: ComponentProps<"button">.
- React.FC не обязателен — обычной функции с типом props достаточно
- Объединения строк вместо string: variant: "primary" | "ghost"
- Тип для ref на DOM — useRef<HTMLInputElement>(null)
А ещё useState([]) без типа даст never[] — частая ловушка
Подробно
type ButtonProps = ComponentProps<"button"> & { variant?: "primary" | "ghost"; icon?: ReactNode };
function Button({ variant = "primary", icon, children, ...rest }: ButtonProps) {
return <button className={variant} {...rest}>{icon}{children}</button>;
}
const [user, setUser] = useState<User | null>(null);Что хотят услышать
- Тип props, необязательные и по умолчанию.
- children и колбэки.
- useState с явным типом.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✓Props — тип параметра, children — ReactNode; для useState с null или [] тип указывают явно
- ✗useState([]) без указания типа сам выводит string[], так что явный тип не нужен
- ✗React.FC обязателен для всех компонентов
- ✗Типизировать props в React невозможно без PropTypes
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.