学習：図解！TypeScriptのツボとコツがゼッタイにわかる本 "超"入門編 (6)

学習：図解！TypeScriptのツボとコツがゼッタイにわかる本 "超"入門編 (7)

06. 関数を学ぼう

01. 関数定義

例)

function mixer(fruits) {
  return fruits + "ジュース";
}
const juice: string = mixer("リンゴ");
console.log(juice);
    

02. 関数の型注釈

引数と戻り値にデータ型を指定

function mixer(fruits: string): string {
  ...
}
    

戻り値を返さないことを明確にする場合は void型

      function hello(): void {
        ...
      }
    

任意のデータ型を指定する場合は any型 (基本的には使わない)

      function mixer(fruits: any): any {
        ...
      }
    

03. 引数の省略

引数の型注釈の右側に「=デフォルト値」を記述すると引数省略可能(デフォルト引数)となる

      function mixer(fruits: string = "りんご"): string {
        ・・・
      }
    

デフォルト引数は、省略できない引数よりも右側に置かなければならない
が、無理やりできないこともない

      function mixer(a: string = "りんご", b: string): string {
        ・・・
      }
      mixer(undefined, "ばなな");
  

04. 引数の分割代入

仮引数を[]で囲むと、実引数で渡した配列の要素が前から順番に代入される

      function mixer([a, b]: string[]): string {
        ・・・
      }
      mixer(["りんご", "ばなな" ,"みかん"]); // "みかん"は無視される
    

不要な要素の数だけカンマを記述すると、その部分に対応する実引数は破棄される

      function mixer([a, , b]: string[]): string {
        ・・・
      }
      mixer(["りんご", "ばなな" ,"みかん"]); // "ばなな"は無視される
    

分割代入にもデフォルト引数を指定可能

      function mixer([a, b, c = "ばなな"]: string[]): string {
        ・・・
      }
      mixer(["りんご", "みかｎ"]); // cには"ばなな"がはいる
    

引数全体を省略可能とするには、型注釈の右側に配列形式でデフォルト型を指定

      function mixer([a, b, c = "ばなな"]: string[] = ["あ", "い", "う"]): string {
    

05. 可変長引数

個数が決まっていない引数のこと

      function mixer(a: string, ...b: string[]) {
        let mix: string = a;
        for (const x of b) {
          mix += x;
        }
        return mix;
      }
      console.log(mixer("a","b","c","d")); // "abcd"
      console.log(mixer("a")); // "a"
    

※残余引数に値を指定しないと undefinedではなく空の配列となる

06. 関数式

関数を実行する方法は２つ
1. 関数の定義を宣言してから呼び出す方法

        function hello() {
          ...
        }
        hello();
      

2. 関数の定義を変数に代入してから呼び出す方法

        const hello = funtion() { // ← 関数式
          ...
        }
        hello(); // ← 関数オブジェクト
  

07. アロー関数

関数式をシンプルな書式で記述
ES6で拡張されたJavaScript構文

      // 従来の関数定義
      function hello(message) {
        console.log(message);
      }
      
      // 従来の関数式
      const hello = function(message) {
        console.log(message);
      }

      // アロー関数
      const hello = message => console.log(message)
    

1. キーワードfuntionの省略

        const hello = (message) {
          console.log(message);
        }
      

2. アロー演算子の追加

        const hello = (message) >= {
          console.log(message);
        }
      

3. ()の省略

        const hello = message >= {
          console.log(message);
        }
      

4. {}の省略

関数の処理が１行だけで済む場合は {} を省略可

        const hello = message >= console.log(message);
      

読みずらい場合は => の後ろで改行できる。(=>の前の改行は不可)

5. returnの省略

{}を省略した場合は式の値をreturnしたことになる

        // 従来の関数式
        const message = function() {
          return "hello";
        }
        
        // アロー関数
        const message = () => "hello"; // = return "hello";

        // {}を省略した場合はreturnが必須
        const hello = () => {return "hello";} //

        const hello = () => {"hello";} // エラーにはならなかった undefinedが返る
      

アロー関数の型注釈

      const mixer = (fruits: string): string => {
        ...
      }
    

引数の()を省略した場合は、引数も戻り値を型注釈が使えない

08. スコープ

・ローカルスコープ

・ブロックスコープ

・if文やfor文などの制御が及ぶ範囲

・関数スコープ

・関数の処理内容を記述する場所

・ローカル変数

・ローカルスコープで宣言した変数

・グローバルスコープ

・ローカルスコープに含まれない場所で宣言した変数

・一度宣言した変数を同じスコープ内で再度宣言することはできない

09. 型ガード

・変数の型を調べるには "typeof" を使う

・typeof x === "string"
・typeof x === "number" など

・型ガード関数

・戻り値の型注釈を「仮引数 is データ型」とする

function isString(x: string | number): x is string {
  return typeof x === "string";
}
function isNumber(x: string | number): x is number {
  return typeof x === "number";
}

---

学習, JavaScript, TypeScript