🐣

【TypeScript】この3つだけ！変数・配列・オブジェクトの型入門

に公開
JavaScript
TypeScript
tech

はじめに

JavaScript に「型」の考え方を足したものが TypeScript です。
最初は難しく感じるかもしれませんが、まずは 変数・配列・オブジェクト の基本だけ押さえればOKです。

この記事では、次の項目をコード例つきでざっくり見ていきます。

  • 変数の型定義（型注釈）
  • 型推論
  • 配列の型
  • ユニオン型（number | string など）
  • type / interface によるオブジェクトの型定義

1. 変数の型注釈（型を明示する）

TypeScript では、変数名の後ろに : 型名 を書くことで、型を明示できます。

// 文字列型（string）
let userName: string = "Taro";
userName = "Jiro";

// 真偽値型（boolean）
let isActive: boolean = false;

2. 型推論とは？

TypeScript には 型推論（type inference） という仕組みがあります。
型を書かなくても、代入された値から TypeScript が「これは string だな」などと自動で判断してくれる。というイメージです。

let message = "hello"; // 型を書いていない
// → TypeScript が "これは string だな" と判断して、message は string 型になる

実務では、毎回すべてに型を書くわけではなく、型推論に任せることも多いです。

ただし、学習の最初のステップでは、あえて「型を必ず書く練習」をすると理解が早いので、
この記事のサンプルでは、型をしっかり書いています。

3. 配列の型を定義する

配列の型は、number[] のように 要素の型 + [] で書きます。

// 数字だけを入れたい配列（テストの点数など）
let scores: number[];
scores = [80, 90, 75];     // OK
// scores = [80, "90", 75]; // エラー（string は入れられない）

4. ユニオン型と type エイリアス

ユニオン型（union type） は、複数の型のどれか を表したいときに使います。
|（パイプ、バーティカルライン）でつなげて書きます。

// number か string のどちらか
type UserId = number | string;

let id: UserId;

id = 123;        // OK（number）
id = "user-01";  // OK（string）
// id = true;    // エラー（boolean は許可していない）

さらに、複数の型をまとめた「設定値」のようなイメージでも使えます。

// 数値 or 文字列 or 真偽値 のどれか
type SettingValue = number | string | boolean;

// SettingValue 型の配列
const settings: SettingValue[] = [1, "auto", true];

5. オブジェクトの型定義（type 版）

オブジェクトにも型をつけることができます。

// ユーザーの型（id と name を持つ）
type User = {
  id: number;
  name: string;
};

// User 型の配列（ユーザー一覧）
const users: User[] = [
  { id: 1, name: "Taro" },
  { id: 2, name: "Jiro" },
  { id: 3, name: "Hanako" },
];

ここでは「id が number、name が string のオブジェクト」を User として定義し、
その User の配列を users として使っています。

いい流れできてるので、ここも「商品」の例とかにしちゃいましょう 🙆‍♀️

6. オブジェクトの型定義（interface 版）

同じようなことは interface を使っても書けます。

interface Product {
  name: string;
  price: number;
  inStock: boolean;
}

let item: Product = {
  name: "ノートPC",
  price: 120000,
  inStock: true,
};

// item.inStock = "yes"; ← Type 'string' is not assignable to type 'boolean'

interface Product で、

  • name は string
  • price は number
  • inStock は boolean

という形を定義しています。

item.inStock に "yes" のような文字列を代入しようとすると、
「string は boolean には代入できません」 というエラーになり、間違った型を早い段階で防いでくれます。

7. type と interface はどう使い分ける？

  • type
    • ユニオン型（A | B）を表現できる
    • 既存の型に別名をつけるイメージ
  • interface
    • 主に「オブジェクトの形」を表現するのに使われる
    • extends などで拡張しやすい

最近は、オブジェクトなら interface でも type でもどちらでもOK ということが多いです。
チームの方針に合わせたり、自分の書きやすい方で揃えたりすれば大丈夫です。

おわりに

今回は、TypeScript の中でも、ごく基本的なところだけ をざっくりまとめました。

このあたりが押さえられていれば、エディタの補完がぐっと使いやすくなったり、「ここにその型は入れちゃダメだよ」と TypeScript が教えてくれたりというメリットはしっかり感じられるはずです。

関数の型や any / unknown、ジェネリクスなども別の記事で少しずつ触れていければと思います✨

GitHubで編集を提案

Discussion