Поиск по сайту:

Как настроить проект Node с помощью Typescript

Введение

слабо типизирован.

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

TypeScript — это типизированный (необязательный) расширенный набор JavaScript, который может помочь в создании крупномасштабных проектов JavaScript и управлении ими. Его можно рассматривать как JavaScript с дополнительными функциями, такими как строгая статическая типизация, компиляция и объектно-ориентированное программирование.

Примечание. TypeScript технически является расширенным набором JavaScript, что означает, что весь код JavaScript является допустимым кодом TypeScript.

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

  1. Необязательная статическая типизация.
  2. Вывод типа.
  3. Возможность использования интерфейсов.

В этом руководстве вы настроите проект Node с помощью TypeScript. Вы создадите приложение Express, используя TypeScript, и транспилируете его в код JavaScript.

Предпосылки

Прежде чем приступить к работе с этим руководством, в вашей системе должен быть установлен Node.js. Вы можете сделать это, следуя руководству Как установить Node.js и создать локальную среду разработки для вашей операционной системы.

Шаг 1 — Инициализация проекта

Для начала создайте новую папку с именем node_project и перейдите в нее:

  1. mkdir node_project

  2. cd node_project

Затем инициализируйте его как проект npm:

  1. npm init -y

Флаг -y указывает npm init автоматически говорить «да» значениям по умолчанию. Вы всегда можете обновить эту информацию позже в своем package.json файл.

Шаг 2 — Настройка компилятора TypeScript

Теперь, когда ваш проект npm инициализирован, вы готовы установить и настроить TypeScript.

Запустите следующую команду из каталога вашего проекта, чтобы установить TypeScript:

  1. npm install --save-dev typescript



Output
added 1 package, and audited 2 packages in 1s

found 0 vulnerabilities

TypeScript использует файл с именем tsconfig.json для настройки параметров компилятора для проекта. Создайте файл tsconfig.json в корне каталога проекта:

  1. nano tsconfig.json

Затем вставьте следующий JSON:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["es2015"]
}

Давайте рассмотрим некоторые ключи в приведенном выше фрагменте JSON:

  • module: определяет метод генерации кода модуля. Node использует commonjs.
  • target: определяет уровень языка вывода.
  • moduleResolution: помогает компилятору понять, на что ссылается импорт. Значение node имитирует механизм разрешения модуля Node.
  • outDir: это место для вывода файлов .js после транспиляции. В этом руководстве вы сохраните его как dist.

Чтобы узнать больше о доступных параметрах значения ключа, официальная документация TypeScript предлагает объяснения каждого параметра.

Шаг 3 — Создание минимального сервера TypeScript Express

Теперь пришло время установить фреймворк Express и создать минимальный сервер:

  1. npm install --save express@4.17.1

  2. npm install -save-dev @types/express@4.17.1

Вторая команда устанавливает типы Express для поддержки TypeScript. Типы в TypeScript — это файлы, обычно с расширением .d.ts. Файлы используются для предоставления информации о типе API, в данном случае о платформе Express.

Этот пакет необходим, поскольку TypeScript и Express являются независимыми пакетами. Без пакета @types/express TypeScript не сможет узнать о типах классов Express.

Затем создайте папку src в корне каталога вашего проекта:

  1. mkdir src

Затем создайте в нем файл TypeScript с именем app.ts:

  1. nano src/app.ts

Откройте файл app.ts в любом текстовом редакторе и вставьте следующий фрагмент кода:

import express from 'express';
const app = express();
const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello World!');
});

app.listen(port, () => {
  return console.log(`Express is listening at http://localhost:${port}`);
});

Приведенный выше код создает Node Server, который прослушивает порт 3000 для запросов. Чтобы запустить приложение, вам сначала нужно скомпилировать его в JavaScript с помощью следующей команды:

  1. npx tsc

При этом используется файл конфигурации, который мы создали на предыдущем шаге, чтобы определить, как компилировать код и куда поместить результат. В нашем случае JavaScript выводится в каталог dist.

