TypeScriptのインストールと実行：Node.js、npm、ts-nodeのチュートリアル
Node.js、TypeScript、npmを使ってTypeScriptをローカルにインストールして実行する方法
このチュートリアルでは、Node.js、TypeScript、npmを使ってTypeScriptをローカル環境にインストールし、実行する方法を説明します。
前提条件
このチュートリアルを始める前に、以下の環境が整っていることを確認してください。
- テキストエディタ: コードを書くためのテキストエディタが必要です。Visual Studio CodeやSublime Textなどのエディタがおすすめです。
手順
- プロジェクトを作成する
まず、プロジェクト用のディレクトリを作成します。今回はmy-typescript-projectという名前のディレクトリを作成します。
mkdir my-typescript-project
cd my-typescript-project
- npm初期化
プロジェクトディレクトリに移動したら、以下のコマンドを実行してnpmプロジェクトを初期化します。
npm init
初期化プロンプトが表示されたら、指示に従ってプロジェクトに関する情報を入力してください。
- TypeScriptをインストールする
以下のコマンドを実行して、TypeScriptとTypeScriptをNode.jsで実行するためのts-nodeパッケージをインストールします。
npm install typescript ts-node
- tsconfig.jsonファイルを作成する
TypeScriptコンパイラの設定を定義するtsconfig.jsonファイルを作成します。以下の内容のファイルをtsconfig.jsonという名前で作成します。
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*.ts"]
}
このファイルでは、以下の設定を行っています。
target: 生成するJavaScriptのバージョンを設定します。ここでは、最新のJavaScript機能を利用できるes6を設定しています。module: 生成するJavaScriptモジュールの形式を設定します。ここでは、Node.jsでよく使用されるcommonjsを設定しています。outDir: コンパイルされたJavaScriptファイルの出力先ディレクトリを設定します。ここでは、distディレクトリを設定しています。strict: TypeScriptコンパイラを厳格モードで実行するように設定します。esModuleInterop: CommonJSモジュールとES modulesの相互運用を可能にします。allowSyntheticDefaultImports: デフォルトインポートがなくても、import * as module from 'module';のような構文を使用できるようにします。
以下の内容のファイルをsrc/index.tsという名前で作成します。
// src/index.ts
console.log('Hello, TypeScript!');
このファイルは、単純なHello, World!プログラムです。
以下のコマンドを実行して、TypeScriptファイルをJavaScriptファイルにコンパイルします。
npx tsc
このコマンドを実行すると、distディレクトリにindex.jsという名前のJavaScriptファイルが生成されます。
- JavaScriptを実行する
以下のコマンドを実行して、生成されたJavaScriptファイルをを実行します。
node dist/index.js
このコマンドを実行すると、コンソールに以下の出力が表示されます。
Hello, TypeScript!
補足
- TypeScriptファイルを変更したら、再度コンパイルしてから実行する必要があります。
- より複雑なTypeScriptプログラムを書く場合は、
tsconfig.jsonファイルでさらに設定を調整することができます。 - TypeScriptライブラリやフレームワークを使用したい場合は、npmを使ってインストールすることができます。
このチュートリアルでは、基本的な手順のみを説明しました。より詳細な情報は、上記の参考情報をご覧ください。
また、TypeScriptは奥深い言語なので、様々な機能を学んでいくと良いでしょう。
tsconfig.json
{
"compilerOptions": {
"target": "es6",
"module": "commonjs",
"outDir": "./dist",
"strict": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true
},
"include": ["src/**/*.ts"]
}
src/index.ts
// src/index.ts
console.log('Hello, TypeScript!');
package.json
{
"name": "my-typescript-project",
"version": "1.0.0",
"description": "",
"main": "dist/index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"typescript": "^4.8.4",
"ts-node": "^10.8.1"
},
"devDependencies": {}
}
実行方法
- 以下のコマンドを実行してプロジェクトディレクトリに移動します。
cd my-typescript-project
npx tsc
node dist/index.js
Hello, TypeScript!
このサンプルコードは、TypeScriptの基本的な使用方法を説明しています。より複雑なプログラムを書く場合は、TypeScriptのドキュメントを参照してください。
TypeScriptをローカルにインストールして実行するその他の方法
Webブラウザ上でTypeScriptをコンパイルして実行する
TypeScript PlaygroundやCodePenなどのWebブラウザ上で動作するTypeScriptコンパイラを使用することができます。これらのツールを使用すると、コードエディタをインストールせずに、ブラウザ上でTypeScriptコードを記述、コンパイル、実行することができます。
Visual Studio CodeやWebStormなどのIDEには、TypeScriptのサポートが組み込まれています。これらのIDEを使用すると、コード補完、エラーチェック、デバッグなどの機能を利用して、TypeScript開発をより効率的に行うことができます。
WebpackやRollupなどのTypeScriptバンドラーを使用すると、TypeScriptコードをJavaScriptコードにコンパイルし、本番環境向けにバンドルすることができます。バンドラーを使用すると、コードを圧縮したり、モジュールを分割したりすることができます。
それぞれの方法には、利点と欠点があります。
- Webブラウザ上でコンパイルして実行する
- 利点: インストール不要で簡単、ブラウザ上で動作
- 欠点: 機能が限られている、複雑なプロジェクトには向かない
- IDEを使用する
- 利点: コード補完、エラーチェック、デバッグなどの機能が豊富
- 欠点: IDEをインストールする必要がある
- TypeScriptバンドラーを使用する
- 利点: コード圧縮、モジュール分割などの機能が利用できる
- 欠点: 設定が複雑、初心者には難しい
どの方法を選択するかは、開発者の好みやプロジェクトの要件によって異なります。
node.js typescript npm
