[環境構築]Node.js+TypeScript

## 背景
毎度毎度、セットアップの度に調べているので、自分用のメモです。

私自身はReact Nativeの開発が主ですが、簡単にjsやtsの動作確認したいときに、Playground的に利用します。

## 前提
* Mac<br>
homebrewを使う場所があるのと動作確認をMacでやっただけで、Windowsでもほぼ変わらないと思います。
* Node.jsがセットアップされている
* yarnがインストールされている<br>
もちろん、npmでも代用可
* gitがインストールされていること<br>
Macだとデフォルトでインストールされてます（Apple Git-xxxという謎バージョン）

## プロジェクトセットアップ

```
//　フォルダ作成
mkdir node-and-ts
//　カレントの移動
cd node-and-ts
// パッケージの初期化(package.jsonが作成される）
yarn init -y
```

## gitセットアップ
git自体の説明はここでは省略します。
初期化と除外ファイルの設定を行います。

### 初期化
```
// カレントに.gitフォルダと必要ファイルが作成される
// 隠しフォルダなので見れないかも
git init
// 一応できているか確認
ls -f
```

### .gitignoreの作成
giboってのを使う簡単にできるらしいのでインストールして使ってみます
出力項目の内容を.gitignoreファイル作って貼り付けてもOK。

#### giboのインストール
```
brew install gibo
```

### .gitignoreの作成
```
gibo dump macos linux windows node > .gitignore
```

### 出力
以下をコピって、.gitignoreファイルに貼り付けてもよい

```
### https://raw.github.com/github/gitignore/b0012e4930d0a8c350254a3caeedf7441ea286a3/Global/macOS.gitignore

# General
.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon

# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk


### https://raw.github.com/github/gitignore/b0012e4930d0a8c350254a3caeedf7441ea286a3/Global/Linux.gitignore

*~

# temporary files which can be created if a process still has a handle open of a deleted file
.fuse_hidden*

# KDE directory preferences
.directory

# Linux trash folder which might appear on any partition or disk
.Trash-*

# .nfs files are created when an open file is removed but is still being accessed
.nfs*


### https://raw.github.com/github/gitignore/b0012e4930d0a8c350254a3caeedf7441ea286a3/Global/Windows.gitignore

# Windows thumbnail cache files
Thumbs.db
Thumbs.db:encryptable
ehthumbs.db
ehthumbs_vista.db

# Dump file
*.stackdump

# Folder config file
[Dd]esktop.ini

# Recycle Bin used on file shares
$RECYCLE.BIN/

# Windows Installer files
*.cab
*.msi
*.msix
*.msm
*.msp

# Windows shortcuts
*.lnk


### https://raw.github.com/github/gitignore/b0012e4930d0a8c350254a3caeedf7441ea286a3/Node.gitignore

# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*

# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json

# Runtime data
pids
*.pid
*.seed
*.pid.lock

# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov

# Coverage directory used by tools like istanbul
coverage
*.lcov

# nyc test coverage
.nyc_output

# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt

# Bower dependency directory (https://bower.io/)
bower_components

# node-waf configuration
.lock-wscript

# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release

# Dependency directories
node_modules/
jspm_packages/

# Snowpack dependency directory (https://snowpack.dev/)
web_modules/

# TypeScript cache
*.tsbuildinfo

# Optional npm cache directory
.npm

# Optional eslint cache
.eslintcache

# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/

# Optional REPL history
.node_repl_history

# Output of 'npm pack'
*.tgz

# Yarn Integrity file
.yarn-integrity

# dotenv environment variables file
.env
.env.test
.env.production

# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache

# Next.js build output
.next
out

# Nuxt.js build / generate output
.nuxt
dist

# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public

# vuepress build output
.vuepress/dist

# Serverless directories
.serverless/

# FuseBox cache
.fusebox/

# DynamoDB Local files
.dynamodb/

# TernJS port file
.tern-port

# Stores VSCode versions used for testing VSCode extensions
.vscode-test

# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
```

