TypeScriptで数値をチェックする方法をわかりやすく解説

TypeScriptの魅力的な特徴の1つは静的型チェックができることです。
この記事では、その特徴を活かして数値チェックする方法をわかりやすく解説します！

数値のチェック方法

基本のキホン

数値かどうかを判断する最も基本的な方法は typeof を使用することです。
typeof を使うと 変数や値の型を文字列として取得 できます。

function isNumber(value: any): value is number {
  return typeof value === "number";
}

この関数で渡された値が数値であるかどうかを簡単にチェックできます。

しかし、注意点として typeof は null や NaN に対しても正しく動作しない場合があるので、その点も考慮に入れる必要があります。

TypeScriptの型安全を高める魔法 keyof と typeof の使い方

TypeScriptのkeyofとtypeofを使いこなす方法を具体的なコード例で解説します。

gizanbeak.com

NaNの考慮

NaN は"Not a Number"の略で数値として認識できない値のことです。

先程の数値チェック関数 isNumber を拡張して、NaN も考慮すると以下のようになります。

function isRealNumber(value: any): value is number {
  return typeof value === "number" && !isNaN(value);
}

この関数では数値であるとともに NaN でないことを確認しています！

ちなみに、NaN の面白い性質として NaN 自体が唯一自分自身と等しくない値として認識されます。
なので isNaN() 関数を使用して NaN をチェックしています。

isNaN() - JavaScript | MDN

isNaN() 関数は引数が NaN (非数) かどうかを判定します。isNaN 関数の型強制は意外なものになる可能性があるため、他の Number.isNaN() を使用した方が良いかもしれません。

mozilla.org

小数点のチェック方法

余りを使ってのチェック

次は、値が小数点を持つかどうかを判断したい場合に使用できるテクニックです。
小数点を持つかどうかをチェックする基本的な方法は余りを利用することです。

整数であれば1で割った余りは0になりますが、小数であれば0にならないからですね。

function hasDecimal(value: number): boolean {
  return value % 1 !== 0;
}

この関数では1で割ったときの余りを見て、0でない場合に小数点があると判断します。
シンプルで実用的ですね！

正規表現を利用した方法

もう一つの方法として正規表現を使って小数点をチェックする方法もあります。

function hasDecimalRegex(value: number): boolean {
  return /\./.test(value.toString());
}

ここで、数値を文字列に変換して正規表現を使用して小数点の存在をチェックしています。
正規表現は強力なツールなので、うまく使いこなせると便利です！

数字の範囲チェック方法

範囲の基本

数値が特定の範囲内に収まっているかどうかを判定したい場合もありますよね。

そのような、数字が特定の範囲内に収まっているかどうかのチェックはとても簡単にできます！

function isWithinRange(value: number, min: number, max: number): boolean {
  return value >= min && value <= max;
}

この関数 isWithinRange は最小値 min と最大値 max を引数として渡すことで値が範囲内であるかどうかが判定できます。
とても役立つので覚えておくと便利です！

範囲の拡張

さらに、関数をカスタマイズして範囲の最小値や最大値を含むかどうかをオプションとして追加することもできます。

function isWithinRangeAdvanced(value: number, min: number, max: number, includeMin = true, includeMax = true): boolean {
  let isAboveMin = includeMin ? value >= min : value > min;
  let isBelowMax = includeMax ? value <= max : value < max;
  return isAboveMin && isBelowMax;
}

この関数 isWithinRangeAdvanced は数値 value が指定された範囲 min と max の間にあるかどうかをチェックします。

関数の特徴として includeMin と includeMax という2つのオプションを持っています。
デフォルトではこれらのオプションは true に設定されているので、範囲の最小値 min と最大値 max も含みます。

isAboveMin は value が min より大きい、または等しいかどうかを確認します。
同様に isBelowMax は value が max より小さい、または等しいかどうかを確認します。

これによって、例えば includeMin を false に設定すると、value が min より厳密に大きいかどうかを確認することができます。

TypeScriptの数値変換　文字列⇔数字を相互変換する方法を解説

TypeScriptでの文字列⇔数字相互変換のポイントわかりやすく解説！それぞれの特徴や違いなども含めて紹介します。

gizanbeak.com

まとめ

TypeScriptの数値チェック方法はいくつかのアプローチがあり、それぞれのニーズに合わせて適切なものを選ぶことができます。

どれもよく使用するため覚えておくと便利です。

Gizanbeak