タイプスクリプトでタイプ変換を正しく実行する方法は？

タイプスクリプトタイプ変換の詳細な議論

この記事では、タイプスクリプトタイプの変換、特にasキーワードの使用と制限を詳細に分析し、ベストプラクティスを提供します。

シナリオ分析：VUEコンポーネントとタイプアサーション

Vueコンポーネントのprops group属性をnumberタイプとして定義すると仮定します。 getDictGroup関数は、 sidパラメーターもタイプnumberであることを期待しています。ただし、ランタイムsidタイプのstringである可能性があり、その結果、タイプエラーが発生します。次のコードスニペットは、この問題を示しています。

 const props = defineProps （）;

getDictGroup（Props.Group）;

Export const getDictGroup = async（sid：number）=> {
  const dict = await getDict（）;
  console.info（typeof sid）; //「文字列」を出力することができます
  sid = sid as number; // assertを入力しますが、ランタイムタイプのconsole.info（typeof sid）を変更しません。 //まだ出力「文字列」
  console.info（typeof（sid as number））; //まだ出力「文字列」
};

タイプアサーションのas number使用することは、変数をnumberタイプとして扱い、ランタイムタイプの変換を実行しないことをTypeScriptコンパイラに伝えることだけです。 parseInt(sid)問題を解決することはできません。TypeScriptはエラーを報告し、 numberをstringに割り当てることは許可されていないためです。

タイプ変換の性質

asキーワードはタイプアサーションであり、変数のランタイムタイプを変更しないコンパイル時間メカニズムです。実際のタイプ変換を実行するには、JavaScriptのタイプ変換機能を使用する必要があります。

たとえば、数字を文字列に変換します。

 n：number = 12345とします。
n = string（n）;
console.log（n）; // "12345"
console.log（typeof n）; // "弦"

文字列を番号に変換します：

 let strnum：string = "42";
let number：number = number（strnum）;
console.log（num）; // 42
console.log（typeof num）; // "番号"

typeScriptの正しいタイプ変換方法

TypeScriptでは、Safe Type ConversionにはJavaScriptのタイプ変換関数と必要なタイプチェックを組み合わせる必要があります。

1. 文字列への文字列： Number()関数を使用し、オプションのチェーンとヌル値のマージ演算子を組み合わせて、潜在的なエラーを処理します。

    let strnum：string |未定義= "42";
   let number：number = number（strnum）?? 0; // null値マージ演算子を使用して未定義を処理する

2. 文字列へ： String() functionを使用します：

   番号：番号= 42;
   let str：string = string（num）;

3. より厳格なタイプのチェック：変換の前に、潜在的なランタイムエラーを回避するためにタイプチェックを行います。

   関数converttostring（value：number | string）：string {
     if（typeof value === 'number'）{
       return string（value）;
     } else if（typeof value === 'string'）{
       返品値。
     } それ以外 {
       新しいエラーをスロー（ '無効な入力タイプ'）;
     }
   }

最初の問題を解決するためのソリューション

最初の問題については、正しい解決策は、タイプ変換にNumber()関数を使用し、潜在的なエラーを処理することです。

 const props = defineProps （）; // stringを許可するようにプロップタイプを変更します

getDictGroup（Props.Group）;

Export const getDictGroup = async（sid：number | string）=> {
  const dict = await getDict（）;
  convertedsid：number = number（sid）;
  if（isnan（convertedsid））{
    console.error（ "invalid input：sidは数字ではありません"）;
    戻る; //またはエラーを適切に処理します
  }
  console.info（typeof convertedsid）; // "番号"
  //後続の操作にconvertedSidを使用};

このようにして、正しいランタイムタイプの変換を実行するだけでなく、TypeScriptコンパイラのタイプの安全性を確保します。同時に、非数値入力のエラー処理も追加しました。 propsタイプを変更することで、実際の状況に沿ったstring入力が可能になります。

以上がタイプスクリプトでタイプ変換を正しく実行する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。