こんにちは、現役エンジニアの inno_tech です。
TypeScriptプロジェクトの始め方をお探しでしょうか? 本記事ではTypeSript入門として、開発環境の構築~サンプルプログラムのビルド方法を解説しています。
本記事は、Ubuntu 20.04LTS で動作確認しています。
TypeScript と JavaScriptの違い
TypeScriptは Microsoft が開発したプログラミング言語で、JavaScriptに対して静的型付けをサポートし、クラスベースのオブジェクト指向が加えられています。
TypeScriptでコーディングされたプログラムは、実行前にビルドしてJavaScriptに変換されます。このビルド時にコードの不整合等がチェックされるため、プログラムの実行前にバグを潰すことができます。
それぞれの特徴の比較表を作成してみました。
項目 | JavaScript (ECMA Script) | TypeScript |
---|---|---|
分類 | 動的型付け言語 | 静的型付け言語. コーディング時に型情報を付ける必要がある. |
拡張子 | .js | .ts |
ビルドが必要か? | 不要 | 必要 |
エディターによる コード補完機能 のサポート | 推測できない場合は効かない場合がある. | 完全にサポートされる. 関数の引数の型も分かるので、コーディングが楽になる. |
活用シーン | 小規模なプロジェクト向き | 大規模プロジェクト向き |
コーディング量はTypeScriptの方が増えますが、総合的な生産性はTypeScriptの方が良いと思うよ
それでは早速、TypeScriptの開発環境を作成していきましょう.
TypeScript 開発環境構築の流れ
TypeScriptの開発環境をつくるまでの流れは以下の通りです。TypeScriptをビルドするため、Node.js環境が必要です。
- Node.js開発環境を構築
- TypeScript用パッケージの導入
- ビルド設定ファイル
tsconfig.json
の作成 - TypeScriptファイル(.ts)の作成
- ビルド と 実行
以下、順を追って説明していきます。
Node.js開発環境構築
Node.jsの開発環境構築については、下記の記事でまとめているので参照してください。
ここまでの作業で、Node.jsのインストールとプロジェクトフォルダ内にpackage.jsonができていればOKです。
TypeScript用パッケージの導入
次に、TypeScriptをビルドするために必要なパッケージを導入します。ターミナルから以下のようにインストールします。
# プロジェクトフォルダ(package.jsonと同じ階層)に移動
cd [Project Dir]
# インストール(--save-dev : 開発環境にのみ導入)
npm install typescript --save-dev
# バージョン確認
tsc -v
Version 4.7.4
TypeScriptのビルドは tsc コマンドで実行するよ
更に、srcフォルダを作成し、その中に server.tsファイル(とりあえず空ファイル)を作成してください。この時点で下記のようなファイル構成になればOKです。
[Project Dir]
├── node_modules
├── package-lock.json
├── package.json
└── src
└── server.ts
ビルド設定ファイル tsconfig.json の作成
続いて、TypeScriptビルド設定ファイル tsconfig.json
を作成します。ターミナルでtsc --init
を実行することで設定ファイルが生成されます。
# プロジェクトフォルダ(package.jsonと同じ階層)に移動
cd [Project Dir]
# tsconfog.json の作成
tsc --init
しかし、初期生成されるファイルはかなり冗長な表現になっており、わかりづらいです。
そこで、Microsoftのサンプルプロジェクト(TypeScript-Node-Starter)に公開されているtsconfig.json
の中身をコピペし、一部修正します。
{
"compilerOptions": {
"module": "commonjs",
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"target": "es6",
"noImplicitAny": true,
"moduleResolution": "node",
"sourceMap": true, // sourceMapを有効化するか? 開発時はtrueでOK.
"outDir": "dist", // コンパイル後の出力先
"baseUrl": ".",
"paths": {
"*": [
"node_modules/*",
"src/types/*"
]
}
},
// コンパイル対象ファイル
"include": [
"src/**/*"
],
// 除外フォルダ (追加)
"exclude": ["node_modules", "dist"]
}
srcディレクトリ配下の.tsファイルをビルド ⇒ distディレクトリに.jsファイルを出力する設定だよ
さらに、package.json
を開き、scriptsキー配下に、ビルドコマンド(build) と プログラムの開始コマンド(start-app)を追加します。
{
"name": "sample-app",
"version": "1.0.0",
"description": "xxxx.",
"main": "server.js",
"scripts": {
"build": "npx tsc --build ./tsconfig.json", // ビルド用コマンドを追加. --buildでconfigファイルのパス指定
"start-app": "node ./dist/server.js" // distディレクトリのjsファイル
},
"author": "inno-tech-life.",
"license": "ISC"
}
この時点のファイル構成は以下のようになっています。
[Project Dir]
├── node_modules
├── package-lock.json
├── package.json
├── src
│ └── server.ts
└── tsconfig.json
TypeScriptファイル(.ts)の作成
続いて、src/server.ts
ファイルの中身を記述します。足し算結果を表示するだけのプログラムです。
// 足し算を行うプログラム
const a = 5;
const b = 10;
const result = sum(a, b);
// 結果表示
console.log(`${a} + ${b} = ${result}です`);
// 関数 sumを定義
function sum(a: number, b: number): number{
return a + b;
}
ビルド と 実行
TypeScriptファイルが準備できたので、ビルドします。ターミナルから以下のように実行してください。
# ビルド実行
npm run build
> sample-app@1.0.0 build
> npx tsc --build ./tsconfig.json
ビルドに成功すれば、distディレクトリ配下に .jsファイル が生成されているはずです。
[Project Dir]
├── dist
│ ├── server.js
│ └── server.js.map
├── node_modules
├── package-lock.json
├── package.json
├── src
│ └── server.ts
└── tsconfig.json
最後に、アプリケーションを実行します。
# アプリケーションの実行
npm run start-app
> sample-app@1.0.0 start-app
> node ./dist/server.js
# 結果
5 + 10 = 15です
少し長かったけどできたかな?
以上でTypeScriptの開発環境が整いました. 以降は 自身のプロジェクト向けにカスタマイズして開発をしていきましょう.
まとめ
今回のまとめです。
- TypeScriptで静的な型付けがサポートされ、大規模なプロジェクト開発がしやすくなる.
- TypeScriptの環境構築方法を解説。
- tsconfig.jsonを使ってビルドの環境設定を行う。
このミステリーがすごい!2022年版で国内編1位に選出された注目の本が気になる方はこちら。
参考になったでしょうか。
ほかにも役立つ情報が他のページにあるかもしれないのでお見逃しなく!
ご覧になるかはあなた次第です!
この記事がイイねと思ったら、Twitterフォロー か にほんブログ村のどちらかしてくれたら嬉しいよ!
コメント / ご要望