Zenn
🐥

TypeScript 学習記録 #3（基本の型定義・関数の型定義）

2021/05/13に公開
TypeScript
idea

TypeScript 学習記録 #2 の続編。
今回のメインテーマ、「型について（基本的な型定義、関数の型定義）」。

今回主に参考にした教材：

見返す用リスト（主に自分用）

TypeScript基礎学習を完走したので、いつでも見返すことの出来るようにリスト化しておく（5/17）

基本的な型定義

以下のことについて学んだ。特に難しいことはなかったので割愛。

  • プリミティブ型
  • null型とundefined型
  • any型とunknown型
    • unknown型の使い所としては、APIを叩いて返ってきたデータがどういうものかわからない時などに使えるらしい。返ってきたデータに対して、条件式で指定した型であればそれ以降の処理を実行するように続けることが出来る。

関数の型定義

以下のことについて学んだ。

  • 関数の返り値の型指定
  • 関数の引数の型指定
  • 可変長引数の型指定（レストパラメータ(残余引数)の型指定）
  • 呼び出しシグネチャ（型シグネチャ）

レストパラメーターの型指定方法についてメモ

レストパラメーターの型指定について少し誤解していたのでそのメモ。

// 商品の合計値を返す関数
const sumProductsPrice = (...productsPrice: number[]): number => {
  return productsPrice.reduce((prevTotal: number, productPrice: number) => {
    return prevTotal + productPrice;
  }, 0);
};

// 正しい呼び出し方
sumProductsPrice(1000,2000,3000,4000); // => 10000

// 誤った呼び出し方
sumProductsPrice([1000,2000,3000,4000]); // => エラー

商品の合計を返すsumProductsPrice関数の引数として、レストパラメーター（残余引数）を用いるとき、型は...productsPrice: number[]としていることから、最初「数値の配列を引数として渡す」と勘違いをしていた。
ただそれは間違いで、正しくは「関数に渡された複数の引数のうち、使われなかった残りを配列として取得している」ということらしい。
つまり、予め配列の形でsumProductsPrice関数に引数を渡すのではなく、通常通り複数の引数を指定して、レストパラメーター以前のところで引数として使われなかったものが、配列の形となってレストパラメーターに代入されるということ。
学びになった。

呼び出しシグネチャ（型シグネチャ）のメモ

関数の型定義をする時に使う。完全な記法と省略記法があり、完全な記法はオブジェクトに似た形、省略記法はアロー関数に似た形。
シグネチャとは、「関数名、引数の数、データ型、返り値の型」を組み合わせたもののことを言う。

// 呼び出しシグネチャ（完全版）
type LogMessage = {
  (message: string): void;
};

// 呼び出しシグネチャ（省略版）
type LogMessage = (message: string) => void;

// 実際の使い方
// 関数に上で定義した型をアノテーションで付ける。関数の引数や返り値に直接型を付ける必要がなくなる
const logMessage: LogMessage = (message) => {
  console.log(message);
}

ここまでの感想

途中で並行して、サバイバルTypeScriptもやってみたが、まだまだ現在進行形で作成中らしく、現時点ではあまりTypeScriptを使った実践的なアウトプットをすることは出来なかった。「アウトプットのみ」を目的とするならば素直に動画教材などで良いと思う。
しかし、TypeScript周りの用語についてや、TypeScriptが生まれた理由、さらにTypeScriptと関わりの強いReactの「宣言的UI」とはどういうことかなど、色々とタメになる情報がたくさんあったため間違いなく無駄な時間ではなかった。

TypeScript面白い🤔

GitHubで編集を提案

Discussion