TypeScript は、現代の組織で最も人気のあるプログラミング言語の 1 つとしての道を切り開いています。
TypeScript は、コンパイルされた厳密に型指定された JavaScript の上付き文字です (JavaScript 言語の上に構築されています)。 この静的に型付けされた言語は、Microsoft によって開発および維持されており、そのサブセットである JavaScript などのオブジェクト指向の概念をサポートしています。
このオープンソースのプログラミング言語には、Web アプリケーション、大規模アプリケーション、モバイル アプリケーションの作成など、多くのユース ケースがあります。 TypeScript は、フロントエンドとバックエンドの開発に使用できます。 また、開発を簡素化し、ユースケースを拡張するさまざまなフレームワークとライブラリも備えています。
Node.js で TypeScript を使用する理由この記事では、TypeScript が JavaScript よりも「優れている」と見なされる理由、Node.js を使用して TypeScript をインストールする方法、TypeScript と Node.js を使用して小さなプログラムを構成および作成する方法について説明します。
Node.js を使用した TypeScript: 利点
- オプションの静的型付け: JavaScript は動的に型付けされます。つまり、変数のデータ型はコンパイル時ではなく実行時に決定されます。 一方、TypeScript はオプションの静的型付けを提供します。つまり、変数を宣言すると、その型は変更されず、特定の値のみを取ります。
- 予測可能性: TypeScript を扱う場合、定義したものはすべて同じままであるという保証があります。 たとえば、特定の変数をブール値として宣言すると、途中で文字列に変わることはありません。 開発者は、機能が変わらないことを確信できます。
- バグを早期に発見しやすい: TypeScript はほとんどの型エラーを早期に検出するため、本番環境に移行する可能性は低くなります。 これにより、エンジニアが後の段階でコードをテストするのに費やす時間が短縮されます。
- ほとんどの IDE でサポート: TypeScript は、ほとんどの統合開発環境 (IDE) で動作します。 これらの IDE のほとんどは、コード補完と構文の強調表示を提供します。 この記事では、別の Microsoft 製品である Visual Studio Code を使用します。
- コードのリファクタリングが簡単: TypeScript アプリの動作を変更せずに、更新またはリファクタリングできます。 コードを理解するナビゲーション ツールと IDE の存在により、コードベースを簡単にリファクタリングできます。
- 既存のパッケージを利用する: すべてを最初から作成する必要はありません。 TypeScript で既存の NPM パッケージを使用できます。 この言語には、人気のあるパッケージの型定義を維持および作成する強力なコミュニティもあります。
Node.js で TypeScript を使用する方法
TypeScript にはこれらの利点がありますが、最新のブラウザーはそのコードをプレーンな形式で読み取ることができません。 したがって、ブラウザーで実行するには、まず TypeScript コードを JavaScript コードにトランスパイルする必要があります。 結果のコードには、元の TypeScript コードと同じ機能と、JavaScript では利用できない追加の機能が含まれます。
前提条件
- Node.js: Node は、ブラウザー環境外で JavaScript コードを実行できるクロスプラットフォームのランタイム環境です。 このコマンドを使用して、ノードがマシンにインストールされているかどうかを確認できます。
ノード -v
それ以外の場合は、公式 Web サイトから Node.js をダウンロードできます。 インストール後に上記のコマンドを再度実行して、適切に構成されているかどうかを確認します。
- Node Package Manager: NPM または Yarn を使用できます。 Node.js をインストールすると、前者がデフォルトでインストールされます。 この記事では、NPM をパッケージ マネージャーとして使用します。 このコマンドを使用して、現在のバージョンを確認します。
npm -v
Node.js を使用した TypeScript のインストール
ステップ 1: プロジェクト フォルダーをセットアップする
まず、TypeScript プロジェクト用のプロジェクト フォルダーを作成します。 このフォルダには任意の名前を付けることができます。 これらのコマンドを使用して開始できます。
mkdir typescript ノード
cd typescript ノード
ステップ 2: プロジェクトを初期化する
npm を使用して、このコマンドを使用してプロジェクトを初期化します。
npm init -y
上記のコマンドにより、package.json ファイルが作成されます。 コマンドの -y フラグは、npm にデフォルトを含めるように指示します。 生成されたファイルには同様の出力が含まれます。
{
"name": "typescript-node",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
Node.js を使用した TypeScript の構成
ステップ 1: TypeScript コンパイラをインストールする
TypeScript コンパイラをプロジェクトにインストールできるようになりました。 このコマンドを実行します。
npm install –save-dev typescript
コマンド ラインの出力は次のようになります。
added 1 package, and audited 2 packages in 26s found 0 vulnerabilities
注: 上記の方法では、作業中のプロジェクト フォルダーに TypeScript がローカルにインストールされます。 TypeScript はシステムにグローバルにインストールできるため、プロジェクトで作業するたびにインストールする必要はありません。 このコマンドを使用して、TypeScript をグローバルにインストールします。
npm install -g typescript
このコマンドを使用して、TypeScript がインストールされているかどうかを確認できます。
tsc -v
ステップ 2: TypeScript のアンビエント Node.js タイプを追加する
TypeScript には、Implicit、Explicit、Ambient などのさまざまなタイプがあります。 アンビエント タイプは常にグローバル実行スコープに追加されます。 アンビエント タイプを追加するには、このコマンドを使用します。
npm install @types/node –save-dev
ステップ 3: tsconfig.json ファイルを作成する
これは、すべての TypeScript コンパイル オプションを指定する構成ファイルです。 いくつかのコンパイル オプションが定義されたこのコマンドを実行します。
npx tsc --init --rootDir src --outDir build --esModuleInterop --resolveJsonModule --lib es6 --module commonjs --allowJs true --noImplicitAny true
これは端末に出力されます。
いくつかのデフォルトとコメントを含む tsconfig.json ファイルが生成されます。
tsconfig.json ファイル
これは私たちが設定したものです：
- rootDir は、TypeScript がコードを探す場所です。 コードを記述する /src フォルダーにそれを送信しました。
- outDir フォルダーは、コンパイルされたコードが置かれる場所を定義します。 このようなコードは、build/ フォルダーに格納されるように構成されています。
Node.js で TypeScript を使用する
ステップ 1: src フォルダーと index.ts ファイルを作成する
これで基本的な構成ができました。 シンプルな TypeScript アプリを作成してコンパイルできるようになりました。 TypeScript ファイルのファイル拡張子は .ts です。 前の手順で作成したフォルダー内でこれらのコマンドを実行します。
mkdir ソース
src/index.ts に触れる
ステップ 2: TypeScript ファイル (index.ts) にコードを追加する
次のような単純なものから始めることができます。
console.log('Hello world!')
ステップ 3: TypeScript コードを JavaScript コードにコンパイルする
このコマンドを実行します。
npx tsc
ビルド フォルダー (build/index.js) を確認すると、この出力で index.js が生成されていることがわかります。
TypeScript は JavaScript コードにコンパイルされています。
ステップ 4: コンパイルされた JavaScript コードを実行する
TypeScript コードはブラウザーでは実行できないことに注意してください。 したがって、build フォルダーの index.js でコードを実行します。 このコマンドを実行します。
node build/index.js
これが出力になります。
ステップ 5: JavaScript コードに自動コンパイルするように TypeScript を構成する
TypeScript ファイルを変更するたびに TypeScript コードを手動でコンパイルすると、時間が無駄になる可能性があります。 ts-node (コンパイルを待たずに TypeScript コードを直接実行する) と nodemon (コードの変更をチェックし、サーバーを自動的に再起動する) をインストールできます。
このコマンドを実行します。
npm install --save-dev ts-node nodemon
その後、package.json ファイルに移動して、このスクリプトを追加できます。
"scripts": {
"start": "ts-node ./src/index.ts"
}
デモンストレーション用に新しいコード ブロックを使用できます。
function sum (num1:number, num2:number, num3:number){
return num1 + num2 +num3;
}
console.log(sum(10,15,30))
index.js ファイル (/build/index.js) を削除し、npm start を実行します。
出力は次のようになります。
3つの数値の合計
eslint で TypeScript linting を構成する
ステップ 1: eslint をインストールする
リンティングは、コードの一貫性を維持し、実行前にエラーをキャッチする場合に役立ちます。 このコマンドを使用して eslint をインストールします。
npm install --save-dev eslint
ステップ 2: eslint を初期化する
このコマンドを使用して eslint を初期化できます。
npx eslint --init
初期化プロセスでは、いくつかの手順を実行します。 次のスクリーンショットを使用して説明します。
プロセスが完了すると、次のような内容の .eslintrc.js という名前のファイルが表示されます。
module.exports = {
env: {
browser: true,
es2021: true
},
extends: 'standard-with-typescript',
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module'
},
rules: {
}
}
ステップ 3: eslint を実行する
このコマンドを実行して、拡張子が .ts のすべてのファイルをチェックして lint します。
npx eslint . --ext .ts
ステップ 4: package.json を更新する
自動 lint のために、このファイルに lint スクリプトを追加します。
"scripts": {
"lint": "eslint . --ext .ts",
},
Node.js を使用した TypeScript: ベスト プラクティス
- TypeScript を最新の状態に保つ: TypeScript 開発者は常に新しいバージョンをリリースしています。 machine/ project フォルダーに最新バージョンがインストールされていることを確認し、新機能とバグ修正の恩恵を受けてください。
- 厳密モードを有効にする: tsconfig.json ファイルで厳密モードを有効にすると、コンパイル時に一般的なプログラミング エラーをキャッチできます。 これにより、デバッグ時間が短縮され、生産性が向上します。
- 厳密な null チェックを有効にする: tsconfig.json ファイルで厳密な null チェックを有効にすることで、コンパイル時にすべての null および未定義のエラーをキャッチできます。
- TypeScript をサポートするコード エディターを使用する: 多くのコード エディターが存在します。 プラグインを介して TypeScript をサポートする VS Code、Sublime Text、Atom などのコード エディターを選択することをお勧めします。
- タイプとインターフェイスを使用する: タイプとインターフェイスを使用して、プロジェクト全体で再利用できるカスタム タイプを定義できます。 このようなアプローチにより、コードがよりモジュール化され、保守が容易になります。
まとめ
これで、Node.js で TypeScript を使用して作成されたアプリの基本構造ができました。 通常の Node.js パッケージを使用できるようになりましたが、TypeScript でコードを記述して、後者に付属するすべての追加機能を楽しむことができます。
TypeScript を使い始めたばかりの場合は、TypeScript と JavaScript の違いを理解していることを確認してください。
