TypeScript のサンプルコード一覧

カードの実行確認済みは、この言語のコードを実際に実行して出力を確認したことを表す。静的確認は、実行環境を用意できず、構文と公式 API ドキュメントで確認したものである。

• 2つの日付の差を求めるには

  JavaScript と計算内容は同じだが、Date 同士の引き算は TS2362 / TS2363 で弾かれる。算術演算の両辺は number 型でなければならないため、getTime() で明示的にミリ秒へ変換してから引く。valueOf() や単項プラスでも通るが、意図が読み取りやすい getTime() を選ぶ。

  実行確認済み

• 文字列が含まれるか調べるには

  実行時の挙動は JavaScript と同じで、戻り値が boolean として型付けされるだけである。as const で固定した配列に対して includes を呼ぶと引数の型がリテラルの合併に狭まり、string を渡した時点で TS2345 になるため、判定に使う配列は readonly string[] に広げてから呼ぶ。

  実行確認済み

• 配列から重複を除くには

  書き方は JavaScript と同じで、[...new Set(nums)] の結果に number[] の型が付くだけである。Map を使う重複排除ではキーと値の型が推論されるので、キーに使うプロパティを取り違えたときにコンパイル時点で気付ける。

  実行確認済み

• 配列を文字列に連結するには

  join の戻り値は要素の型にかかわらず string になるため、number[] を連結しても型注釈は string でよい。区切り文字を変数にする場合は string 型に固定しておくと意図しない undefined 混入を防げる。

  実行確認済み

• 文字列を分割するには

  使い方は JavaScript と同じで、戻り値が string[] として型付けされるだけである。要素数は型に現れないため、parts[3] のような添字アクセスは存在しない要素でも型エラーにならない。件数が決まっている入力なら分割代入で受け取り、足りない場合の分岐を明示するとよい。

  実行確認済み

• 配列を条件で絞り込むには

  値を絞り込んでも、コールバックが boolean を返すだけでは要素の型は変わらず null を含んだままになる。v is string のような型述語を書くと、絞り込んだ結果の型まで狭められる。

  実行確認済み

• ディレクトリ内のファイル一覧を取得するには

  withFileTypes の有無で readdir の戻り値の型が string[] と Dirent[] に分かれる。型注釈を書いておくと、オプションを外したときに filter の中でコンパイルエラーになり、実行前に取り違えに気づける。

  実行確認済み

• ネストしたJSONから値を取り出すには

  各階層を省略可能（?）にした型を当てると、?. を省いた書き方をコンパイラが弾いてくれる。ただし JSON.parse の戻り値は any なので、as で付けた型は実際の中身を検証しない。外部由来の JSON なら zod などで実行時に検証する方が安全である。

  実行確認済み

• HTTPリクエストにヘッダーを付けるには

  Headers オブジェクトを組み立てておくと、set で後から足したり条件によって付け外ししたりできる。オブジェクトリテラルを直接渡す書き方でも動くが、値が undefined になりうるヘッダーを扱うときは Headers 経由のほうが型と実体のずれが出にくい。

  実行確認済み

• 環境変数を設定するには

  代入の挙動は JavaScript と同じで、変わるのは型の扱いだけである。@types/node は process.env の値を string | undefined と定義しているため、数値を渡すとコンパイルエラーになり、読み出し側では ?? などで既定値を与える必要がある。

  実行確認済み

• .env ファイルを読み込むには

  読み込み自体は JavaScript と同じで、型の扱いだけが変わる。process.env のプロパティは string | undefined 型なので、?? で既定値を与えるか存在を確認して絞り込む。process や loadEnvFile の型定義には @types/node が要る。

  実行確認済み

• 日付文字列を日付型にするには

  使い方は JavaScript と同じで、new Date は失敗しても戻り値が Date 型のままである。つまり型検査ではパース失敗を防げないので、境界で NaN を確かめて弾く関数を 1 つ用意し、そこを通った値だけを後段へ渡す。厳密な書式検証や独自書式が必要なら date-fns や Temporal の polyfill を使う。

  実行確認済み

• 文字列の前後の空白を除去するには

  使い方は JavaScript と同じで、戻り値が string として型付けされるだけである。型の上では「trim 済みかどうか」は区別されないため、検証を通した値だけを別の型として扱いたい場合はブランド型を自分で定義する必要がある。CSV や環境変数のように前後の空白が紛れ込みやすい入力は、受け取った直後に trim する。

  実行確認済み

• HTTP POSTでJSONを送るには

  送る形と返る形を別々の型で宣言しておくと、リクエスト本文の作り間違いをコンパイル時に潰せる。res.json() の戻り値は unknown 相当なので as で受けているが、実行時の検証にはならない。外部 API が相手なら zod などのスキーマ検証を挟むほうが安全である。

  実行確認済み

• ファイルが存在するか調べるには

  書き方は JavaScript と同じで、catch を挟むと戻り値の型が広がるため boolean と明示しておくと後続の分岐で扱いやすい。

  実行確認済み

• オブジェクトをJSON文字列にするには

  型は「どんな JSON になるか」を保証しない。JSON.stringify の宣言上の戻り値は string だが、undefined を渡した場合の実際の戻り値は undefined なので、任意の値を受け取る関数では戻り値を string と決めつけない方がよい。

  実行確認済み

• 日付を書式付きの文字列にするには

  実行時の振る舞いは JavaScript と同じで、差分は型の付け方だけである。Intl のオプションは Intl.DateTimeFormatOptions として切り出しておくと、dateStyle の絞り違いをコンパイル時に検出できる。

  実行確認済み

• 環境変数を読むには

  process.env のプロパティは string | undefined 型なので、未設定を考慮せず string として使うと型エラーになる。?? で既定値を与えるか、事前に存在を確認して絞り込む。型定義には @types/node が要る。

  実行確認済み

• ファイルを読み込むには

  書き方は JavaScript と同じで、戻り値に型注釈を付けられる点だけが異なる。

  実行確認済み

• ファイルに書き込むには

  書き方は JavaScript と同じで、引数や戻り値の型は @types/node が供給する。戻り値は Promise<void> なので await で完了を待つ。

  実行確認済み

• HTTP GETリクエストを送るには

  res.json() の戻り値は any ではなく Promise<unknown> 相当として扱われるため、使う形を型で宣言してから受け取る。ここで as を書いているのは実行時に検証しているわけではないので、外部 API を相手にするなら zod などのスキーマ検証を挟むほうが安全である。

  実行確認済み

• 配列をソートするには

  使い方は JavaScript と同じで、比較関数の引数と戻り値に型が付くだけである。sort は元の配列を破壊的に並べ替えるため、number[] を保ちたいならスプレッドでコピーしてから呼ぶ。

  実行確認済み

• 現在時刻を取得するには

  new Date() は Date 型、Date.now() は number 型を返すため、型の上では取り違えを防げる。ただし number がミリ秒なのか秒なのかは型で表現できず、エポック秒をそのまま new Date() に渡すと 1970 年付近の日時になる。

  静的確認

• JSONをパースするには

  JSON.parse の戻り値は any なので、型注釈を付けても中身が検証されるわけではない。外部から来る JSON を扱うなら as で断言せず、zod などで実行時に検証する方が安全である。

  実行確認済み

• 文字列を置換するには

  使い方は JavaScript と同じで、replaceAll は ES2021 以降の型定義に含まれる。tsconfig の lib が古いと型エラーになるため es2021 以上を指定する。

  実行確認済み