typescriptプロジェクトの立ち上げ

2021-03-07

node16でtypescriptのプロジェクト作成手順を忘れるのでメモ

リポジトリ初期化

git init .
echo node_modules > .gitignore

npmの初期化と typescript のインストール。

npm init -y
npm i --save-dev typescript @types/node

npx tsc --init

tsconfig

compilerOptionsTypeScript/wiki/Node-Target-Mappingの利用するバージョンに対応する値に変更する。 今回はnode16に設定を利用。

項目 説明
target TypeScriptをトランスパイルした結果出力されるJavaScriptのバージョンを定義
lib built-inで利用できるAPIの型定義を指定
outDir トランスパイル結果の出力先
include ソースコードを指定

TypeScriptの型の恩恵を十分に活用するために noImplicit 系統を有効化

diff --git a/tsconfig.json b/tsconfig.json
index 5679481..0c1f40c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,8 +11,8 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */

     /* Language and Environment */
-    "target": "es2016",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
-    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "target": "es2021",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "lib": ["es2021"],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
     // "jsx": "preserve",                                /* Specify what JSX code is generated. */
     // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
@@ -47,7 +47,7 @@
     // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
     // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
     // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If `declaration` is true, also designates a file that bundles all .d.ts output. */
-    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    "outDir": "./dist",                                   /* Specify an output folder for all emitted files. */
     // "removeComments": true,                           /* Disable emitting comments. */
     // "noEmit": true,                                   /* Disable emitting files from a compilation. */
     // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
@@ -75,22 +75,22 @@

     /* Type Checking */
     "strict": true,                                      /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
-    // "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
-    // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
-    // "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
-    // "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
-    // "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
-    // "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
-    // "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
-    // "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
-    // "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
-    // "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
-    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
-    // "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-    // "noUncheckedIndexedAccess": true,                 /* Include 'undefined' in index signature results */
-    // "noImplicitOverride": true,                       /* Ensure overriding members in derived classes are marked with an override modifier. */
-    // "noPropertyAccessFromIndexSignature": true,       /* Enforces using indexed accessors for keys declared using an indexed type */
+    "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied `any` type.. */
+    "strictNullChecks": true,                         /* When type checking, take into account `null` and `undefined`. */
+    "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
+    "strictBindCallApply": true,                      /* Check that the arguments for `bind`, `call`, and `apply` methods match the original function. */
+    "strictPropertyInitialization": true,             /* Check for class properties that are declared but not set in the constructor. */
+    "noImplicitThis": true,                           /* Enable error reporting when `this` is given the type `any`. */
+    "useUnknownInCatchVariables": true,               /* Type catch clause variables as 'unknown' instead of 'any'. */
+    "alwaysStrict": true,                             /* Ensure 'use strict' is always emitted. */
+    "noUnusedLocals": true,                           /* Enable error reporting when a local variables aren't read. */
+    "noUnusedParameters": true,                       /* Raise an error when a function parameter isn't read */
+    "exactOptionalPropertyTypes": true,               /* Interpret optional property types as written, rather than adding 'undefined'. */
+    "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    "noFallthroughCasesInSwitch": true,               /* Enable error reporting for fallthrough cases in switch statements. */
-  }
+  },
+  "include": ["src/**/*"]

.gitignoreにdist追加

echo dist >> .gitignore

ホットリロード

変更を監視し、即時反映するために ts-node-dev をインストールする。

npm i -save-dev ts-node-dev

ソースコードを src に配置し、エントリーポイントを src/app.js に指定する。

mkdir src

src/app.ts

console.log('Hello World')

package.json にローカル開発用のnpm scriptを追加する console.log のような実行後プロセスが終了するスクリプトの場合は --respawn オプションを有効にする

npm set-script dev "ts-node-dev --respawn src/app.ts"

実行後、ファイルを変更して確認する

npm run dev

prettier

prettier を利用し、コードのスタイリングを統一する

npm install --save-dev --save-exact prettier

設定ファイルは複数の拡張子をサポートしている。記述が簡潔になるためyamlを利用

echo 'singleQuote: true' > .prettierrc.yaml

カレントディレクトリ配下を整形する

npx prettier --write .

Git Hooks

husky , lint-staged によりコミット前の変更箇所のみに prettier を実行する

package description
husky commit前(pre-commit)などgitコマンドにフックして任意のコマンドを実行できる
lint-sgated gitのstagingエリアに追加したファイルのみをlinterの対象とすることができる(ファイル全体にlinterを実行しないため早い、無関係の変更を含まない)

ドキュメントに沿ってcommit時に lint-staged から変更ファイルのみに prettier の整形を適用させる

npm install --save-dev husky lint-staged
npx husky install
npm set-script prepare "husky install"
npx husky add .husky/pre-commit "npx lint-staged"

package.jsonか設定ファイルにlint-stagedの設定を追加する。 今回は変更ファイルに対して prettierを実行するように .lintstagedrc.yaml を作成。 --ignore-unknown を指定することで .husky/pre-commit などprettierの対応していないフォーマットを無視する

'**/*': 'prettier --write --ignore-unknown'

feature

  • eslint
    • pre-commit
  • test

Web系ソフトウェアエンジニアの備忘録

Contact: 3982ne@gmail.com