Help us understand the problem. What is going on with this article?

TypeScript + Node.js プロジェクトのはじめかた2019

TL;DR

https://github.com/notakaos/typescript-node-base をコピペして使ってね

以下の手順を実行すると↑のコードが生成されます。

この記事の趣旨

以下の設定を適用した TypeScript + Node.js のプロジェクトを作成します。

項目 パッケージ
コンパイラ(トランスパイラ) typescript
開発サポート ts-node / ts-node-dev / rimraf / npm-run-all
エディター設定 EditorConfig
バージョン管理 git

動作環境

node と npm はインストール済みとします。

$ node -v
v12.13.0
$ npm -v
6.12.0

また、今回の記事はmacOSにて検証しております。

$ uname -v
Darwin Kernel Version 18.7.0: Tue Aug 20 16:57:14 PDT 2019; root:xnu-4903.271.2~2/RELEASE_X86_64

$ sw_vers
ProductName:    Mac OS X
ProductVersion: 10.14.6
BuildVersion:   18G103

Linux環境だと手順はほぼ同じだと思いますが、Windows環境の場合は読み替えが必要になるかもしれません。

初期設定

TypeScript + Node.js プロジェクトを作成していきます。

1. プロジェクトディレクトリの作成

~/
mkdir typescript-node-base
cd typescript-node-base

2. git 初期化

~/typescript-node-base
git init

.gitignore の生成

不要なファイルを Git にコミットしないようにするため、 .gitignore ファイルを生成します。

~/typescript-node-base
cat > .gitignore

以下をコピペして改行後に Ctrl+D を押下します。

~/typescript-node-base/.gitignore
# macOS
### https://raw.github.com/github/gitignore/07c730e1fccfe0f92b29e039ba149d20bfb332e7/Global/macOS.gitignore
.DS_Store
.AppleDouble
.LSOverride
Icon
._*
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

# Linux
### https://raw.github.com/github/gitignore/07c730e1fccfe0f92b29e039ba149d20bfb332e7/Global/Linux.gitignore
*~
.fuse_hidden*
.directory
.Trash-*
.nfs*

# Windows
### https://raw.github.com/github/gitignore/07c730e1fccfe0f92b29e039ba149d20bfb332e7/Global/Windows.gitignore
Thumbs.db
ehthumbs.db
ehthumbs_vista.db
*.stackdump
[Dd]esktop.ini
$RECYCLE.BIN/
*.cab
*.msi
*.msm
*.msp
*.lnk

# node.js
### https://raw.github.com/github/gitignore/07c730e1fccfe0f92b29e039ba149d20bfb332e7/Node.gitignore
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pids
*.pid
*.seed
*.pid.lock
lib-cov
coverage
.nyc_output
.grunt
bower_components
.lock-wscript
build/Release
node_modules/
jspm_packages/
typings/
.npm
.eslintcache
.node_repl_history
*.tgz
.yarn-integrity
.env
.next

(オプション) または gibo を使って .gitignore を生成する

.gitignore を生成するツール gibo を利用している場合は、以下のコマンドで前述の .gitignore と同じ内容が生成できます。

~/typescript-node-base
gibo dump macos linux windows node > .gitignore

あとは必要に応じて .gitignore を修正してください。

3. (オプション) EditorConfig の設定

様々なエディターでの文字コードや改行コード、タブorスペース等の設定を共通化できる、 EditorConfig の設定を追加します。

~/typescript-node-base
cat > .editorconfig

以下をコピペして改行後に Ctrl+D を押下します。

~/typescript-node-base/.editorconfig
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_size = 2
indent_style = space
trim_trailing_whitespace = true

[Makefile]
indent_size = 4
indent_style = tab

[*.{md,markdown}]
insert_final_newline = false
trim_trailing_whitespace = false

[*.json]
insert_final_newline = false

.editorconfig はお好みで書き換えてください。

4. package.json の生成

~/typescript-node-base
npm init -y

npm init -y で package.json を生成するとバージョン番号がデフォルトで 1.0.0 になります。

個人的な好みですが、開発中は セマンティック バージョニング 2.0.0に合わせてバージョンを 0.1.0 としておきます。

~/typescript-node-base/package.json
{
  "name": "typescript-node-base",
- "version": "1.0.0",
+ "version": "0.1.0",
  "main": "index.js",
...

5. typescript パッケージの追加

~/typescript-node-base
npm install -D typescript @types/node

typescriptパッケージをインストールしたらバージョンを確認します。

~/typescript-node-base
npx tsc --version
出力
Version 3.7.2

tsconfig.json 生成

~/typescript-node-base
npx tsc --init

tsc --init を実行すると、 tsconfig.json が生成されます。
プロジェクトに合わせて tsconfig.json を修正します(以下はコメントを除いて表記しています)。

~/typescript-node-base/tsconfig.json
{
  "compilerOptions": {
-   "target": "es5",
+   "target": "ES2019",
    "module": "commonjs",
+   "sourceMap": true,
+   "outDir": "./dist",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true
- }
+ },
+ "include": [
+   "src/**/*"
+ ],
}

6. Hello, World!

動作確認のため TypeScript の簡単なプログラムを作ってみます。

~/typescript-node-base
mkdir src
touch src/index.ts

src/index.ts をエディターで開き、以下の内容を入力して保存します。

~/typescript-node-base/src/index.ts
function hello(name: string): string {
  return `Hello, ${name}!`;
}

console.log(hello("World"));

src/index.ts ファイルを保存したら、typescript パッケージに同梱する tsc コマンドを実行します。

~/typescript-node-base
npx tsc

すると、 tsconfig.json の設定に従って TypeScript から JavaScript への変換が行われ、dist/index.jsdist/index.js.map が生成されます。

