**План ответа:** 1. Создать базовые типы для обработки асинхронных состояний (загрузка/успех/ошибка) 2. Реализовать компонент общего назначения для получения данных с типо-безопасностью 3. Вывод типов (type inference) для различных состояний 4. Обработка ошибок с помощью предикатных типов 5. Добавить интеграцию React Suspense для лучшего пользовательского опыта **1. Базовые типы и управление состояниями** Сначала определим типобезопасное управление состояниями, используя **discriminated unions**, для обработки различных состояний асинхронной операции: ```typescript // Базовые типы для различных состояний type LoadingState = { status: 'loading'; }; type SuccessState = { status: 'success'; data: T; }; type ErrorState = { status: 'error'; error: Error; }; // Объединенный тип с помощью discriminated union type AsyncState = LoadingState | SuccessState | ErrorState; ``` **2. Универсальный асинхронный компонент** Создадим переиспользуемый компонент, который обрабатывает асинхронное получение данных с соответствующей типизацией: ```typescript // Тип функции для получения данных type FetchFn = () => Promise; // Основной компонент с универсальным параметром типа function AsyncDataLoader({ fetchFn, render }: { fetchFn: FetchFn; render: (state: AsyncState) => React.ReactNode; }) { // Типобезопасное управление состоянием const [state, setState] = useState>({ status: 'loading' }); useEffect(() => { const loadData = async () => { try { const data = await fetchFn(); setState({ status: 'success', data }); } catch (error) { setState({ status: 'error', error: error instanceof Error ? error : new Error('Неизвестная ошибка') }); } }; loadData(); }, [fetchFn]); return render(state); } ``` **3. Предикаты типов для безопасного управления состояниями** Реализуем предикаты типов для безопасного сужения типов состояний: ```typescript // Предикаты типов для проверки состояния function isLoading(state: AsyncState): state is LoadingState { return state.status === 'loading'; } function isSuccess(state: AsyncState): state is SuccessState { return state.status === 'success'; } function isError(state: AsyncState): state is ErrorState { return state.status === 'error'; } ``` **4. Пример использования с безопасностью типов** ```typescript // Пример интерфейса для данных interface User { id: number; name: string; } // Использование компонента function UserProfile() { const fetchUser: FetchFn = async () => { const response = await fetch('/api/user'); return response.json(); }; return ( { // TypeScript гарантирует правильную проверку типов if (isLoading(state)) { return

Загрузка...

; } if (isError(state)) { return

Ошибка: {state.error.message}

; } // state интерпретируется как SuccessState return

Добро пожаловать, {state.data.name}!

; }} /> ); } ``` **5. Расширенный шаблон с интеграцией Suspense** Реализуем более сложный шаблон с использованием **React Suspense**: ```typescript // Тип ресурса для Suspense type Resource = { read(): T | undefined; }; // Создать ресурс, совместимый с Suspense function createResource(fetchFn: FetchFn): Resource { let status: 'pending' | 'success' | 'error' = 'pending'; let result: T; let error: Error; const promise = fetchFn() .then( (data: T) => { status = 'success'; result = data; }, (e: Error) => { status = 'error'; error = e; } ); return { read() { switch (status) { case 'pending': throw promise; case 'error': throw error; case 'success': return result; } } }; } // Использование с Suspense function SuspenseUser() { const resource = createResource(fetchUser); return ( Загрузка...}> ); } // Типобезопасный компонент, использующий ресурс function UserData({ resource }: { resource: Resource }) { const user = resource.read(); return

Добро пожаловать, {user?.name}!

; } ``` Эта реализация обеспечивает: - Типо-безопасность во всех асинхронных состояниях - Универсальную реализацию для любого типа данных - Обработку ошибок с соответствующей типизацией - Интеграцию React Suspense - Предикаты типов для безопасного сужения состояний