---
lang: ja-jp
breaks: true
---
# TypeScript を試してみる。 Windows Server 2019 2021-04-09
> TypeScript入門 & 環境構築
> https://typescript-jp.gitbook.io/deep-dive/getting-started
> Node.jsとTypeScriptをインストールしよう
> https://ics.media/entry/4682/
### 環境
Node.jsが使用できる環境に対して、TypeScriptの実行環境を構築します。
```
>node -v
v12.22.1
```
### 実行環境のインストール
```cmd=
>npm install -g typescript
C:\Program Files (x86)\Nodist\bin\tsc -> C:\Program Files (x86)\Nodist\bin\node_modules\typescript\bin\tsc
C:\Program Files (x86)\Nodist\bin\tsserver -> C:\Program Files (x86)\Nodist\bin\node_modules\typescript\bin\tsserver
+ typescript@4.2.4
added 1 package from 1 contributor in 12.226s
```
```cmd=
>tsc -v
Version 4.2.4
```
### TypeScriptのサンプルプロジェクト作成
> Node.js & TypeScriptのプロジェクト作成
> https://typescript-jp.gitbook.io/deep-dive/nodejs
1. プロジェクトの依存関係設定ファイルであるpackage.jsonをセットアップします。素早くこれを行う方法はこれです：`npm init -y`
```cmd=
>npm init -y
Wrote to D:\Samples\TypeScript\sample01\package.json:
{
"name": "sample01",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}
╭───────────────────────────────────────────────────────────────╮
│ │
│ New major version of npm available! 6.14.11 -> 7.9.0 │
│ Changelog: https://github.com/npm/cli/releases/tag/v7.9.0 │
│ Run npm install -g npm to update! │
│ │
╰───────────────────────────────────────────────────────────────╯
```
2. TypeScriptをインストールします(npm install typescript --save-dev)
```cmd=
>npm install typescript --save-dev
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN sample01@1.0.0 No description
npm WARN sample01@1.0.0 No repository field.
+ typescript@4.2.4
added 1 package from 1 contributor and audited 1 package in 1.563s
found 0 vulnerabilities
```
3. Node.jsのプログラムに必要な型宣言ファイルnode.d.tsをインストールします(npm install @types/node --save-dev)
```cmd=
>npm install @types/node --save-dev
npm WARN sample01@1.0.0 No description
npm WARN sample01@1.0.0 No repository field.
+ @types/node@14.14.37
added 1 package from 42 contributors and audited 2 packages in 1.316s
found 0 vulnerabilities
```
4. TypeScriptの設定ファイルtsconfig.jsonを初期化します(npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs)
※npxコマンドが使えない場合は、`npm install -g npx` を実行。
> 知らないのは損！npmに同梱されているnpxがすごい便利なコマンドだった
> https://dev.classmethod.jp/articles/node-npm-npx-getting-started/
```cmd=
>npm install -g npx
C:\Program Files (x86)\Nodist\bin\npx -> C:\Program Files (x86)\Nodist\bin\node_modules\npx\index.js
+ npx@10.2.2
added 493 packages from 654 contributors in 17.062s
```
```=
>npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs
message TS6071: Successfully created a tsconfig.json file.
```
以上で、以下のようなファイルが色々と作成される。
※readme.txtは自動生成されません。
### 自動でコンパイルと実行を行う環境を構築
1. TypeScriptをコンパイルし、Node.jsで実行するためにts-nodeをインストールする(npm install ts-node --save-dev)
```=
>npx tsc --init --rootDir src --outDir lib --esModuleInterop --resolveJsonModule --lib es6,dom --module commonjs
message TS6071: Successfully created a tsconfig.json file.
D:\Samples\TypeScript\sample01>npm install ts-node --save-dev
npm WARN sample01@1.0.0 No repository field.
+ ts-node@9.1.1
added 9 packages from 43 contributors and audited 11 packages in 2.063s
found 0 vulnerabilities
```
3. ファイルが変更されるたびにts-nodeを再起動するためにnodemonをインストールする(npm install nodemon --save-dev)
```cmd=
>npm install nodemon --save-dev
npm WARN lifecycle The node binary used for scripts is C:\Program Files (x86)\Nodist\bin\node.exe but npm is using C:\Program Files (x86)\Nodist\v-x64\12.22.1\node.exe itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
> nodemon@2.0.7 postinstall D:\Samples\TypeScript\sample01\node_modules\nodemon
> node bin/postinstall || exit 0
Love nodemon? You can now support the project via the open collective:
> https://opencollective.com/nodemon/donate
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@~2.3.1 (node_modules\chokidar\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN sample01@1.0.0 No repository field.
+ nodemon@2.0.7
added 119 packages from 53 contributors and audited 131 packages in 10.805s
11 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
```
> アプリケーションのエントリポイントに基づいて下記のようなscriptをpackage.jsonに追加するだけです。
> エントリポイントをindex.tsと仮定した場合は次のようになります：
※「'ts-node'」の様に、ts-nodeをシングルクォーテーションで囲むと、エラーとなったため外してます。
```json=
"scripts": {
"start": "npm run build:live",
"build": "tsc -p .",
"build:live": "nodemon --watch 'src/**/*.ts' --exec ts-node src/index.ts"
},
```
以下のようなサンプルプログラムを用意する。
※UTF-8で作成すること。
src/index.ts
```cmd=
console.log("Hello! Node.js × TypeScript");
```
ts-nodeがないと怒られる場合は、以下を実行してインストールする。
```cmd=
>npm install -g ts-node
C:\Program Files (x86)\Nodist\bin\ts-node-transpile-only -> C:\Program Files (x86)\Nodist\bin\node_modules\ts-node\dist\bin-transpile.js
C:\Program Files (x86)\Nodist\bin\ts-node-script -> C:\Program Files (x86)\Nodist\bin\node_modules\ts-node\dist\bin-script.js
C:\Program Files (x86)\Nodist\bin\ts-script -> C:\Program Files (x86)\Nodist\bin\node_modules\ts-node\dist\bin-script-deprecated.js
C:\Program Files (x86)\Nodist\bin\ts-node -> C:\Program Files (x86)\Nodist\bin\node_modules\ts-node\dist\bin.js
npm WARN ts-node@9.1.1 requires a peer of typescript@>=2.7 but none is installed. You must install peer dependencies yourself.
+ ts-node@9.1.1
added 9 packages from 43 contributors in 1.226s
```
`npm start`を実行すると、プログラムの変更が監視され、自動実行されます。
```cmd=
>npm start
npm WARN lifecycle The node binary used for scripts is C:\Program Files (x86)\Nodist\bin\node.exe but npm is using C:\Program Files (x86)\Nodist\v-x64\12.22.1\node.exe itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
> sample01@1.0.0 start D:\Samples\TypeScript\sample01
> npm run build:live
npm WARN lifecycle The node binary used for scripts is C:\Program Files (x86)\Nodist\bin\node.exe but npm is using C:\Program Files (x86)\Nodist\v-x64\12.22.1\node.exe itself. Use the `--scripts-prepend-node-path` option to include the path for the node binary npm was executed with.
> sample01@1.0.0 build:live D:\Samples\TypeScript\sample01
> nodemon --watch 'src/**/*.ts' --exec ts-node src/index.ts
[nodemon] 2.0.7
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): 'src\**\*.ts'
[nodemon] watching extensions: ts,json
[nodemon] starting `ts-node src/index.ts`
Hello! Node.js × TypeScript
[nodemon] clean exit - waiting for changes before restart
```
###### tags: `TypeScript` `Node.js` `Windows Server 2019`
Sign in with Wallet
Connect another wallet