プロを目指す人のためのTypeScript入門読書メモ④ 第4章（1）

■ 思ったこと

親知らずを抜いた後がこんなにキツイとは、思わなかったねえ・・！！

■ 第4章 TypeScriptの関数（4.1～4.1.6）

関数は、プログラムを部分的にまとめることだね。再利用とかできて便利なアレ

関数を作ろう（関数宣言編）

作り方はいろいろあるけど、まずは関数宣言での作り方から、文の一種！！
構文はfunction 関数名(引数リスト): 返り値の型{ 実行されえるプログラム }
- 返り値の型は型注釈の一種であることが、わかるだろう？
- returnで返してあげればOK

function range(min: number, max: number): number[] {
    // ここに処理書く
}

関数宣言より前に関数を使うことを、巻き上げというらしい。へえ・・それってつまり、関数宣言で作られた関数はプログラム実行時に存在してるってこと！

返り値いらないよーって人はvoidを使おう

返り値の型をvoidにすればOKの助
返すものがないからreturnは不要だけど、不要な処理をすっ飛ばす早期リターンを使うのはアリ。

早期リターン

条件に当てはまらない場合、さっさと処理を終わらせるテク
ifelseでもいいけど、こっちのがネストせずスッキリかけるので、積極的に使うべし

numberCheak(11);

function numberCheak(num: number): void {

  if (num > 10) {
    console.log(`10以下を入力してください、入力された数字は${num}です。`);
    // 早期リターン
    return;
  }
  {
    //10以下の場合
    //正しい処理をこっちに書く
  }
}

関数を作ろう（関数式編）

こっちは名前の通り、式になります
構文はfunction (引数リスト): 返り値の型{ 実行されえるプログラム }
- 宣言と比べると、関数名がなくなっている
- 式だから、評価結果自体が関数とな
- ・・つまり！関数式は変数に入れてあげてナンボということ！！

const numberCheak = function (num: number): void {
    // ここに処理書く
};
numberCheak(11);

お気づきでしょうか、関数式は式なので、変数宣言とセットです。それゆえ、変数宣言前に関数が使えないよ！
・・それ以外に関数式との違いは特にない

関数を作るんだ（アロー関数式編）

式というからには、関数式の仲間
構文は(引数リスト): 返り値の型 => { 実行されるプログラム }、チャームポイントは=>

const numberCheak = (num: number): void => {
    // ここに処理書く
};
numberCheak(11);

正直、functionを書かなくなっただけ

アロー関数式は省略OK

従来のアロー関数式

type NumberObj = {
    num1: number;
    num2: number;
};

const inputNum: NumberObj ={
    num1: 100,
    num2: 200
}; 

const numberAdd = ({num1,num2}:NumberObj): number => {
  return num1 + num2;
};

console.log(`結果は${numberAdd(inputNum)}です。`);

省略すると

type NumberObj = {
  num1: number;
  num2: number;
};

const inputNum: NumberObj = {
  num1: 100,
  num2: 200,
};

const numberAdd = ({ num1, num2 }: NumberObj): number => num1 + num2;

console.log(`結果は${numberAdd(inputNum)}です。`);

違いはというと・・returnとそれに付随する{}が消え去ってるよ！return書くまでもなく実行結果を変数に入れたいなら使うべし
返り値がオブジェクトリテラルの場合は({})で囲まなきゃいけないので注意よ、文法的にね

関数を作れ！（メソッド記法編）

こちらはプロパティを定義する記法の一種、オブジェクトリテラルの中で使える
- オブジェクトリテラルはプロパティ名: 式で出来ている
  const obj = {
  hoge: 'hoge' // ここがオブジェクトリテラル！ }
構文はプロパティ名(引数リスト): 返り値の型 { 実行されるプログラム }、プロパティ名はメソッド名の理解でおけ、というかややこしいし、メソッドと呼ぼう。

type NumberObj = {
  num1: number;
  num2: number;
};

const inputNum: NumberObj = {
  num1: 100,
  num2: 200,
};

const calculation = {
  //普通に書く
  numberMinus({ num1, num2 }: NumberObj): number { return num1 - num2;},
  //アロー関数式
  numberAdd: ({ num1, num2 }: NumberObj): number => num1 + num2,
};

console.log(`引き算結果は${calculation.numberMinus(inputNum)}です。`);
console.log(`足し算結果は${calculation.numberAdd(inputNum)}です。`);

■ 感想

メソッド記法ってなんか便利そう。

ウエストランドANN→面白かった！素晴らしい啓蒙活動、井口のいうことは正しい・・皆目見当違いの崩れ方も良かったし、リスナーとの絡みも笑えた！
天ピANN→犬洗う頻度の話笑った、雑談感が楽しく聞けたので、違うコーナーでまた聞いてみたい！
ビスブラANN0→やっぱ面白い人は漏らしてるんだの定説が濃くなった！とにかく濃密な時間！中でもマシュマロちゃんが強烈すぎる

ペロハム大学

ﾔﾙｿﾞｰ