Zenn
🔰

TypeScript入門：関数の型定義～配列操作について

に公開
JavaScript
TypeScript
初心者向け
プログラミング初心者
tech

はじめに

最近はAIコーディングばかりで、自身の基礎的な理解が曖昧になっていると感じることがありました。そこで本記事では、自身の知識を整理し、理解を深める目的で、TypeScriptの要点をできるだけかみ砕いてアウトプットとしてまとめます。

1.引数と戻り値の基本

JavaScriptでも関数はたくさん使っていましたが、TypeScriptではもっと厳密に、そして安全に関数を扱えます。

ポイント

ポイントは、引数（関数に渡すデータ）と戻り値（関数から返ってくるデータ）それぞれに、「君のデータの種類はこれだよ」と型を決めてあげることでした。これを最初にやっておくと、後で全然違うデータを入れてしまって「あれ、動かない…」と悩む時間をなくせます。

// まずはオブジェクトの型を定義
type User = {
  name: string;
  age: number;
};

// 関数の引数と戻り値に型を設定！
//                  ↓引数の型   ↓戻り値の型
function greet(user: User): string {
  // 中で処理を実行
  return `こんにちは、${user.name}さん！`;
}

このgreet関数は、「引数にはUser型のオブジェクトを受け取って、最終的にstring型の文字列を返します」というルールが明確に決められています。
このおかげで、もし間違った使い方をしようとしても、エディタが「型が違うよ！」と教えてくれるので、間違えて書いても安心です。

2. アロー関数に慣れる

学校でjavaの授業があったんですが、アロー関数で躓いた記憶があります。

ReactやNext.jsのチュートリアル動画でよく出てくる　=> という矢印のような記号。
これが「アロー関数」という書き方です。

ポイント

functionで関数を「宣言」するのではなく、constなどで作った定数に、関数を「代入」するイメージです。こっちのほうがコードが短くなり、見た目もスッキリするので、最近の主流になっているそうです。

// 今まで慣れていた書き方（関数宣言）
function add_A(a: number, b: number): number {
  return a + b;
}

// アロー関数を使った書き方
const add_B = (a: number, b: number): number => {
  return a + b;
};

働きは全く同じですが、const add_B = ... の形に慣れると、より多くの現代的なコードが読めるようになりそうです。

3. TypeScriptで配列を操作する

JavaScriptで学んだ.filter()と.map()に、TypeScriptの型が加わると、安全で便利になります。

.filter()関数

配列の中から、条件に合うものだけを選び出して、新しい配列を作る関数

.map()関数

配列の要素を一つずつ取り出して、それぞれを別の形に変えて、新しい配列を作る関数

ポイント

User[]のように型名[]と書くだけで、「User型のオブジェクトだけが入った配列」という意味になります。これで、配列に違う種類のデータが紛れ込む心配がなくなります。

type User = { name: string; age: number; };

// User型の配列だよ、と宣言
const users: User[] = [
  { name: "田中", age: 22 },
  { name: "山田", age: 30 },
  { name: "佐藤", age: 19 },
];

// 20歳以上のユーザーの名前だけを抜き出す！
const adultNames: string[] = users
  .filter(user => user.age >= 20) // ①20歳以上を抽出
  .map(user => user.name);        // ②名前だけ抜き出す

console.log(adultNames); // 結果: [ "田中", "山田" ]

users配列から、

.filter()で条件（20歳以上）に合うものだけを残して、
.map()で欲しい情報（名前）だけを抜き出す。
この流れるような処理は、メソッドチェーンと呼ぶらしいです。

まとめ

TypeScriptの型は、最初は少し面倒に感じるかもしれません。でも、未来の自分がバグで悩む時間を減らしてくれる便利モノです。
この記事が、同じように学習している誰かの助けになったら嬉しいです。

また、何か間違いがあれば教えてもらえると嬉しいです！

Discussion