Zenn
👏

必要最低限のTypeScriptプロジェクトをCLIで作成する

2022/05/03に公開
GitHub
JavaScript
TypeScript
tech

最初に

TypeScriptで最小限のプロジェクトの作成を極力コマンドラインで作れるようにしてみました。
もっと効率いい方法もありそうですが、取り回しの面を考えて以下のようにしてみました。

前提条件

githubのrepoを作る

# 任意のディレクトリに移動
$ cd ~

# 環境変数を設定
$ export GITHUB_USER=kohski
$ export REPO_NAME=ts-init-2

# ghqでlocal repositoryを作成する
# fzf + ghqの環境を整備しておくと便利(参考: https://qiita.com/tomoyamachi/items/e51d2906a5bb24cf1684)
$ ghq create $GITHUB_USER/$REPO_NAME

# ディレクトリを移動する
$ cd ~/repos/github.com/$GITHUB_USER/$REPO_NAME

# remoteリポジトリを作る => promptには適宜回答する
$ gh repo create

# 最低限の.gitignoreを追加
$ echo -e "**/node_modules\n**/dist" > .gitignore

TypeScriptのセットアップ

# yarnを用いてプロジェクトを作成。ひとまずは全部デフォルトで実施。
$ yarn init -y

# 最低限のパッケージを追加
$ yarn add --dev typescript @types/node

# tsconfig.jsonの雛形を作成
$ echo -e echo -e '{"compilerOptions":{"target":"es2020","module":"commonjs","outDir":"./dist","esModuleInterop":true,"forceConsistentCasingInFileNames":true,"strict":true,"exactOptionalPropertyTypes":true,"noUncheckedIndexedAccess":true,"skipLibCheck":true},"include":["./src/**/*.ts"]}' > tsconfig.json

# プロジェクト用のディレクトリとファイルを作成
$ mkdir src/index.ts dist

tsconfig.jsonの内容

最後のechoコマンドの内容は以下のようになっています(ブルーベリー本第9章を参考にしています)

  • targetをes2020にする
  • compilerOptions.outDirを./distに変更
  • includeを./srcに変更
  • exactOptionalPropertyTypesを追加
  • noUncheckedIndexedAccessを追加

tsc --initでのデフォルトからの差分は以下です。

tsconfig.json
{
  "compilerOptions": {
-   "target": "es2016",
+   "target": "es2020",
    "module": "commonjs",
-   // "outDir": "./",
+   "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
+   "exactOptionalPropertyTypes": true,
+   "noUncheckedIndexedAccess": true,
    "skipLibCheck": true
  },
+ "include": ["./src/**/*.ts"]
}

おわりに

簡単ですが以上です。
本当にちょっと動かしたいなら、ts-nodeやDenoなどもあるのですが、GitHubのRepository作成も込みで以上のようにしてみました。

Discussion