Создать проект TypeScript очень просто!

Давайте приступим к работе со сценариями сборки и тестирования!

Сначала вам понадобится несколько вещей:


Создайте папку вашего проекта

Создайте папку с названием вашего проекта в [[Project Name]].

ПРИМЕЧАНИЕ: Соглашение Node.js заключается в использовании kebab-case. Все буквы в нижнем регистре, тире используются для пробелов.

Выполните следующую команду:

mkdir [[Project Name]]
Войти в полноэкранный режим

Выйти из полноэкранного режима


Открыть с помощью редактора

Следующий пример относится к коду Visual Studio. Скорее всего, это будет похоже на другие редакторы.

Откройте папку в Visual Studio Code. Откройте код Visual Studio, затем перейдите к Файл -> Открыть папку….

В качестве альтернативы, если у вас настроен ярлык, вы можете запустить следующую команду:

code [[Project Name]]
Войти в полноэкранный режим

Выйти из полноэкранного режима

В редакторе откройте Интегрированный терминал продолжить. Перейдите к Вид -> Терминалили используйте сочетание клавиш Ctrl + ` или же Cmd + `.


Продолжить в системном терминале

В качестве альтернативы измените каталог на папку в текущем терминале:

cd [[Project Name]]
Войти в полноэкранный режим

Выйти из полноэкранного режима


Установить зависимости

Создайте свой package.jsonкоторый хранит НПМ конфигурация.

ПРИМЕЧАНИЕ: При появлении запроса НАСТОЯТЕЛЬНО рекомендуется начать с версии 0.0.0 или же 0.0.1.

Это говорит о том, что проект находится в разработке. Начиная с 1.0.0 подразумевает, что проект стабильный.

Выполните следующую команду:

npm init
Войти в полноэкранный режим

Выйти из полноэкранного режима

Установить Машинопись а также Является в качестве "devDependencies" в package.json. Это также создаст package-lock.json файл, в котором хранится конкретная информация о версии пакета.

Выполните следующую команду:

npm i -D typescript jest ts-jest @types/jest
Войти в полноэкранный режим

Выйти из полноэкранного режима


Настроить TypeScript

Создает ваш tsconfig.json файл, в котором хранится конфигурация TypeScript.

Выполните следующую команду:

npx tsc --init
Войти в полноэкранный режим

Выйти из полноэкранного режима

Создает ваш src/index.ts файл.

Выполните следующие команды:

mkdir src
touch ./src/index.ts
Войти в полноэкранный режим

Выйти из полноэкранного режима

В tsconfig.jsonобновите следующее "compilerOptions". Это настраивает TypeScript на использование ваших исходных файлов и генерирует все необходимые файлы объявлений и карт.

  "rootDir": "./src",
  "declaration": true,
  "declarationMap": true,
  "sourceMap": true,
  "outDir": "./dist",
Войти в полноэкранный режим

Выйти из полноэкранного режима

В package.json, создайте следующие свойства. Это настраивает ваш пакет для использования сгенерированных файлов TypeScript.

  "main": "dist/index.js",
  "types": "dist/index.d.ts",
Войти в полноэкранный режим

Выйти из полноэкранного режима


Настройка скриптов

В package.jsonсоздайте следующее "scripts". Это общие скрипты для сборки и тестирования.

  "scripts": {
    "test": "jest",
    "start": "tsc --watch",
    "build": "tsc",
    "clean": "tsc --build --clean"
    "prepublishOnly": "tsc --build --clean && tsc",
  }
Войти в полноэкранный режим

Выйти из полноэкранного режима

В package.json, добавьте следующий раздел. Это говорит Jest, как найти и запустить ваши тесты TypeScript.

  "jest": {
    "preset": "ts-jest",
    "testPathIgnorePatterns": [
      "<rootDir>/dist/"
    ]
  }
Войти в полноэкранный режим

Выйти из полноэкранного режима


Настроить Git

Создайте свою конфигурацию Git. Важно возвращать только исходные файлы.

Выполните следующие команды:

git init
touch .gitignore
Войти в полноэкранный режим

Выйти из полноэкранного режима

Добавьте следующее в .gitignore. Это предотвратит проверку файлов, сгенерированных TypeScript.

node_modules/
dist/
Войти в полноэкранный режим

Выйти из полноэкранного режима


Настроить публикацию NPM

Создайте конфигурацию публикации NPM. Важно публиковать ОБА исходные файлы и файлы, сгенерированные TypeScript.

Выполните следующую команду:

touch .npmignore
Войти в полноэкранный режим

Выйти из полноэкранного режима

Добавьте следующее в .npmignore. Это предотвратит регистрацию ненужных файлов.

ПРИМЕЧАНИЕ: Не включать dist/ или же src/ в твоей .npmignore файл.

tsconfig.json
.gitignore
.npmignore
Войти в полноэкранный режим

Выйти из полноэкранного режима