0
Help us understand the problem. What are the problem?

posted at

updated at

TypeScript + Node.jsの簡易プロジェクトセットアップ

はじめに

スクリプトを作成しようとする際、毎回手順が曖昧になってしまうためまとめておこうと思います。
TypeScriptとNode.jsを用いたプロジェクトの設定手順を記載します。

環境

Mac OSを用います。 Node.jsとnpmはインストール済みのものとします。

手順

1. 作業ディレクトリの作成

./
$ mkdir typescript-node-setup
$ cd typescript-node-setup

2. npm初期化

./typescript-node-setup
$ npm init

3. TypeScript インストール

./typescript-node-setup
$ npm i --save typescript

4. Node.js型定義の追加

./typescript-node-setup
$ npm i -D @types/node

5. tsconfig.json設定

./typescript-node-setup
$ tsc  --init

'tsconfig.json' の中身は下記を設定する。詳細は割愛。

./typescript-node-setup/tsconfig.json
...
"sourceMap": true, 
"outDir": "./dist",
...
  },
  "include": ["src/**/*" ]
}

6. ts-nodeパッケージをインストール

./typescript-node-setup
$ npm i -D ts-node

package.jsonにscriptsを追加しておく

./typescript-node-setup/package.json
...
"scripts": {
   "dev": "ts-node src/index.ts",
...

7. (任意) ts-node-devパッケージをインストール

./typescript-node-setup
$ npm i -D ts-node-dev

package.jsonへの追加。
watchモードの意味で"dev-w"としてみる。

./typescript-node-setup/package.json
...
"scripts": {
   "dev": "ts-node src/index.ts",
   "dev-w": "ts-node-dev --respawn src/index.ts",   
...

試してみる

./typescript-node-setup
$ mkdir src
$ touch src/index.ts
./typescript-node-setup/src/index.ts
console.log('Hello, World!');
./typescript-node-setup
$ npm run dev-w

こんな感じで環境設定する。スクリプト作成する際に。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?