~/typescript-node-base
ls dist
#=> index.js      index.js.map

生成された index.js を実行してみましょう。

~/typescript-node-base
node dist/index.js

以下のメッセージが表示されれば成功です。

実行結果
Hello, World!

7. 開発の効率をあげる (ts-node & ts-node-dev)

tsc コマンドでコンパイルして node でプログラムが実行できるようになりました。
しかし、ソースコードを修正するたびに tsc を実行し、さらにそのあと node コマンドを実行するのは手間がかかりますね。
開発効率をあげるため、 tsc -> node の実行を自動的に行ってくれる ts-node パッケージを追加します。

ts-node パッケージの追加

~/typescript-node-base
npm install -D ts-node

パッケージが追加されたら ts-node コマンドを実行してみましょう。

~/typescript-node-base
npx ts-node src/index.ts
実行結果
Hello, World!

通常の node コマンドで JavaScript を実行するかのように、ts-node で TypeScript ファイルが実行できました。

ts-node-dev パッケージの追加

ts-node で少し効率があがりました。ただ、ソースコードを修正するたび、毎回手動で実行する必要があります。

さらに開発効率をあげるため、ソースコードの変更を検知するたびに自動的に再実行してくれる ts-node-dev パッケージを追加します。

~/typescript-node-base
npm install -D ts-node-dev

パッケージが追加されたら ts-node-dev コマンドを実行してみましょう。

注: APIサーバーのように一度実行すると動き続けるプログラムではなく、この記事のHello Worldプログラムのように1度実行するとプロセスが終了するプログラムの場合は、ts-node-dev--respawn オプションをつけます。

npx ts-node-dev --respawn src/index.ts

ts-node-dev が起動したら、エディターで src/index.ts を修正して保存します。

~/typescript-node-base/src/index.ts
function hello(name: string): string {
   return `Hello, ${name}!`;
}

- console.log(hello("World"));
+ console.log(hello("TypeScript"));

すると、ソースコードの変更を検知して、自動的にプログラムが再実行されます。

実行結果
Using ts-node version 8.3.0, typescript version 3.6.2
Hello, World!
[INFO] 15:19:41 Restarting: /Users/<USER_NAME>/typescript-node-base/src/index.ts has been modified
Using ts-node version 8.3.0, typescript version 3.6.2
Hello, TypeScript!

自動で再実行されました!

ts-node-dev を終了する時は Ctrl+C を押下します。

^C

npm-scripts に devdev:watch を追加する

ts-node と ts-node-dev を簡単に呼び出せるようにするため package.json を修正します。

~/typescript-node-base/package.json
{
  "name": "typescript-node-base",
  "version": "0.1.0",
  "main": "index.js",
  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "dev": "ts-node src/index.ts",
+    "dev:watch": "ts-node-dev --respawn src/index.ts"
  },
  ...

修正して保存したら動作確認を行います。

# 1回実行
npm run dev

# 変更検知
npm run dev:watch

これで TypeScript で Node.js のプログラムが開発できるようになりました。

8. rimraf npm-run-all パッケージの追加と npm-scripts に clean / tsc / build / start を追加

tsc でビルドを行ったファイルを一括削除できるように、rimraf パッケージを追加します。
また、複数のnpm-scriptsのコマンドを実行できるように npm-run-all パッケージも併せて追加します。

~/typescript-node-base
npm install -D rimraf npm-run-all

そして、package.json を以下のように修正します。

~/typescript-node-base/package.json
{
  "name": "typescript-node-base",
  "version": "0.1.0",
-  "main": "index.js",
+  "main": "dist/index.js",
  "scripts": {
    "dev": "ts-node ./src/index.ts",
-    "dev:watch": "ts-node-dev --respawn src/index.ts"
+    "dev:watch": "ts-node-dev --respawn src/index.ts",
+    "clean": "rimraf dist/*",
+    "tsc": "tsc",
+    "build": "npm-run-all clean tsc",
+    "start": "node ."
  },
  ...

package.json を修正したら動作確認をしましょう。

~/typescript-node-base
# TypeScript -> JavaScript に変換
npm run build

# 生成されたJavaScriptを実行
npm run start
## または
npm start

# 生成されたファイルを削除
npm run clean

最終的にはビルドで生成された JavaScript ファイルを Node.js で動作させることになります。
buildstart はそのためのものです。

9. ソースコードのバージョン管理

これまでのコードをgitにコミットしましょう。

tscコマンド実行後に生成される /dist はgitの対象外としたいので、.gitignoreファイルに以下の1行を追加します。

~/typescript-node-base/.gitignore
# 最後に以下の行を追加
/dist
~/typescript-node-base
git status
git add .
git commit -m "First commit"

これでgitへのコミットが完了しました。

あとは必要なパッケージや設定を行い、TypeScript + Node.js でのアプリケーション開発を楽しみましょう!

成果物

(2019/10/8 追記) ESLintとPrettierにも対応したベースを作成しました。

変更履歴

  • 2019/11/11 TypeScript 3.7.2 にアップデート
  • 2019/9/10 TypeScript 3.6.2 にアップデート
  • 2019/2/8 記事公開
notakaos
東京在住のWeb Developer
yumemi
みんなが知ってるあのサービス、実はゆめみが作ってます。スマホアプリ/Webサービスの企画・UX/UI設計、開発運用。Swift, Kotlin, PHP, Vue.js, React.js, Node.js, AWS等エンジニア・クリエイターの会社です。東京(三軒茶屋)/京都(四条烏丸)/札幌/大阪/福岡に展開中!Twitterで情報配信中https://twitter.com/yumemiinc
http://www.yumemi.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした