ステップ1 — npmプロジェクトの初期化

ステップ2 — 依存関係をインストールする

ステップ4 — `package.json`ファイルの更新

ステップ4 — package.jsonファイルの更新

ステップ5 — Basic Expressサーバーの作成と実行

### はじめに

[Node](https://nodejs.org/en/)は、サーバーサイド[JavaScript](https://www.javascript.com/)の記述を可能にする[ランタイム](https://en.wikipedia.org/wiki/Runtime_system)環境です。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として考えられます。

<$>[note]
**注:** TypeScriptは、技術的にはJavaScriptのスーパーセットです。つまりJavaScriptコードはすべて、有効なTypeScriptコードであるといえます。
<$>

以下にTypeScriptを使用するメリットを挙げます。

1. オプションの静的型付け。
2. 型推論。
3. インターフェースが利用可能。

このチュートリアルでは、NodeプロジェクトとTypeScriptをセットアップします。TypeScriptを使用して[Express](https://expressjs.com)アプリケーションを構築し、それを整然とした信頼性の高い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
```

2つ目のコマンドは、TypeScriptをサポートするExpress*のタイプ*をインストールします。TypeScriptのタイプはファイルで、通常は`.d.ts`という拡張子が付きます。これらのファイルはAPIに関するタイプ情報（この場合はExpressフレームワーク）の提供に使用します。

TypeScriptと Expressは独立したパッケージなので、このパッケージが必要です。`@type/express`パッケージがなければ、TypeScriptがExpressクラスのタイプを知る方法はありません。


## ステップ3 — TypeScriptの設定

このセクションでは、TypeScriptをセットアップしてTypeScriptのLintチェックを設定します。TypeScriptは、`tsconfig.json`というファイルを使用して、プロジェクトのコンパイラオプションを設定します。プロジェクトのrootディレクトリに`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 module resolution機構を模倣します。 　
* `outDir`: トランスパイル後の`.js`ファイルの出力先です。このチュートリアルでは、`dist`として保存します。

`tsconfig.json`ファイルを手動で作成、記入する代わりに次のコマンドを実行することもできます。

```command
tsc --init
```

このコマンドは、コメント付きの`tsconfig.json`ファイルを生成します。

利用可能なキー値オプションの詳細について詳しく知るには、公式[TypeScriptドキュメント](https://www.typescriptlang.org/docs/handbook/compiler-options.html)を参照してください。

これで、プロジェクトのTypeScript Lintチェックを設定できます。プロジェクトのrootディレクトリで稼働しているターミナル、つまりこのチュートリアルが`<^>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 Lintツールはデフォルト`でコンソール`ステートメントを使用したデバッグを妨げるため、Lintツールにデフォルトの`no-console`ルールを無効にするよう明示的に指示する必要があります。

## ステップ4 — `package.json`ファイルの更新

この時点で、ターミナルで関数を個別に実行するか、[npmスクリプト](https://docs.npmjs.com/misc/scripts)を作成して実行することができます。

このステップでは、TypeScriptコードをコンパイルしてトランスパイルする`start`スクリプトを作成し、結果の`.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`コマンドは、`tsconfig.json`ファイルの設定通り、アプリケーションをコンパイルし、生成された`.js`出力を指定した`outDir`ディレクトリに配置するよう、TypeScriptに指示します。

## ステップ5 — Basic Expressサーバーの作成と実行

TypeScriptとそのlintツールが設定されたので、次はNode Expressサーバーを構築しましょう。

まず、プロジェクトのrootディレクトリに`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}`);
});
```

上記のコードは、ポート`3000`でリクエストをlistenするノードサーバーを作成します。次のコマンドを使用してアプリケーションを実行します。

```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!
```

![メッセージ「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
```

この時点で、ノードプロジェクトがTypeScriptを使用するように、正常にセットアップされました。

## まとめ

このチュートリアルでは、TypeScriptが信頼性の高いJavaScriptのコードを作成するのに役立つ理由について学びました。さらに、TypeScriptで作業するメリットについても学びました。

最後に、NodeプロジェクトのセットアップにはExpressフレームワークを使用しましたが、プロジェクトのコンパイル・実行にはTypeScriptを使用しました。


サーバーサイドJavaScriptの記述は、コードベースが肥大化していくので困難な作業です。TypeScriptは、大規模なJavaScriptプロジェクトの構築・管理に役立つ型付け（オプション）スーパーセットです。これは強力な静的型付け、コンパイル、オブジェクト指向プログラミングなどの追加機能を持つJavaScriptとも考えられます。このチュートリアルでは、[Express](https://expressjs.com/)フレームワークのTypeScriptとの併用方法を説明します。

### 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.