## typescriptのインストールと初期化
### インストール
typescript自体と型情報をインストール

```
// 16の部分はご利用中のnodeバージョンを指定する
// インストールされると、node_modulesフォルダが作成され、インストールしたパッケージが保存される
yarn add --dev typescript @types/node@16 ts-node
// nodeバージョンの確認方法
node- v
````
### 初期化
```
// tsconfig.jsonファイルが作成される
yarn tsc --init
```

### tsconfig設定
設定したいこと
1. tsファイルのフォルダを指定する（srcフォルダ内に作成する）
2. ts->jsにトランスパイルした際のjsファイルの出力先
3. トランスパイルの対象ECMAScriptバージョンを変更
4. SourceMapをtrueにして、デバッグ時などに利用する（される）

##### 1. tsファイルのフォルダを指定する（srcフォルダ内に作成する）
```
// compilerOptionsと同じ並びにincludeを追加して対象フォルダを指定
// tscなどのトランスパイル時に指定したフォルダからtsファイルを探してくれる
{
  "compilerOptions": {
     ...省略...
- }
+ },
+ "include": [
+   "src/**/*"
+ ],
}
```
##### 2. ts->jsにトランスパイルした際のjsファイルの出力先
```
// もともとコメントアウトされてるoutDirに記載
{
  "compilerOptions": {
     ...省略...
-   //"outDir": "./",
+   "outDir": "./dist",
    ...省略...
}
```
##### 3. トランスパイルの対象ECMAScriptバージョンを変更
```
// targetを変更
{
  "compilerOptions": {
     ...省略...
-   "target": "es5",
+   "target": "ES2021",
    ...省略...
}
```

##### 4. SourceMapをtrueにして、デバッグ時などに利用する（される）
```
// もともとコメントアウトされてるoutDirに記載
{
  "compilerOptions": {
     ...省略...
-   //"sourceMap": true,
+   "sourceMap": true,
    ...省略...
}
```

#### tsconfigの設定内容についての詳細情報
以下のサイトに細かく記載されてます。
[TypeScript: TSConfig リファレンス - すべてのTSConfigのオプションのドキュメント](https://www.typescriptlang.org/ja/tsconfig)

#### ECMAScriptについて
ECMAScriptについては毎度忘れるのでメモ
ECMAScriptはJavaScriptの仕様。
仕様自体はちょくちょく更新されるけど、毎年決まった時期の仕様の状態をECMA2020とかECMA2021とかいって管理してる。
一般的には新しくなるにつれ、良くなっていくはずだがChromeやEdgeが新しいECMA Scriptに対応してるわけではないので、Webページ開発者はその点を気にして設定を変える必要がある、ES6(ECMA2015)とかなのか。
私はWebページの開発者でもないので、なんとなく新しいものを使っておく。

[ECMAScript](https://jsprimer.net/basic/ecmascript/)

## TypescriptでHello World
###### 1. プロジェクトフォルダ内にsrcフォルダ作成
###### 2. srcフォルダ内にhello.tsを作成
###### 3. hello.tsの中身を編集

```
console.log("Hello World");
```

###### 4. トランスパイルと実行を分けて行う
```
// tscを実行してts->jsにする
// 成功するとdistフォルダにhello.jsとしてトランスパイル結果が出力される
yarn tsc
// Node.jsでhello.jsを実行
node ./dist/hello.js
>> Hello World
```
###### 5. トランスパイルと実行を一括で行う
```
yarn ts-node ./src/hello.ts
>> Hello World
```

## 参考URL
[TypeScript + Node.js プロジェクトのはじめかた2020 - Qiita](https://qiita.com/notakaos/items/3bbd2293e2ff286d9f49)
[gibo GitHub](https://github.com/simonwhitaker/gibo)
[ECMAScript](https://jsprimer.net/basic/ecmascript/)
[TypeScript: TSConfig リファレンス - すべてのTSConfigのオプションのドキュメント](https://www.typescriptlang.org/ja/tsconfig)