Предварительные требования

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

Шаг 2 — Установка зависимостей

Шаг 3 — Настройка TypeScript

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

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

Шаг 5 — Создание и запуск базового сервера Express

### Введение

[Node](https://nodejs.org/en/) — это среда [исполнения](https://en.wikipedia.org/wiki/Runtime_system), позволяющая писать серверный код [JavaScript](https://www.javascript.com/). Она получила очень широкое распространение после своего выпуска в 2011 году. С ростом базы кода написание серверного кода JavaScript может представлять сложности в связи с характером языка JavaScript: [динамичным](https://en.wikipedia.org/wiki/Programming_language#Static_versus_dynamic_typing) и [слабо типизированным](https://en.wikipedia.org/wiki/Programming_language#Weak_and_strong_typing).

Разработчики, переходящие на JavaScript с других языков, часто жалуются на отсутствие мощного статического типирования, но TypeScript позволяет устранить этот недостаток.

[TypeScript](https://www.typescriptlang.org/) — это типовой (опциональный) супернабор JavaScript, который может помочь со сборкой и управлением крупномасштабными проектами JavaScript. Его можно представить как JavaScript с дополнительными возможностями, включая мощное статическое типирование, компиляцию и объектно-ориентированное программирование.

<$>[note]
**Примечание.** С технической точки зрения TypeScript является супернабором JavaScript, и это означает, что весь код JavaScript является корректным кодом TypeScript.
<$>

Перечислим некоторые преимущества использования TypeScript:

1. Опциональная статическая типизация.
2. Логическая обработка типов.
3. Возможность использования интерфейсов.

В этом учебном модуле вы настроите проект Node с помощью TypeScript. Вы создадите приложение [Express](https://expressjs.com) с помощью TypeScript и преобразуете его в компактный и надежный код JavaScript.

## Предварительные требования

Перед началом прохождения этого модуля вам нужно будет установить Node.js на вашем компьютере. Для этого можно выполнить указания руководства [Установка Node.js и создание локальной среды разработки](https://www.digitalocean.com/community/tutorial_series/how-to-install-node-js-and-create-a-local-development-environment) для вашей операционной системы.

## Шаг 1 — Инициализация проекта npm

Для начала создайте новую папку с именем `<^>node_project<^>` и перейдите в этот каталог.

```command
mkdir <^>node_project<^>
cd <^>node_project<^>
```

Затем инициализируйте его как проект npm:

```command
npm init
```

После запуска `npm init` вам нужно будет передать npm информацию о вашем проекте. Если вы разрешите npm принимать ощутимые значения по умолчанию, вы можете добавить флаг `y`, чтобы пропустить диалоги с запросом дополнительной информации:

```command
npm init -y
```

Теперь пространство вашего проекта настроено, и вы можете перейти к установке необходимых зависимостей.

## Шаг 2 — Установка зависимостей

Следующий шаг после инициализации базового проекта npm — установить зависимости, требующиеся для запуска [TypeScript](https://www.typescriptlang.org/).

Запустите следующие команды из каталога вашего проекта для установки зависимостей:

```command
npm install -D typescript@3.3.3
npm install -D tslint@5.12.1
```

Флаг `-D` — сокращенное обозначение опции: `--save-dev`. Более подробную информацию об этом флаге можно найти [в документации npmjs](https://docs.npmjs.com/cli/install).

Пришло время установить платформу [Express](https://expressjs.com/):

```command
npm install -S express@4.16.4
npm install -D @types/express@4.16.1
```

Вторая команда устанавливает *типы* Express для поддержки TypeScript. Типы в TypeScript — это файлы, которые обычно имеют расширение `.d.ts`. Файлы используются для предоставления типовой информации об API, в данном случае структуры Express.

Этот пакет требуется, потому что TypeScript и Express являются независимыми пакетами. Без пакета `@types/express` у TypeScript нет способа узнавать типы классов Express.


## Шаг 3 — Настройка TypeScript

В этом разделе мы настроим TypeScript и проверку соблюдения стандартов для TypeScript. TypeScript использует файл `tsconfig.json` для настройки опций компилятора для проекта. Создайте файл `tsconfig.json` в корне каталога проекта и вставьте следующий фрагмент кода:

```json
[label tsconfig.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`.

В качестве альтернативы созданию и заполнения файла `tsconfig.json` вручную можно запустить следующую команду:

```command
tsc --init
```

Эта команда сгенерирует файл `tsconfig.json` с правильными комментариями.

Чтобы узнать больше о доступных опциях ключ-значение, можно использовать официальную [документацию TypeScript](https://www.typescriptlang.org/docs/handbook/compiler-options.html), где приводятся разъяснения всех опций.

Теперь вы можете настроить проверку соответствия стандартам кода TypeScript для этого проекта. Откройте в терминале корневой каталог вашего проекта, который установлен в этом учебном модуле как `<^>node_project<^>`, и запустите следующую команду для генерирования файла `tslint.json`:

```command
./node_modules/.bin/tslint --init
```

Откройте сгенерированный файл `tslint.json` и добавьте соответствующее правило `no-console`:

```json
[label tslint.json]
{
  "defaultSeverity": "error",
  "extends": ["tslint:recommended"],
  "jsRules": {},
  "rules": {
    "no-console": false
  },
  "rulesDirectory": []
}
```

По умолчанию модуль проверки TypeScript предотвращает использование отладки через команды `консоли`, поэтому нужно явно предписать ему отключить правило по умолчанию `no-console`.

## Шаг 4 — Обновление файла `package.json`

Сейчас вы можете запускать функции в терминале по отдельности или создать [скрипт npm](https://docs.npmjs.com/misc/scripts) для их запуска.

На этом шаге мы создадим скрипт `start`, который выполнит компиляцию и транспиляцию кода TypeScript, а затем запустит полученное приложение `.js`.

Откройте файл `package.json` и обновите его соответствующим образом:

```json
[label package.json]
{
  "name": "node-with-ts",
  "version": "1.0.0",
  "description": "",
  "main": "dist/app.js",
  "scripts": {
    "start": "tsc && node dist/app.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@types/express": "^4.16.1",
    "tslint": "^5.12.1",
    "typescript": "^3.3.3"
  },
  "dependencies": {
    "express": "^4.16.4"
  }
}
```

В приведенном выше фрагменте кода мы обновили путь `main` и добавили команду `start` в раздел [scripts](https://docs.npmjs.com/misc/scripts). Если посмотреть на команду `start`, вы увидите, что вначале запускается команда `tsc`, а затем — команда `node`. При этом будет проведена компиляция, и сгенерированный вывод будет запущен с помощью `node`.

Команда `tsc` предписывает TypeScript скомпилировать приложение и поместить сгенерированный вывод `.js` в указанном каталоге `outDir`, как указано в файле `tsconfig.json`.

## Шаг 5 — Создание и запуск базового сервера Express

Теперь TypeScript и модуль проверки настроены, и мы можем приступить к сборке модуля Node Express Server.

Вначале создайте папку `src` в корневом каталоге вашего проекта:

```command
mkdir src
```

Затем создайте файл с именем `app.ts`:

```command
touch src/app.ts
```

На этом этапе структура каталогов должна выглядеть следующим образом:

```
├── node_modules/
├── src/
  ├── app.ts
├── package-lock.json
├── package.json
├── tsconfig.json
├── tslint.json
```

Откройте файл `app.ts` в предпочитаемом текстовом редакторе и вставьте следующий фрагмент кода:

```typescript
[label src/app.ts]
import express from 'express';

const app = express();
const port = 3000;
app.get('/', (req, res) => {
  res.send('The sedulous hyena ate the antelope!');
});
app.listen(port, err => {
  if (err) {
    return console.error(err);
  }
  return console.log(`server is listening on ${port}`);
});
```

Приведенный выше код создает сервер Node, прослушивающий порт `3000` на предмет запросов. Запустите приложение с помощью следующей команды:

```command
npm start
```

При успешном выполнении сообщение будет зарегистрировано на терминале:

```command
[secondary_label Output]
server is listening on 3000
```

Теперь вы можете открыть в браузере адрес `http://localhost:3000` и увидите следующее сообщение:

```command
[secondary_label Output]
The sedulous hyena ate the antelope!
```

![Окно браузера с сообщением: Усердная гиена съела антилопу!](https://assets.digitalocean.com/articles/setting-up-a-node-project-with-typescript/1.png)

Откройте файл `dist/app.js`, и вы найдете в нем транспилированную версию кода TypeScript:

```javascript
[label dist/app.js]
"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 = express_1.default();
const port = 3000;
app.get('/', (req, res) => {
    res.send('The sedulous hyena ate the antelope!');
});
app.listen(port, err => {
    if (err) {
        return console.error(err);
    }
    return console.log(`server is listening on ${port}`);
});

//# sourceMappingURL=app.js.map
```

Вы успешно настроили проект Node для использования TypeScript.

## Заключение

В этом учебном модуле вы узнали, почему TypeScript полезен для написания надежного кода JavaScript. Также вы узнали о некоторых преимуществах работы с TypeScript.

Наконец, вы настроили проект Node с использованием структуры Express, но скомпилировали и запустили проект с помощью TypeScript.


По мере увеличения базы кода написание серверного кода JavaScript становится сложнее. TypeScript — это типовой (опциональный) супернабор JavaScript, который может помочь со сборкой и управлением крупномасштабными проектами JavaScript. Его можно представить как JavaScript с дополнительными возможностями, включая мощное статическое типирование, компиляцию и объектно-ориентированное программирование. В этом учебном модуле вы узнаете, как использовать структуру [Express](https://expressjs.com/) с Ty

### Introduction

[Node](https://nodejs.org/en/) is a runtime environment that makes it possible to write server-side [JavaScript](https://www.javascript.com/). It has gained widespread adoption since its release in 2011. Writing server-side JavaScript can be challenging as a codebase grows due to the dynamic and weak-typed nature of the JavaScript language.
Developers coming to JavaScript from other languages often complain about its lack of strong static typing, but this is where TypeScript comes into the picture, to bridge this gap.

[TypeScript](https://www.typescriptlang.org/) is a typed (optional) super-set of JavaScript that can help with building and managing large-scale JavaScript projects. It can be thought of as JavaScript with additional features like strong static typing, compilation, and object-oriented programming.

<$>[info]
Deploy your frontend applications from GitHub using [DigitalOcean App Platform](https://www.digitalocean.com/products/app-platform). Let DigitalOcean focus on scaling your app.
<$>

<$>[note]
**Note:** TypeScript is technically a super-set of JavaScript, which means that all JavaScript code is valid TypeScript code.
<$>

Here are some benefits of using TypeScript:

1. Optional static typing.
2. Type inference.
3. Ability to use Interfaces.

In this tutorial, you will set up a Node project with TypeScript. You will build an [Express](https://expressjs.com) application using TypeScript and transpile it down to JavaScript code.

## Prerequisites

Before you begin this guide, you will need Node.js installed on your system. You can accomplish this by following the [How to Install Node.js and Create a Local Development Environment](https://www.digitalocean.com/community/tutorial_series/how-to-install-node-js-and-create-a-local-development-environment) guide for your operating system.

<$>[note]
These steps are valid for the most recent versions of Ubuntu: Ubuntu 24.04, Ubuntu 22.04, and Ubuntu 20.04. If you are using Ubuntu version <= 18.04, we recommend you upgrade to a more latest version since Ubuntu no longer provides support for the older versions. [This collection of guides](https://www.digitalocean.com/community/tutorial-collections/ubuntu-lts-upgrades) will help you in upgrading your Ubuntu version. <$>

## Step 1 — Initializing the Project

To get started, create a new folder named `<^>node_project<^>` and move into that directory:

```command
mkdir <^>node_project<^>
cd <^>node_project<^>
```

Next, initialize it as an npm project:

```command
npm init -y
```

The `-y` flag tells `npm init` to automatically say "yes" to the defaults. You can always update this information later in your `package.json` file.

## Step 2 — Configuring the TypeScript Compiler

Now that your npm project is initialized, you are ready to install and set up TypeScript.

Run the following command from inside your project directory to install the TypeScript:

```command
npm install --save-dev typescript
```

```console
[secondary_label Output]
added 1 package, and audited 2 packages in 1s

found 0 vulnerabilities
```

TypeScript uses a file called `tsconfig.json` to configure the compiler options for a project. Create a `tsconfig.json` file in the root of the project directory:

```command
nano tsconfig.json
```

Then paste in the following JSON:

```json
[label tsconfig.json]
{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "outDir": "dist"
  },
  "lib": ["es2015"]
}
```

Let's go over some of the keys in the JSON snippet above:

- `module`: Specifies the module code generation method. Node uses `commonjs`.
- `target`: Specifies the output language level.
- `moduleResolution`: This helps the compiler figure out what an import refers to. The value `node` mimics the Node module resolution mechanism.
- `outDir`: This is the location to output `.js` files after transpilation. In this tutorial, you will save it as `dist`.

To learn more about the key value options available, the official [TypeScript documentation](https://www.typescriptlang.org/docs/handbook/compiler-options.html) offers explanations of every option.

## Step 3 — Creating a Minimal TypeScript Express Server

Now, it is time to install the [Express](https://expressjs.com/) framework and create a minimal server:

```command
npm install --save express@4.17.1
npm install -save-dev @types/express@4.17.1
```

The second command installs the Express _types_ for TypeScript support. Types in TypeScript are files, normally with an extension of `.d.ts`. The files are used to provide type information about an API, in this case, the Express framework.

This package is required because TypeScript and Express are independent packages. Without the `@types/express` package, there is no way for TypeScript to know about the types of Express classes.

Next, create a `src` folder in the root of your project directory:

```command
mkdir src
```

Then create a TypeScript file named `app.ts` within it:

```command
nano src/app.ts
```

Open up the `app.ts` file with a text editor of your choice and paste in the following code snippet:

```typescript
[label src/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}`);
});
```

The code above creates a Node Server that listens on the port `3000` for requests. To run the app, you first need to compile it to JavaScript using the following command:

```command
npx tsc
```

This uses the configuration file we created in the previous step to determine how to compile the code and where to place the result. In our case, the JavaScript is output to the `dist` directory.

Run the JavaScript output with `node`:

```command
node dist/app.js
```

If it runs successfully, a message will be logged to the terminal:

```command
[secondary_label Output]
Express is listening at http://localhost:3000
```

Now, you can visit [`http://localhost:3000`](http://localhost:3000) in your browser and you should see the message:

```command
[secondary_label Output]
Hello World!
```

Open the `dist/app.js` file and you will find the transpiled version of the TypeScript code:

```javascript
[label dist/app.js]
"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
```

At this point, you have successfully set up your Node project to use TypeScript. Next, you'll set up the eslint linter to check your TypeScript code for errors.

## Step 4 — Configuring Typescript Linting with eslint

Now you can configure TypeScript linting for the project. First, we install `eslint` using `npm`:

```command
npm install --save-dev eslint
```

Then, run `eslint`'s initialization command to interactively set up the project:

```command
npm init @eslint/config@latest
```

This will ask you a series of questions. For this project we'll answer the following:

- **How would you like to use ESLint?:** _To check syntax and find problems_
- **What type of modules does your project use?:** _JavaScript modules (import/export)_
- **Which framework does your project use?:** _None of these_
- **Does your project use TypeScript?:** _Yes_
- **Where does your code run?:** _Node_
- **What format do you want your config file to be in?:** _JavaScript_

Finally, you will be prompted to install some additional eslint libraries. Choose `Yes`. The process will finish and you'll be left with the following configuration file:

```javascript
[label eslintrc.js]
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: {},
}
```

Run the linter to check all files with the `.ts` TypeScript extension:

```command
npx eslint . --ext .ts
```

You've now set up the eslint linter to check your TypeScript syntax. Next, you'll update your npm configuration to add some convenient scripts for linting and running your project.

## Step 5 — Updating the `package.json` File

It can be useful to put your commonly run command line tasks into [npm scripts](https://docs.npmjs.com/cli/v8/using-npm/scripts). npm scripts are defined in your `package.json` file and can be run with the command `npm run <^>your_script_name<^>`.

In this step, you will add a `start` script that will transpile the TypeScript code and then run the resulting `.js` application.

You will also add a `lint` script to run the eslint linter on your TypeScript files.

Open the `package.json` file and update it accordingly:

```json
[label 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"
  }
}
```

In the snippet above, you updated the `main` path to be the compiled app output and added the `start` and `lint` commands to the [scripts](https://docs.npmjs.com/misc/scripts) section.

When looking at the `start` command, you'll see that first the `tsc` command is run, and then the `node` command. This will compile and then run the generated output with `node`.

The `lint` command is the same as we ran in the previous step, minus the use of the `npx` prefix which is not needed in this context.

## Conclusion

In this tutorial, you learned about why TypeScript is useful for writing reliable JavaScript code. You also learned about some of the benefits of working with TypeScript.

Finally, you set up a Node project using the Express framework but compiled and ran the project using TypeScript.


Writing server-side JavaScript can be challenging as a codebase grows. TypeScript is a typed (optional) super-set of JavaScript that can help with building and managing large-scale JavaScript projects. It can be thought of as JavaScript with additional features like strong static typing, compilation and object oriented programming. This tutorial will explore how to use the [Express](https://expressjs.com/) framework with TypeScript.