Запустите вывод JavaScript с помощью node:

  1. node dist/app.js

В случае успешного выполнения на терминал будет выведено сообщение:

  1. Output
    Express is listening at http://localhost:3000

Теперь вы можете посетить http://localhost:3000 в своем браузере, и вы должны увидеть сообщение:

  1. Output
    Hello World!

Откройте файл dist/app.js, и вы найдете транспилированную версию кода TypeScript:

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const express_1 = __importDefault(require("express"));
const app = (0, express_1.default)();
const port = 3000;
app.get('/', (req, res) => {
    res.send('Hello World!');
});
app.listen(port, () => {
    return console.log(`Express is listening at http://localhost:${port}`);
});
//# sourceMappingURL=app.js.map

На данный момент вы успешно настроили свой проект Node для использования TypeScript. Далее вы настроите линтер eslint для проверки кода TypeScript на наличие ошибок.

Шаг 4 — Настройка Typescript Linting с помощью eslint

Теперь вы можете настроить линтинг TypeScript для проекта. Сначала мы устанавливаем eslint с помощью npm:

  1. npm install --save-dev eslint

Затем запустите команду инициализации eslint для интерактивной настройки проекта:

  1. npx eslint --init

Это задаст вам ряд вопросов. Для этого проекта мы ответим на следующее:

  • Как бы вы хотели использовать ESLint?: Проверить синтаксис и найти проблемы
  • Какие типы модулей используются в вашем проекте?: модули JavaScript (импорт/экспорт)
  • Какая платформа используется в вашем проекте? Ни одна из этих
  • Использует ли ваш проект TypeScript?: Да
  • Где работает ваш код?: Узел
  • В каком формате должен быть файл конфигурации?: JavaScript

Наконец, вам будет предложено установить некоторые дополнительные библиотеки eslint. Выберите Да. Процесс завершится, и у вас останется следующий файл конфигурации:

module.exports = {
  env: {
    es2021: true,
    node: true,
  },
  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended'],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaVersion: 13,
    sourceType: 'module',
  },
  plugins: ['@typescript-eslint'],
  rules: {},
}

Запустите линтер, чтобы проверить все файлы с расширением .ts TypeScript:

  1. npx eslint . --ext .ts

Теперь вы настроили линтер eslint для проверки синтаксиса TypeScript. Далее вы обновите конфигурацию npm, чтобы добавить несколько удобных скриптов для линтинга и запуска вашего проекта.

Шаг 5 — Обновление файла package.json

Может быть полезно поместить ваши часто выполняемые задачи командной строки в сценарии npm. Скрипты npm определяются в вашем файле package.json и могут быть запущены с помощью команды npm run your_script_name.

На этом шаге вы добавите скрипт start, который транспилирует код TypeScript, а затем запустит получившееся приложение .js.

Вы также добавите скрипт lint для запуска eslint linter в ваших файлах TypeScript.

Откройте файл package.json и обновите его соответствующим образом:

{
  "name": "node_project",
  "version": "1.0.0",
  "description": "",
  "main": "dist/app.js",
  "scripts": {
    "start": "tsc && node dist/app.js",
    "lint": "eslint . --ext .ts",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.17.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "eslint": "^8.3.0",
    "typescript": "^4.5.2"
  },
  "dependencies": {
    "express": "^4.17.1"
  }
}

В приведенном выше фрагменте вы обновили путь main, чтобы он отображал выходные данные скомпилированного приложения, и добавили команды start и lint в раздел сценариев.

При просмотре команды start вы увидите, что сначала запускается команда tsc, а затем команда node. Это скомпилирует, а затем запустит сгенерированный вывод с помощью node.

Команда lint такая же, как и на предыдущем шаге, за исключением использования префикса npx, который в этом контексте не нужен.

Заключение

Из этого руководства вы узнали, почему TypeScript полезен для написания надежного кода JavaScript. Вы также узнали о некоторых преимуществах работы с TypeScript.

Наконец, вы настроили проект Node с помощью среды Express, но скомпилировали и запустили проект с помощью TypeScript.