/ts-basic-demo

Sample repository to learn TypeScript basic features

Primary LanguageTypeScriptMIT LicenseMIT

License

The source code is licensed MIT.

1.環境構築

1-1. Node環境の確認とインストール

  1. Homebrewのバージョンを確認
    brew --version
  2. インストールされていなければ実行
    /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  3. nodebrewのインストール
    brew install nodebrew
  4. nodeの安定バージョンをインストール
    nodebrew install stable
  5. nodebrewのバージョン一覧を確認
    nodebrew ls
  6. インストールしたバージョンを指定して切り替える
    nodebrew use v14.15.3
  7. nodeのパスを通す
    echo 'export PATH=$HOME/.nodebrew/current/bin:$PATH' >> ~/.zprofile'
  8. ターミナルの再起動
  9. nodeとnpmのバージョン確認
    node -v
    npm -v

1-2. TypeScript環境構築

  1. 開発用ディレクトリの作成
    mkdir ~/<YOUR_DEV_DIR>/ts-basic
  2. npmの初期化
    npm init
  3. 関連パッケージのインストール(※)
    npm install --save-dev typescript ts-loader webpack webpack-cli webpack-dev-server
  4. webpack.config.jsの作成と設定
  5. tsconfig.jsonの作成と設定
    tsc --init

※ 実行時にgyp: No Xcode or CLT version detected!のエラーが出たら

Mac OSに入っているXCodeのバージョンと、コマンドラインツールのバージョンが合っていないという理由で怒られています。
以下手順でコマンドラインツールのバージョンをアップデートしましょう。

sudo付きのコマンドはMac OSのパスワード入力が必要です。 4.を実行すると、コマンドラインツールをインストールするか聞かれるので、同意して進めてください。

  1. sudo rm -rf $(xcode-select -print-path)
  2. sudo rm -rf /Library/Developer/CommandLineTools
  3. sudo xcode-select --reset
  4. xcode-select --install
  5. xcode-select -p
  6. 5.の実行結果が/Library/Developer/CommandLineToolsでなければsudo xcode-select -switch /Library/Developer/CommandLineToolsを実行

インストールが完了したら、「3.関連パッケージのインストール」のコマンドを再実行してください。

2. ESLintとPrettierのCI環境を構築

2-1. パッケージのインストール

npm install --save-dev eslint eslint-config-prettier prettier @typescript-eslint/parser @typescript-eslint/eslint-plugin husky lint-staged

2-2. huskyがもし動かなかったら...

.git/hooksが正常に作成されていない可能性アリ これで確認する
ls -la .git/hooks/ls -la .git/hooks/

.sampleしかなかったらNG
NGの場合はインストールし直す npm uninstall huksy
npm install --save-dev husky
もう一度hooksを確認
ls -la .git/hooks/ls -la .git/hooks/