TypeScript Инструментарий

Экосистема инструментов для разработки на TypeScript

Одним из главных преимуществ экосистемы TypeScript являются мощные инструменты, обеспечивающие качественное сопровождение каждого этапа разработки:

Качество кода

  • ESLint с поддержкой TypeScript
  • Проверка типов и линтеры
  • Принуждение соблюдения стиля кода

Разработка

  • Интеграция с VS Code
  • Инструменты отладки
  • Горячая замена модулей (HMR)

Сборка и развертывание

  • Менеджеры пакетов (Vite, Webpack, Parcel)
  • Пакетирование модулей
  • Оптимизация производительности в рабочей среде

Линтеры с помощью ESLint

Установка

Установите ESLint и официальную поддержку синтаксиса и правил TypeScript, чтобы ESLint мог понимать синтаксис TypeScript.

Пример


# Установка ESLint с поддержкой TypeScript
npm install --save-dev eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin

Конфигурация

Эта конфигурация активирует рекомендованные правила ESLint для TypeScript, подключает ESLint к вашему файлу tsconfig для проверок типов и настраивает несколько распространённых правил.

Пример


// .eslintrc.json
{
  "root": true,
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "plugin:@typescript-eslint/recommended-requiring-type-checking"
  ],
  "parserOptions": {
    "project": "./tsconfig.json",
    "ecmaVersion": 2020,
    "sourceType": "module"
  },
  "rules": {
    "@typescript-eslint/explicit-function-return-type": "warn",
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/no-unused-vars": ["error", { "argsIgnorePattern": "^_" }]
  }
}

Скрипты NPM

Добавьте скрипты для запуска процесса анализа и проверки только типов.

Используйте команду lint:fix для автоматического исправления простых проблем.

Пример


// package.json
{
  "scripts": {
    "lint": "eslint . --ext .ts,.tsx",
    "lint:fix": "eslint . --ext .ts,.tsx --fix",
    "type-check": "tsc --noEmit"
  }
}

Форматирование кода с помощью Prettier

Prettier помогает поддерживать единый стиль оформления кода среди вашей команды.

Комбинируйте его с ESLint, чтобы избегать ошибок, вызванных форматированием.

Установка

Установите Prettier плюс плагины ESLint, отключающие конфликтующие правила и отображающие проблемы форматирования через ESLint.

Пример


# Установка Prettier и сопутствующих пакетов
npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier

Конфигурация

Определите предпочтения Prettier в файле .prettierrc и игнорируйте сгенерированные каталоги в .prettierignore.

Пример


// .prettierrc
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "printWidth": 100,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

// .prettierignore
node_modules
build
dist
.next
.vscode

Интеграция с ESLint

Расширьте правило plugin:prettier/recommended, чтобы проблемы форматирования выводились как предупреждения ESLint.

Пример


// .eslintrc.json
{
  "extends": [
    // Другие конфиги...
    "plugin:prettier/recommended" // Должно быть последним элементом массива
  ]
}

Пример интеграции Prettier с ESLint


npm install --save-dev eslint-config-prettier eslint-plugin-prettier
# В вашем файле .eslintrc.js или .eslintrc.json добавьте:
{
  "extends": ["plugin:prettier/recommended"]
}

Современные инструменты сборки

Рекомендуемый выбор — Vite для быстрого сервера разработки и современных сборок.

Webpack остаётся популярным и высококонфигурируемым инструментом.

Vite (рекомендуется)

Создайте новый проект React + TypeScript с помощью Vite.

Это запускает сервер разработки с функцией HMR для быстрой обратной связи.

Пример


# Создание нового проекта с React + TypeScript
npm create vite@latest my-app -- --template react-ts

# Переход в директорию проекта
cd my-app

# Установка зависимостей
npm install

# Запуск сервера разработки
npm run dev

Конфигурация Webpack

Если вы выбрали Webpack, следующая минимальная настройка транспилирует TypeScript, обрабатывает CSS и обслуживает вашу программу с помощью веб-пака webpack-dev-server.

Пример


// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/index.tsx',
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
    ],
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
    }),
  ],
  devServer: {
    static: path.join(__dirname, 'dist'),
    compress: true,
    port: 3000,
    hot: true,
  },
};

Конфигурация TypeScript

Конфигурация файла tsconfig.json, нацеленная на современные браузеры.

Дополнительные параметры baseUrl и paths помогают организовать абсолютные пути импорта вроде @/components/Button.

Пример


