TypeScriptとは？

TypeScriptは、JavaScriptに型システムを追加したプログラミング言語です。型があることで、コードを書いている段階でエラーを見つけやすくなります。

なぜ型が必要なのか？

JavaScriptでは、こんなコードを書いてもエラーになりません：

let age = 25;
age = "二十五歳";  // 数値から文字列に変わってもOK

// 後でこんな計算をしようとすると...
console.log(age + 5);  // "二十五歳5" になってしまう！

でも、実際のアプリケーションでは、「年齢は数値であるべき」というルールがあるはずです。TypeScriptを使うと、このルールをコードで表現できます。

let age: number = 25;
age = "二十五歳";  // エラー！数値以外は代入できない

型を使うメリット：

• コードを書いている時にエラーが分かる
• エディタが補完候補を表示してくれる
• バグを早期に発見できる
• コードの意図が明確になる

基本的な型

TypeScriptには、まず覚えるべき3つの基本的な型があります。

1. string（文字列型）

文字列を扱う型です。

const name: string = "太郎";
const message: string = 'こんにちは';
const greeting: string = `私の名前は${name}です`;

console.log(greeting);  // "私の名前は太郎です"

ポイント：

• シングルクォート '、ダブルクォート "、バッククォート ` すべて使えます
• バッククォート（`）を使うとテンプレート文字列が書けます
• テンプレート文字列内で ${変数} を使うと変数の値を埋め込めます

2. number（数値型）

数値を扱う型です。整数も小数も同じnumber型です。

const age: number = 25;
const price: number = 1999.99;
const temperature: number = -5;

// 計算もできる
const total: number = price * 2;  // 3999.98
const nextAge: number = age + 1;  // 26

ポイント：

• 整数も小数も同じnumber型
• マイナスの値もOK
• 計算結果もnumber型になる

3. boolean（真偽値型）

true または false の2つの値だけを持つ型です。

const isStudent: boolean = true;
const hasLicense: boolean = false;

// 条件分岐で使う
if (isStudent) {
  console.log("学生です");
}

// 比較結果もboolean型
const isAdult: boolean = age >= 20;  // true または false

ポイント：

• 値は true か false のみ
• 条件分岐（if文など）でよく使う
• 比較演算子（===、>= など）の結果はboolean型

配列の型

同じ型の値を複数持つ場合、配列を使います。

配列の型の書き方

配列の型は 型名[] という形式で書きます。

// 数値の配列
const numbers: number[] = [1, 2, 3, 4, 5];

// 文字列の配列
const fruits: string[] = ["りんご", "バナナ", "オレンジ"];

// 真偽値の配列
const flags: boolean[] = [true, false, true];

配列の操作

配列に要素を追加したり、取得したりする例です。

const fruits: string[] = ["りんご", "バナナ"];

// 要素を追加
fruits.push("オレンジ");  // ["りんご", "バナナ", "オレンジ"]

// 要素を取得
const first: string = fruits[0];  // "りんご"

// 配列の長さ
const count: number = fruits.length;  // 3

// 全ての要素を処理
fruits.forEach((fruit: string) => {
  console.log(fruit);
});

別の書き方：Array<型名>

配列の型は Array<型名> という書き方もできます。

// どちらも同じ意味
const numbers1: number[] = [1, 2, 3];
const numbers2: Array<number> = [1, 2, 3];

const names1: string[] = ["太郎", "花子"];
const names2: Array<string> = ["太郎", "花子"];

どちらを使っても同じですが、型名[] の方がシンプルでよく使われます。

React開発での使用例

// ユーザー名のリスト
const users: string[] = ["太郎", "花子", "次郎"];

function UserList() {
  return (
    <ul>
      {users.map((user, index) => (
        <li key={index}>{user}</li>
      ))}
    </ul>
  );
}

オブジェクトの型

複数の情報をまとめて扱う場合、オブジェクトを使います。

基本的な書き方

オブジェクトの型は { プロパティ名: 型; プロパティ名: 型 } という形式で書きます。

const person: { name: string; age: number } = {
  name: "太郎",
  age: 25
};

// プロパティにアクセス
console.log(person.name);  // "太郎"
console.log(person.age);   // 25

ポイント：

• プロパティごとに型を指定する
• プロパティは ;（セミコロン）で区切る
• 定義した型と実際の値が一致していないとエラーになる

より複雑な例

const user: {
  id: number;
  name: string;
  email: string;
  isActive: boolean;
} = {
  id: 1,
  name: "太郎",
  email: "[email protected]",
  isActive: true
};

// プロパティにアクセス
if (user.isActive) {
  console.log(`${user.name}さんはアクティブです`);
}

オブジェクトの配列

オブジェクトを配列にすることもできます。

const users: { name: string; age: number }[] = [
  { name: "太郎", age: 25 },
  { name: "花子", age: 23 },
  { name: "次郎", age: 30 }
];

// 配列の各要素にアクセス
users.forEach((user) => {
  console.log(`${user.name}は${user.age}歳です`);
});

React開発での使用例

// ユーザー情報を表示するコンポーネント
function UserCard({ user }: { user: { name: string; age: number } }) {
  return (
    <div>
      <h2>{user.name}</h2>
      <p>年齢: {user.age}歳</p>
    </div>
  );
}

// 使用例
const userData = { name: "太郎", age: 25 };
<UserCard user={userData} />

型推論 - TypeScriptが自動で型を判断してくれる

TypeScriptは賢いので、型を書かなくても値から自動で型を推論してくれます。

型推論の基本

// 型を明示的に書く
const age: number = 25;
const name: string = "太郎";

// 型推論に任せる（TypeScriptが自動で判断）
const age2 = 25;        // number型と推論される
const name2 = "太郎";   // string型と推論される

// どちらも同じように動く
console.log(age + 1);   // 26
console.log(age2 + 1);  // 26

配列とオブジェクトの型推論

// 配列も型推論される
const numbers = [1, 2, 3];  // number[]型と推論される
const fruits = ["りんご", "バナナ"];  // string[]型と推論される

// オブジェクトも型推論される
const person = {
  name: "太郎",
  age: 25
};
// { name: string; age: number } 型と推論される

いつ型を書くべき？

型を書かなくてもいい場合：

• 変数の宣言時に値を代入する場合
• 値から型が明らかな場合

// ✅ 型推論に任せる（推奨）
const count = 0;
const message = "こんにちは";
const isActive = true;

型を書いた方がいい場合：

• 変数の宣言時に値を代入しない場合
• 関数の引数（必須）
• 関数の戻り値（推奨）
• 型を明示したい場合

// ❌ 値がないので型推論できない
let count;  // any型になってしまう

// ✅ 型を明示する
let count: number;
count = 0;  // OK

// ✅ 関数の引数と戻り値には型を書く
function add(a: number, b: number): number {
  return a + b;
}

React開発での例

// ✅ 型推論に任せる
const [count, setCount] = useState(0);  // countはnumber型と推論される
const message = "こんにちは";

// ✅ Propsは型を明示する
function Greeting({ name }: { name: string }) {
  return <h1>こんにちは、{name}さん！</h1>;
}

まとめ：

• 値から型が明らかなら型推論に任せる
• 関数の引数やPropsは型を書く
• 迷ったら型を書いておく方が安全

まとめ

この章では、TypeScriptの基本的な型について学びました。

基本の型

• string: 文字列を扱う型
• number: 数値を扱う型（整数も小数も同じ）
• boolean: true または false を扱う型

複数の値を扱う型

• 配列: 型名[] で表現（例: number[]）
• オブジェクト: { プロパティ: 型 } で表現

型推論

• TypeScriptは値から自動で型を推論してくれる
• 値から型が明らかなら型推論に任せてOK
• 関数の引数やPropsは型を明示する