RTQ_React02

https://www.notion.so/RTQ-React-on-Rails-5ccdf0b5e3724859aed89145f28e8e01

---

変数の型注釈

基本的には変数定義時に型注釈をつけます。

他にも様々な型があるのでドキュメント等確認してください。

const num = 123; // JavaScript
const num: number = 123; // TypeScript

型推論

型注釈が書かれていないものはTypeScriptが自動的に値を見て型推論します。

let num = 123;
num = 'react'; // Error: Type 'string' is not assignable to type 'number'.

関数の型宣言

関数の定義時にも型を宣言することができます。

const numToStr = (num: number): string => String(num); // 引数numはnumber型、返り値はstring型

はい、ここでさっそく疑問点ができました。[こちら](https://www.notion.so/RTQ-React-on-Rails-5ccdf0b5e3724859aed89145f28e8e01?pvs=21) DEARH !!!

型エイリアス

型自体に名前をつけることができます。

type StrOrNum = string | number; // StrOrNumで型注釈すると、stringかnumber型になる
let hoge: StrOrNum = 'react' // OK
let huga: StrOrNum = 123 // OK

便利 ❗  interface 型 と組み合わせて使えるのかなァ…。

---

• ❓【 引数 】なぜ (num: number): string という書き方をするのか

  ❓ (num: number): string

  ---

  [ わからなかったことを言語化 ]

  const numToStr = (num: number): string => String(num);

  このコードにおいて、なぜ 引数の段階で string 型を書くのかがわからなかった。

  どうやら、これは関数の返り値の型を示している模様。

  へーなるほどね…。理解。

  ｢ でも納得はしてねぇぞ !!! ｣

  ｢ 引数の段階では、まだ number 型 じゃあないかッ!! ｣

  と思っていた。

  まとめると、このように認識していた

  • 引数 : 関数に入力する値
  • 返り値 : 関数から出力される値

  (num: number): string この書き方だと、入力と出力をごっちゃにしちゃってるじゃん !!! わかりづら !!!

  ---

  こんな感じに書くのじゃ駄目なのか ??? ( 文法は間違えているが )

  const numToStr = (num: number) => String(num): string;

  と書いてみて気付いた💡

  ---

  最後まで関数を読まないと、型の変化がわからない。

  そうか、これは….

  const numToStr = (num: number): string => String(num);

  ｢ 関数の冒頭だけを見たときに、

  型の変換を一目でわかるようにしているのかッ !!! ｣

  ….ええ、納得して納豆食うのでした。

  ---

  ☝ 引数が多くなりすぎたときの対応

  ---

  • Toggle

    ( 引数が2コの場合 )

    const transform = (num: string, str: number): {numberResult: number, stringResult: string} => {
        const numberResult = parseFloat(num);
        const stringResult = str.toString();
        return { numberResult, stringResult };
    };

    ---

    1. インターフェース型、エイリアス

       定義して再利用

       ■ [ 返り値 ]

       interface TransformResults {
           numberResult: number;
           stringResult: string;
           // 他のプロパティを追加可能
       }
       
       const transform = (num: string, str: number): TransformResults => {
           const numberResult = parseFloat(num);
           const stringResult = str.toString();
           return { numberResult, stringResult };
       };

       ( オブジェクトの型アノテーション )

       ( プロパティ名なので任意の名前 )

    2. 名前付きパラメータのパターン

       ■ [ 引数 ]

       interface TransformParams {
           num: string;
           str: number;
           // 他のパラメータを追加可能
       }
       
       const transform = ({ num, str }: TransformParams): TransformResults => {
           const numberResult = parseFloat(num);
           const stringResult = str.toString();
           return { numberResult, stringResult };
       };
       
       // 関数の呼び出し
       transform({ num: "123.45", str: 678 });

       ( 返り値の型のインターフェース定義は省略している )

    3. オプショナルパラメータとデフォルトパラメータ

       interface TransformParams {
           num: string;
           str: number;
           extra?: string;  // オプショナルパラメータ
       }
       
       const transform = ({ num, str, extra = "default" }: TransformParams): TransformResults => {
           console.log(extra);  // デフォルト値を利用
           const numberResult = parseFloat(num);
           const stringResult = str.toString();
           return { numberResult, stringResult };
       };

       オプショナル ⇒ なくてもエラーが起きない引数

  ---

---