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

1. Настройка среды

Убедитесь, что у вас установлены Node.js, NPM и TypeScript. Вы можете установить TypeScript глобально с помощью:

npm install -g typescript

Проверьте, что все установлено правильно:

node -v
npm -v
tsc -v

2. Создание проекта

Начните с создания каталога для вашего проекта:

mkdir meu-pacote-typescript
cd meu-pacote-typescript

Инициализируйте проект Node.js:

npm init

При этом будет создан файл package.json, в котором вы сможете определить основную информацию о пакете.

3. Настройка TypeScript

Теперь инициализируйте проект TypeScript:

tsc --init

При этом будет создан файл tsconfig.json. Отредактируйте его по мере необходимости, но общие настройки следующие:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "CommonJS",
    "declaration": true,
    "outDir": "./dist",
    "strict": true
  },
  "include": ["src/**/*"]
}

Здесь мы настраиваем компилятор TypeScript для генерации кода ES6 с модулями CommonJS и включения объявлений типов (объявление: true). Скомпилированный код будет помещен в каталог dist.

4. Написание кода

Создайте каталог src и внутри него файл index.ts:

mkdir src
touch src/index.ts

В файле index.ts напишите код вашего пакета. Давайте создадим простую функцию для преобразования строк в верхний регистр:

export function toUpperCase(str: string): string {
  return str.toUpperCase();
}

5. Компиляция кода

Скомпилируйте TypeScript в JavaScript:

tsc

Это создаст файлы JavaScript и объявления типов в каталоге dist.

6. Локальное тестирование пакета

Чтобы протестировать пакет, вы можете установить его локально в другом проекте:

1. В каталоге тестового проекта запустите:

   npm install ../caminho-para-o-diretorio-do-seu-pacote/dist

1. Используйте функцию в тестовом проекте:

   import { toUpperCase } from 'nome-do-seu-pacote';

   console.log(toUpperCase('hello world')); // "HELLO WORLD"

Это гарантирует правильную работу как кода JavaScript, так и объявлений типов.

7. Публикация на NPM

Если все работает правильно, вы готовы опубликовать свой пакет.

1. Вход в NPM

Если у вас еще нет учетной записи NPM, создайте ее и войдите в систему:

   npm login

1. Публикация

Перед публикацией добавьте скрипт сборки в package.json:

   "scripts": {
     "build": "tsc"
   }

И добавьте выходной путь в package.json:

   "main": "dist/index.js",
   "types": "dist/index.d.ts"

Теперь скомпилируйте и опубликуйте:

   npm run build
   npm publish

Если имя пакета уже существует, вам нужно будет выбрать новое имя.

8. Обновление пакета

Чтобы опубликовать новую версию, измените ее в package.json, снова запустите npm run build и опубликуйте:

npm publish

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

• Документация: включите файл README.md, объясняющий, как использовать ваш пакет.
• Тесты: пишите тесты с использованием таких фреймворков, как Jest, чтобы убедиться, что код работает должным образом.
• Линтинг: используйте такие инструменты, как ESLint и Prettier, для поддержания качества кода.
• Управление версиями: следуйте инструкциям SemVer, чтобы установить версию вашего пакета.

Заключение

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

Теперь, когда вы знаете процесс, как насчет того, чтобы приступить к созданию следующего пакета TypeScript?