// tsconfig.json
{
  "compilerOptions": {
    "target": "es2020",
    "module": "esnext",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules"]
}

Настройка среды разработки

Настройте редактор для вывода ошибок анализа кода, автоматического форматирования при сохранении и эффективной отладки.

Расширения для VS Code

Рекомендуемые расширения для VS Code:

  • TypeScript + Webpack Problem Matchers — для улучшения информирования об ошибках
  • ESLint — интеграция ESLint в VS Code
  • Prettier — формировщик кода для единообразного формата
  • Path IntelliSense — автозаполнение файлов
  • Error Lens — показ ошибок прямо в тексте

Настройки VS Code

Используйте Prettier как основной форматтер, исправляйте ошибки ESLint при сохранении и предпочтительно пользуйтесь относительными путями импорта.

Пример


// .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "source.organizeImports": true
  },
  "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.preferences.importModuleSpecifier": "non-relative"
}

Настройка отладки

Запускайте ваш локальный сервер разработки в Chrome и выполняйте тестирование и отладку на основе Node прямо из VS Code.

Пример


// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome against localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}",
      "sourceMaps": true,
      "sourceMapPathOverrides": {
        "webpack:///./~/*": "${workspaceFolder}/node_modules/*",
        "webpack:///./*": "${workspaceFolder}/src/*"
      }
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Debug Tests",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/jest",
      "args": ["--runInBand", "--watchAll=false"],
      "console": "integratedTerminal",
      "internalConsoleOptions": "neverOpen",
      "sourceMaps": true
    }
  ]
}

Настройка тестирования

Популярный вариант для тестирования приложений React + TypeScript — Jest с Testing Library.

Jest + Testing Library

Установите Jest, поддержку TypeScript и утилиты React Testing Library для изменения DOM и взаимодействия с пользователями.

Пример


# Установка тестовых зависимостей
npm install --save-dev jest @types/jest ts-jest @testing-library/react @testing-library/jest-dom @testing-library/user-event

Конфигурация Jest

Настройте Jest для использования ts-jest, создания карт модулей CSS и разрешения проблем с псевдонимами путей вроде @/.

Пример


// jest.config.js
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jsdom',
  setupFilesAfterEnv: ['@testing-library/jest-dom'],
  moduleNameMapper: {
    '^@/(.*)$': '/src/$1',
    '\\\.(css|less|scss|sass)$': 'identity-obj-proxy',
  },
  transform: {
    '^.+\\\.tsx?$': 'ts-jest',
  },
  testMatch: ['**/__tests__/**/*.test.(ts|tsx)'],
};

Пример теста

Простой тест компонента, проверяющий рендеринг и поведение нажатия с помощью Testing Library.

Пример


// src/__tests__/Button.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import '@testing-library/jest-dom';
import Button from '../components/Button';

describe('Button', () => {
  it('отображает кнопку с правильным текстом', () => {
    render(<Button>Нажмите меня</Button>);
    expect(screen.getByRole('button', { name: /нажмите меня/i })).toBeInTheDocument();
  });

  it('вызывает onClick при клике', () => {
    const handleClick = jest.fn();
    render(<Button onClick={handleClick}>Нажмите меня</Button>);
    
    fireEvent.click(screen.getByRole('button'));
    expect(handleClick).toHaveBeenCalledTimes(1);
  });
});

Лучшие практики

Рабочий процесс разработки

  • Используйте npm run dev для разработки с горячей перезагрузкой
  • Выполняйте npm run type-check для проверки типов TypeScript
  • Запускайте npm run lint для проверки наличия ошибок линта
  • Выполняйте npm run build для создания сборки для рабочей среды

Оптимизация производительности

  • Используйте разделение кода с динамическими импортами
  • Активируйте механизм устранения мертвого кода (tree-shaking) в рабочих сборках
  • Используйте React.memo и useMemo для оптимизации вычислений
  • Используйте ленивую загрузку некритичных компонентов

Общие ловушки

  • Конфигурация TypeScript: убедитесь, что включен режим strict
  • Конфликты ESLint + Prettier: используйте eslint-config-prettier для отключения конфликтующих правил
  • Медленные сборки: попробуйте использовать Vite или esbuild для ускорения разработки
  • Отсутствие определений типов: установите пакет @types для всех зависимостей
  • Проблемы отладки: убедитесь, что карты исходного кода правильно настроены

Рекомендуемые инструменты

  • Менеджеры пакетов: Vite, Webpack, Parcel
  • Тестирование: Jest, React Testing Library, Cypress
  • Линтинг/форматирование: ESLint, Prettier, Stylelint
  • Документация: TypeDoc, Storybook
  • Производительность: Web Vitals, Lighthouse