javascriptのオブジェクトの型を判定したい

Question

あるオブジェクトのキーの値が数値なのか文字列なのか判定したいのですが、書き方が分かりません。

interface Obj {
  str: string,
  num: number,
  strNum: string
}

const test: Obj = {str: "string", num: 1, strNum: "2"}

このとき、オブジェクトのキーstrNumの型を調べる(アクセスする)方法はありますでしょうか？

やりたいこと

フォームの入力値がstringで返されてしまうので、オブジェクトのプロパティの型がnumberの場合はvalueAsNumber(数値に変換)を使ってオブジェクトに格納したい。

const handleClick(key: keyof Obf) {
  // setStateはObjの状態を変更する関数(以下だと全てstringで格納されてしまう)
  setState(test => {...test, [key]: e.target.value})
} 


// フォーム
<input
  value = test.str
  onclick = (e) => handleClick("str") 
/>
<input
  value = test.num
  onclick = (e) => handleClick("num") 
/>
<input
  value = test.strNum
  onclick = (e) => handleClick("strNum") 
/>

Comments

[maisumakun]

「strNum: string」と定義している以上文字列しか入らないと思うのですが、何を判定したいのでしょうか？

[yochun02]

補足として追記しました。
フォームのイベントハンドラの処理の中でプロパティの型を調べる必要がありました。

[think49]

言語が「TypeScript」になっているので、markdownのコード言語を「TypeScript」に修正し、タグに「TypeScript」を追加してください。

Answer 1

TypeScriptの型は実行時には消えてしまうので、「numプロパティにはnumber型を入れる」という情報をコード上から直接取得する方法はありません。

「valueAsNumberで取得したい値のキー」をテーブルに入れておくような方法しかありません。

Answer 2

typeof演算子を使うのはどうでしょうか。

typeof 'str';     // 'string'
typeof 1;         // 'number'
typeof true;      // 'boolean'
typeof undefined; // 'undefined'

Comments

[think49]

低評価理由が不明ですね。

---
TypeScriptでトランスコンパイル後のJavaScriptをブラウザで実行する仕組みの為、関数呼び出し時にTypeScriptの機能呼び出しが出来ません。
関数実行時にECMAScriptの機能で代替するアプローチは正しいと私は考えます。

公式docを読む限りですと、Number型、String型はECMAScriptのそれと変わりありませんので、typeof演算子で代用可能でしょう。
https://www.typescriptlang.org/docs/handbook/basic-types.html

> str: string,
> strNum: string

いずれもString型を定義しているので、TypeScriptは両者を区別できません。
strとstrNumの要求仕様を定義した上でご自身のコードで判定する必要があります。

// 要件例: ToNumberして非NaN値となる値をstrNumとする
const strNum = '123';
console.log(typeof strNum === 'string' && !isNaN(strNum)); // true