サンプルコード
TypeScript のサンプルコード一覧
TypeScript で「○○するには」を解決するコードサンプル。59 件。
他の言語から探す
文字列を分割するには
使い方は JavaScript と同じで、戻り値が `string[]` として型付けされるだけである。要素数は型に現れないため、`parts[3]` のような添字アクセスは存在しない要素でも型エラーにならない。件数が決まっている入力なら分割代入で受け取り、足りない場合の分岐を明示するとよい。
文字列をUTF-8のバイト列にするには
JavaScript と同じ `TextEncoder` と `TextDecoder` を使い、戻り値は `Uint8Array` と型が付く。`catch` の例外は `unknown` として扱われるため、`name` を読むには `Error` に型を絞る。ブラウザでも Node.js でも `Buffer` に頼らず同じコードで動く。
文字列をBase64にするには
TextEncoder でバイト列にしてから btoa に渡す書き方なら、Buffer が無いブラウザでも Node.js でも同じコードで動く。btoa は 1 文字が 1 バイトの文字列を要求するため、バイトを String.fromCharCode で 1 文字ずつ文字列に直してから渡す。戻す側は atob の結果をバイト列に直し、TextDecoder で UTF-8 として読む。
ファイルの文字コードを変換するには
TextDecoder の fatal を true にすると、変換できないバイトが混ざっていたときに U+FFFD で埋めず、TypeError で止まる。壊れたファイルを黙って変換してしまう事故を避けたい処理では、fatal を付けておく。
HTMLの特殊文字をエスケープするには
対応表を Record<string, string> で型付けし、引数と戻り値を string にしておく。正規表現が 5 文字だけに絞っているので、ESCAPES[ch] が undefined になることはない。実行時の振る舞いは JavaScript と同じである。
HTTP GETリクエストを送るには
res.json() の戻り値は any ではなく Promise<unknown> 相当として扱われるため、使う形を型で宣言してから受け取る。ここで as を書いているのは実行時に検証しているわけではないので、外部 API を相手にするなら zod などのスキーマ検証を挟むほうが安全である。
文字列をURLエンコードするには
パラメータを Record で受け取って URL に流し込む関数にしておくと、呼び出しごとに encodeURIComponent を書き忘れる事故を防げる。実行時の振る舞いは JavaScript と同じで、数値は String に変換してから渡す。
日付を書式付きの文字列にするには
実行時の振る舞いは JavaScript と同じで、差分は型の付け方だけである。Intl のオプションは Intl.DateTimeFormatOptions として切り出しておくと、dateStyle の絞り違いをコンパイル時に検出できる。
文字列の長さを取得するには
実行時の振る舞いは JavaScript と同じで、差分は戻り値を number と型付けして関数に切り出している点だけである。Intl.Segmenter は lib に es2022 以降を含めないと型が見つからないので、tsconfig の target か lib を確認する。
ファイルが存在するか調べるには
書き方は JavaScript と同じで、catch を挟むと戻り値の型が広がるため boolean と明示しておくと後続の分岐で扱いやすい。
UNIXタイムスタンプを日付に変換するには
number 型は秒なのかミリ秒なのかを区別できないため、型に単位の印を付けておくと取り違えを実行前に防げる。EpochSeconds を受け取る関数にミリ秒の値を渡すと TS2345 になる。ただし as で型を付ける境界の箇所だけは、人が単位を確かめる必要がある。
配列に要素が含まれるか調べるには
型の上では string[] の includes は string を受け取る。ただし as const で作った読み取り専用のリテラル配列では引数もリテラル型の union に絞られるため、string 型の値を渡すとコンパイルエラーになる。readonly string[] として扱い直すか、型ガード関数にまとめると、通過後の値の型も絞れる。
現在時刻を取得するには
new Date() は Date 型、Date.now() は number 型を返すため、型の上では取り違えを防げる。ただし number がミリ秒なのか秒なのかは型で表現できず、エポック秒をそのまま new Date() に渡すと 1970 年付近の日時になる。
ディレクトリを作成するには
recursive: true の mkdir は string | undefined を返すので、undefined かどうかで新しく作ったかを判定できる。catch の err は unknown 型で、err.code と書くと TS18046 になるため、NodeJS.ErrnoException へ絞り込んでから code を読む。
環境変数を読むには
process.env のプロパティは string | undefined 型なので、未設定を考慮せず string として使うと型エラーになる。?? で既定値を与えるか、事前に存在を確認して絞り込む。型定義には @types/node が要る。
配列をソートするには
使い方は JavaScript と同じで、比較関数の引数と戻り値に型が付くだけである。sort は元の配列を破壊的に並べ替えるため、number[] を保ちたいならスプレッドでコピーしてから呼ぶ。
数値をゼロ埋めするには
number 型には padStart が無く、n.padStart(5, "0") と書くと TS2339（Property 'padStart' does not exist on type 'number'）になるので、String で文字列にしてから呼ぶ。小数を渡すと 3.5 が 003.5 のように中途半端に埋まるため、整数だけを受け付ける関数にしておくと呼び出し側の誤りに気付ける。
数値を指定した範囲に収めるには
引数と戻り値を number に絞った clamp を用意すると、入力欄から受け取った string をそのまま渡したときに TS2345 でコンパイルが止まる。Number で変換した結果は NaN になりうるので、Number.isNaN で確かめてから渡す。
文字列を置換するには
使い方は JavaScript と同じで、replaceAll は ES2021 以降の型定義に含まれる。tsconfig の lib が古いと型エラーになるため es2021 以上を指定する。
数値を3桁区切りにするには
toLocaleString は呼び出すたびにロケールのデータを探し直すので、何度も書式化するなら Intl.NumberFormat を 1 つ作って使い回す。format は number と bigint のどちらも受け取るが、Number.MAX_SAFE_INTEGER を超える整数は number にした時点で下の桁が崩れるため、bigint のまま渡す。tsconfig の target が ES2020 より古い設定では、bigint を渡した行が TS2345 になり、12345678901234567890n のようなリテラルも書けない。
整数の割り算で商と余りを求めるには
divmod は商と余りを名前付きのタプル型で返すので、呼び出し側は分割代入でそれぞれを受け取れる。0 で割ったときに Infinity や NaN が後の計算へ流れていかないよう、RangeError を投げて呼び出し側に知らせる。number 型は小数も受け入れるため、Number.isInteger で整数かどうかを確かめてから割る。
小数を指定桁で丸めるには
roundTo は 10 の digits 乗を掛けて Math.round で丸め、同じ数で割り戻すので、戻り値を number のまま次の計算に使える。内部で 1.00499… になっている 1.005 が roundTo(1.005, 2) でも 1 になる点は JavaScript と同じである。toFixed の戻り値は string 型なので、number を受け取る引数にそのまま渡すと TS2345 でコンパイルが止まり、Number で数値に戻してから渡す必要がある。
JSONをパースするには
JSON.parse の戻り値は any なので、型注釈を付けても中身が検証されるわけではない。外部から来る JSON を扱うなら as で断言せず、zod などで実行時に検証する方が安全である。
環境変数を真偽値として読むには
process.env の値は string | undefined 型なので、そのまま boolean の変数に代入するとコンパイルエラーになる。=== "true" だけで判定すると TRUE や 1 を黙って false にしてしまうため、正規化してから比較する関数を 1 つ用意し、戻り値を boolean にそろえる。
パスからファイル名を取り出すには
node:path を使わずに文字列を区切るので、同じ関数をブラウザでも使える。/ と \ の両方を区切り文字として扱うため Windows 形式のパスも分けられるが、Linux のファイル名に含まれた \ まで区切ってしまう点には注意する。pop() の戻り値は string | undefined 型なので、?? で空文字に置き換えてから返す。URL では new URL の pathname でクエリを外し、decodeURIComponent で %XX を元の文字に戻すが、壊れた %XX があると URIError を投げる。
ファイルに書き込むには
書き方は JavaScript と同じで、引数や戻り値の型は @types/node が供給する。戻り値は Promise<void> なので await で完了を待つ。
ファイルを読み込むには
書き方は JavaScript と同じで、戻り値に型注釈を付けられる点だけが異なる。
JSONをファイルに保存するには
処理は JavaScript と同じで、保存するデータの形を型で決めておける点だけが異なる。ただし型が保証するのは形だけで、JSON にできる値かどうかは検査しない。Map<string, number> のフィールドを持つ型でもコンパイルは通り、保存すると {} になるので、JSON に載せる型は文字列・数値・真偽値・配列・プレーンなオブジェクトで組み立てる。
HTTPでファイルをダウンロードするには
処理は JavaScript と同じだが、res.body の型は ReadableStream | null なので、null を弾かないまま Readable.fromWeb に渡すと TS2345 になる。tsconfig の lib に DOM が入っていると res.body は DOM 側の ReadableStream 型になり、node:stream/web の ReadableStream とは別の型として扱われて同じく TS2345 になるため、node:stream/web の型へアサーションしてから渡している。
正規表現で大文字小文字を区別せずに一致させるには
書き方は JavaScript と同じで、i フラグはリテラルか new RegExp の第 2 引数で指定する。String.prototype.match は一致しなければ null を返す型なので、結果をそのまま添字で読まずオプショナルチェーンか null 判定で絞り込む。
配列の最大値と最小値を求めるには
値の最大だけなら JavaScript と同じく Math.max で求まるが、オブジェクトの配列で「最大の要素そのもの」が欲しいときは reduce で比べる。空配列に備えて戻り値を T | undefined にしておくと、呼び出し側で undefined を扱わない限り strict モードの型チェックが通らないので、空の場合の処理漏れを防げる。
親ディレクトリのパスを取得するには
使い方は JavaScript と同じで、dirname の戻り値は string になる。ルートの / とディレクトリ部分の無い . は dirname しても同じ値が返るので、戻り値が変わらなくなった時点でループを止めれば、上の階層へ設定ファイルを探す処理を無限ループにせずに書ける。
相対パスを絶対パスにするには
使い方は JavaScript と同じで、戻り値は string になる。基準ディレクトリを引数で受け取る形にしておくと、呼び出し側のカレントディレクトリに左右されずテストしやすい。引数が最初から絶対パスなら基準は無視され、そのパスが正規化されて返る。
ファイルの拡張子を取り出すには
使い方は JavaScript と同じで、extname の戻り値は string になる。許可する拡張子を ReadonlySet にまとめておくと、判定の条件を 1 か所で管理できる。toLowerCase で大文字小文字をそろえてから比べないと、photo.JPG のような名前を取りこぼす。
パスを連結するには
使い方は JavaScript と同じで、戻り値は string 型になる。join は / で始まる要素も単につなぐだけなので、途中の絶対パスを起点にしたい場面では resolve を選ぶ。
日付に日数を足すには
計算は JavaScript と同じだが、引数で受け取った Date を直接書き換えると呼び出し元の値まで変わる。関数の中で getTime() から新しい Date を作ってから setUTCDate を呼び、戻り値として返す形にしておくと副作用が残らない。
ファイルをコピーするには
書き方は JavaScript と同じだが、catch が受け取る err は unknown 型なので、code を読む前に NodeJS.ErrnoException へ絞り込む必要がある。ここを any で通すと、せっかく型がある環境でプロパティ名の綴り間違いが素通りしてしまう。
文字列を数値に変換するには
変換そのものは JavaScript と同じで、Number の戻り値が number として型付けされるだけである。型の上では NaN も number なので、コンパイラは変換の失敗を教えてくれない。失敗を呼び出し側に伝えたいなら、戻り値を number | null にするなど型で表現する必要がある。
2つのJSONをマージするには
JSON.parse の戻り値は any なので、扱う形を Json 型として決めてから受け取る。値が unknown のままでは再帰に渡せないため、型ガードで Json に絞り込んでから deepMerge を呼ぶ。
環境変数の一覧を取得するには
NodeJS.ProcessEnv の値は string | undefined なので、Record<string, string> として扱いたいときは型ガードで undefined を落としてから詰め直す。undefined のまま連結すると文字列の "undefined" が混ざる。
正規表現に一致する部分をすべて取り出すには
matchAll の戻り値はイテレータなので、配列として扱うにはスプレッド構文で展開する。取り出した値の型は string のままで、数値として計算するなら Number などで明示的に変換する。
HTTPリクエストにタイムアウトを設定するには
呼び出し側が渡してきた signal をタイムアウトで潰さないよう、AbortSignal.any で 2 つをまとめる。こうしておくと、利用者によるキャンセルとタイムアウトのどちらでも中断でき、catch では name を見て理由を切り分けられる。
正規表現で部分文字列を取り出すには
match の戻り値は RegExpMatchArray | null、groups は string | undefined を要素に持つ型なので、オプショナルチェーンと既定値を組み合わせると分岐を 1 行に収められる。型の上ではグループが存在する保証は無いため、名前を書き間違えてもコンパイルは通る点に注意する。
文字列が正規表現に一致するか調べるには
test の戻り値は boolean なので、そのまま条件式に使える。一方で match の戻り値は RegExpMatchArray | null であり、null を外さないと要素へアクセスできない。判定だけなら test、値も要るなら match と使い分けると型の扱いが素直になる。
正規表現で置換するには
使い方は JavaScript と同じで、戻り値が string として型付けされるだけである。置換関数の引数も string なので、明示的に型を書いておくと、後から引数を増やしたときに取り違えにくい。元の文字列は変更されず、常に新しい文字列が返る。
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 混入を防げる。
配列を条件で絞り込むには
値を絞り込んでも、コールバックが 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 などのスキーマ検証を挟むほうが安全である。
オブジェクトをJSON文字列にするには
型は「どんな JSON になるか」を保証しない。JSON.stringify の宣言上の戻り値は string だが、undefined を渡した場合の実際の戻り値は undefined なので、任意の値を受け取る関数では戻り値を string と決めつけない方がよい。