Настройка TypeScript окружения

TypeScript является популярным выбором среди разработчиков, поскольку предоставляет строгую типизацию и улучшает качество кода. Для написания и тестирования JavaScript-программ на TypeScript с использованием Jasmine необходимо выполнить несколько шагов для правильной настройки окружения.

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

Для начала потребуется установить все необходимые пакеты для работы с Jasmine и TypeScript. В первую очередь нужно создать проект и инициализировать его с помощью npm.

mkdir jasmine-typescript-project
cd jasmine-typescript-project
npm init -y

После этого нужно установить сами Jasmine, а также дополнительные утилиты, такие как TypeScript и типы для Jasmine.

npm install --save-dev jasmine typescript @types/jasmine
  • jasmine — основная библиотека для тестирования.
  • typescript — компилятор TypeScript.
  • @types/jasmine — типы для работы с Jasmine в TypeScript.

Инициализация Jasmine

Для создания базовой конфигурации Jasmine используется команда:

npx jasmine init

Эта команда создаст структуру каталогов и конфигурационный файл jasmine.json, который необходим для запуска тестов. Однако для работы с TypeScript потребуется дополнительно настроить компиляцию TypeScript и указать, как компилировать тесты перед запуском.

Настройка TypeScript

Для работы с TypeScript необходимо создать файл конфигурации tsconfig.json. В нем задаются параметры компиляции TypeScript, такие как выходной каталог, целевая версия ECMAScript, а также настройки для работы с Jasmine.

Пример конфигурации:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true,
    "outDir": "./dist",
    "rootDir": "./src",
    "resolveJsonModule": true
  },
  "include": ["src/**/*.ts", "tests/**/*.ts"],
  "exclude": ["node_modules"]
}

Ключевые параметры конфигурации:

  • target: указывает версию ECMAScript, в которую будет компилироваться код (в данном случае — ES6).
  • module: указывает тип модулей, используемых в проекте (commonjs — для Node.js).
  • outDir: папка, в которой будет сохраняться скомпилированный JavaScript код.
  • rootDir: исходная папка для TypeScript файлов.
  • include и exclude: настройки для того, какие файлы компилировать, а какие игнорировать.

Настройка запуска тестов с TypeScript

Для того чтобы Jasmine корректно запускал тесты, написанные на TypeScript, необходимо использовать предварительную компиляцию файлов TypeScript в JavaScript. Это можно сделать с помощью дополнительных настроек в package.json.

Добавим в раздел scripts команды для компиляции и тестирования:

"scripts": {
  "test": "tsc && jasmine"
}

Здесь команда tsc компилирует TypeScript в JavaScript перед запуском Jasmine. После успешной компиляции будет выполнен запуск тестов с помощью команды jasmine.

Структура проекта

Теперь стоит настроить структуру проекта таким образом, чтобы тесты и исходный код были четко разделены.

Пример структуры проекта:

/jasmine-typescript-project
  ├── /node_modules
  ├── /src
  │   ├── sum.ts
  ├── /tests
  │   ├── sum.spec.ts
  ├── jasmine.json
  ├── package.json
  └── tsconfig.json
  • Папка /src содержит исходный код приложения.
  • Папка /tests содержит тесты на TypeScript.
  • Конфигурационные файлы (jasmine.json, tsconfig.json) и package.json находятся в корне проекта.

Пример теста на TypeScript

Для примера создадим простую функцию и напишем для нее тест.

  1. Исходный код (src/sum.ts):
export function sum(a: number, b: number): number {
  return a + b;
}
  1. Тест для функции (tests/sum.spec.ts):
import { sum } from '../src/sum';

describe('sum function', () => {
  it('should return the correct sum of two numbers', () => {
    const result = sum(1, 2);
    expect(result).toBe(3);
  });
});

Настройка перезапуска тестов

Для удобства работы можно настроить автоматический перезапуск тестов при изменении исходных файлов. Для этого можно использовать утилиту tsc --watch, которая будет следить за изменениями в TypeScript файлах и автоматически компилировать их.

Чтобы настроить это, добавим в package.json еще одну команду:

"scripts": {
  "test": "tsc && jasmine",
  "test:watch": "tsc --watch & jasmine"
}

Теперь, при запуске команды npm run test:watch, тесты будут перезапускаться каждый раз, когда файл будет изменен и пересобран.

Интеграция с редактором

Многие редакторы, такие как Visual Studio Code, имеют встроенную поддержку для TypeScript и Jasmine. Это позволяет автоматически компилировать TypeScript код и запускать тесты при сохранении файлов. В случае использования редактора с поддержкой TypeScript, необходимо просто установить соответствующие расширения и настроить их для работы с проектом.

Заключение

Настройка TypeScript окружения для Jasmine позволяет использовать все преимущества строгой типизации и обеспечивать высокое качество тестов. В процессе настройки важно учесть правильную организацию кода, настройку TypeScript компилятора и интеграцию с инструментами для запуска тестов.

Оглавление