9.1 Типизация API запросов и ответов
Типизация запросов и ответов при работе с API позволяет избегать ошибок при взаимодействии с сервером.
Пример типизации API:
interface ApiResponse<T> {
data: T;
error?: string;
}
interface User {
id: number;
name: string;
email: string;
}
async function fetchUser(userId: number): Promise<ApiResponse<User>> {
const response = await fetch(`/api/users/${userId}`);
const data = await response.json();
return { data };
}
9.2 Использование дженериков для обобщенных функций и компонентов
Дженерики позволяют создавать обобщенные функции и компоненты, которые могут работать с разными типами данных.
Пример использования дженериков в React:
interface ListProps<T> {
items: T[];
renderItem: (item: T) => React.ReactNode;
}
function List<T>({ items, renderItem }: ListProps<T>): JSX.Element {
return <ul>{items.map(renderItem)}</ul>;
}
// Использование компонента List
const users = [{ id: 1, name: 'John' }, { id: 2, name: 'Jane' }];
<List items={users} renderItem={(user) => <li key={user.id}>{user.name}</li>} />;
9.3 Использование строгих режимов TypeScript
Включение строгих режимов TypeScript, таких как noImplicitAny, strictNullChecks, strictFunctionTypes, и strictPropertyInitialization, помогает обнаруживать и устранять потенциальные ошибки на этапе компиляции.
Пример конфигурации строгих режимов:
{
"compilerOptions": {
"strict": true,
"noImplicitAny": true,
"strictNullChecks": true,
"strictFunctionTypes": true,
"strictPropertyInitialization": true
}
}
9.4 Интеграция с системами тестирования
Интеграция TypeScript с системами тестирования, такими как Jest и Mocha, позволяет писать типизированные тесты, улучшая качество кода и обеспечивая его корректность.
Примеры интеграции Jest с TypeScript
1. Установка Jest и TypeScript:
npm install --save-dev jest ts-jest @types/jest
2. Создание конфигурации для Jest:
jest.config.js:
module.exports = {
preset: 'ts-jest',
testEnvironment: 'node',
testMatch: ['**/?(*.)+(spec|test).[jt]s?(x)']
};
3. Написание тестов:
src/tests/example.test.ts:
import { sum } from '../sum';
test('adds 1 + 2 to equal 3', () => {
expect(sum(1, 2)).toBe(3);
});
4. Запуск тестов:
npm run test
9.5 Документация и комментарии
Использование комментариев и JSDoc помогает документировать типы и функции, что облегчает понимание и поддержку кода.
Пример документации с JSDoc:
/**
* Суммирует два числа.
* @param a Первое число.
* @param b Второе число.
* @returns Сумма двух чисел.
*/
function sum(a: number, b: number): number {
return a + b;
}
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