TypeScript в React предоставляет мощную систему статической типизации, которая помогает разработчикам выявлять ошибки на этапе компиляции, улучшать автодополнение, рефакторинг, документацию и читаемость кода. Он особенно полезен в больших проектах, где типизация способствует предсказуемости поведения компонентов, снижает количество багов и упрощает поддержку кода.

Преимущества использования TypeScript в React:

1. Статическая типизация

TypeScript проверяет типы на этапе компиляции, что позволяет:

• обнаруживать ошибки до запуска кода,

• предотвращать опечатки и неправильное использование API,

• делать код безопаснее.

Пример:

function greet(name: string) {
return \`Hello, ${name}\`;
}
greet(123); // Ошибка на этапе компиляции

2. Поддержка редакторов

TypeScript позволяет редакторам (VS Code и др.):

• показывать автодополнение,

• быстро переходить к определению типов,

• отображать inline-документацию.

3. Улучшение читаемости и документации

Типы являются живой документацией:

type User = {
id: number;
name: string;
email: string;
}

Разработчику не нужно читать всю реализацию — он понимает, какие свойства ожидаются и возвращаются.

4. Безопасность при рефакторинге

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

5. Поддержка дженериков

Позволяет писать переиспользуемый и безопасный код с обобщениями:

function identity<T>(value: T): T {
return value;
}

Типизация props и state в React-компонентах

Типизация props и state позволяет точно описывать интерфейсы компонентов и проверять, что они используются корректно.

Типизация props

Функциональный компонент:

type GreetingProps = {
name: string;
age?: number; // необязательный пропс
};
const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
return (
<div>
<p>Hello, {name}</p>
{age && <p>Age: {age}</p>}
</div>
);
};

Через Generic синтаксис:

const Greeting = ({ name }: GreetingProps) => <p>Hello {name}</p>;

Преимущества:

• Показывает, какие props компонент ожидает.

• Предупреждает, если разработчик передал не тот тип или забыл обязательный пропс.

• Улучшает автодополнение при использовании компонента.

Типизация state

Пример с useState:

const \[count, setCount\] = useState<number>(0);

Типизация объекта:

type User = {
id: number;
name: string;
};
const \[user, setUser\] = useState<User | null>(null);

Особенности:

• Тип можно указать явно, особенно при null или undefined в начальном состоянии.

• TypeScript автоматически выводит тип из начального значения, но иногда лучше указать явно для сложных структур.

Типизация useRef

const inputRef = useRef<HTMLInputElement | null>(null);
useEffect(() => {
inputRef.current?.focus();
}, \[\]);

Типизация событий

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
console.log(event.currentTarget);
};
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
console.log(event.target.value);
};

Типизация children

type WrapperProps = {
children: React.ReactNode;
};
const Wrapper: React.FC<WrapperProps> = ({ children }) => (
<div>{children}</div>
);

Типизация useContext

type Theme = 'light' | 'dark';
const ThemeContext = React.createContext<Theme>('light');
const useTheme = () => useContext(ThemeContext);

Типизация useReducer

type State = { count: number };
type Action = { type: 'increment' } | { type: 'decrement' };
const reducer = (state: State, action: Action): State => {
switch (action.type) {
case 'increment': return { count: state.count + 1 };
case 'decrement': return { count: state.count - 1 };
default: return state;
}
};
const \[state, dispatch\] = useReducer(reducer, { count: 0 });

Типизация HOC (Higher-Order Components)

function withLogger<P>(Component: React.ComponentType<P>): React.FC<P> {
return (props) => {
console.log('Props:', props);
return <Component {...props} />;
};
}

Типизация компонента с forwardRef

const Input = forwardRef<HTMLInputElement, { label: string }>(
({ label }, ref) => (
<label>
{label}
<input ref={ref} />
</label>
)
);

Типизация useMemo, useCallback

const memoizedValue = useMemo<number>(() => computeExpensiveValue(), \[\]);
const memoizedCallback = useCallback<(id: number) => void>(
(id) => handleClick(id),
\[\]
);

Типизация в React Router

import { useParams } from 'react-router-dom';
type Params = { id: string };
const Component = () => {
const { id } = useParams<Params>();
};

TypeScript делает React-приложения более предсказуемыми, понятными и поддерживаемыми, особенно в командах и при длительной разработке. Типизация props, state и других аспектов приложения снижает риск ошибок и помогает с навигацией по коду.