「数字が文字列としてデータに保存されている場合の取得方法を知りたい」
「TypeScriptでnumberとstringの型変換の一番簡単な方法を知りたい」
「typescriptでasを使った型変換の方法を見たことがある」
そんな方に向けて記事になっているはずです。
TypeScriptでnumber（数字）と文字列（string）を判定し、必要に応じて変換する方法についてご紹介します。
数字が文字列になっている状態でDBやAPIからデータを取得することがあります。
このようなケースは実際のアプリケーション開発において登場頻度が高く、データ型の変換がスムーズに行えるかが問われます。
本記事ではTypeScriptを活用した場合の、数値と文字列を簡単に変換する方法を解説していきます。
さらにググったときに登場する誤解しやすいコード例にも触れていきますので初心者の方にはぜひ知ってもらいたい知識です。
また動画もあるので必要に応じて活用してください。
TypeScriptで文字列の数字を数値として扱う方法
TypeScriptを触ってみるとデータには「型」があることを知ったと思います。
初心者が型のなかで混同しやすいのが「数値型」と「文字列型の数字」です。
// 数値型の100
const val1 = 100;
// 文字列型の100
const val2 = "100";コードで書いていると「””」の有無でなんとなく見分けられるのですが、ブラウザで表示させてみると一見するとどちらかわかりません。
自分が作った変数であれば大丈夫ですが、APIなど他人が作ったデータやユーザーが入力したDBを取得して表示させる場合に困ることがあります。
代表的な困る例としては「文字列型の数字は計算できない」などです。
そんな時に文字列型→数値型に変換する方法が必要で、やり方はググれば色々とでてきます。
ググった情報をもとに以下のような方法で解決される初心者の方がいます。
const val = "100";
const result: number = val as unknown as number;
console.log(val);unknown型を経由することで文字列型の数字を数値型に変換する方法です。
ただしこちらのコードでは解決できていません。
型チェックをすれば簡単にわかります。
const val = "100";
const result: number = val as unknown as number;
console.log(val);
console.log(typeof val);
見た目上は100ですが型チェックをすると文字列型のままです。
実は上記のコード自体はエラー回避を目的にした型変換であって、文字列型を数値型にするためのコードではないからです。
ある程度やっている方からすると当然のことなのですが、初心者のうちはコピペでなんとか解決することが多いので上記のコードを誤解して使ってしまうことがあるようです。
そのため上記のコードとは違う方法で文字列型から数値型に変換するコードを書く必要があるのですが、例えば以下のようなものが使えます。
const val = "100";
function checkVal(arg: number | string): number {
if (typeof val === "string") {
const result: number = Number(val);
return result;
} else {
const result: number = val;
return result;
}
}
const test = checkVal(val);
console.log(test);
console.log(typeof test);
これでようやく数値型にすることができましたね。
一番シンプルな方法で条件分岐を使った型チェックを行う関数を作成しました。
関数checkValの引数にデータを渡すことで文字列型から数値型に変換しています。
引数の型指定で「arg: number | string」としているのは「文字列型か数値型を受け取る」という意味です。
文字列型の”100″と数値型の100のどちらが渡されるか不明な場合に、文字列型で渡された時にのみ型変換を行い、数値型で渡された時は何もしないようになっています。
事前に文字列型しか引数として渡さないことが決まっている場合には不要な処理なのでもっと短く書くことができます。
一方でユーザーが入力するDBから取得する場合に入力画面でチェック機能がない場合は、文字列型と数値型の両方が送信されることがあ離ますので、そういった場合には上記のものをそのまま使った方が良いです。
ちなみにまだTypeScriptを学習したばかりで「型の変換って何？」となった方は以下の記事もどうぞ。