TypeScript 基礎

## はじめに

最近、Reactなどのフロント周りを触り始めてようやくTypeScriptに辿りつきました。

今回はTypeScript初心者なりに型定義などを中心にまとめてみました。

## TypeScriptとは

TypeScriptはJavaScriptに型を加えたスーパーセットです。

JavaScriptの全機能に加え、型チェックなどの機能があります。

この型システムにより、コードの信頼性とメンテナンス性が向上します。

### **特徴**

- **静的型付け**: TypeScriptは静的型付けをサポートしており、変数、関数の引数、戻り値などに型を定義することで、コードの正確性を高め、実行前にエラーを検出できます。
- **オブジェクト指向プログラミングサポート**: JavaScriptのプロトタイプベースのオブジェクト指向に加え、より伝統的なクラスベースのオブジェクト指向プログラミングをサポートしています。これにより、JavaやC#などの言語に慣れた開発者にも親しみやすいです。
- **インターフェースとジェネリクス**：TypeScriptはインターフェースとジェネリクスを提供し、大規模なアプリケーションの開発時にコードの再利用性と柔軟性を高めます。
- **JavaScriptとの互換性**：TypeScriptはJavaScriptに完全に互換性があり、既存のJavaScriptコードやライブラリをTypeScriptプロジェクトでそのまま使用できます。

## 型定義について

### **プリミティブ型**

プリミティブ型には **`string`**、**`number`**、**`boolean`** があります。

```tsx
let name: string = "hoge";　// 文字列データを表すために使用されます。
let age: number = 25; // 数値（整数や浮動小数点数）を扱います。
let isStudent: boolean = true; // 真偽値（true または false）を表します。
```

### 特殊な型

**Any**
あらゆる型の値を受け入れることができます。

型安全性の観点からは、なるべく使用を避けるべきです。

```tsx
let anything: any = "Hello";
anything = 42; // 数値にも変更可能
anything = true; // ブーリアンにも変更可能
```

**Unknown**
任意の型の値を受け入れますが、anyと異なり、その値を使用する前に型チェックが必要です。

これにより、より安全なコードが書けます。

```tsx
let uncertain: unknown = "Hello, World!";
if (typeof uncertain === "string") {
    console.log(uncertain.toUpperCase()); // 型チェック後の使用
}
```

Null

```tsx
let nullable: null = null;
```

**Undefined**
変数が値を持っていないことを表します。

```tsx
let notDefined: undefined;
```

## 型エイリアスについて

型エイリアス（Type Alias）は、新しい名前で型を定義する機能です。

これにより、複雑な型を簡単な名前で表現し、コードの可読性と再利用性を向上させることができます。

型エイリアスは **`type`** キーワードを使用して定義されます。

****型エイリアスの基本****

```tsx
type StringOrNumber = string | number;
```

この例では、**`StringOrNumber`** は **`string`** 型または **`number`** 型の値を受け入れる新しい型として定義されています。これはユニオン型として知られています。

また、型エイリアスはオブジェクト型や他の複合型を定義するのにも使えます。

```tsx
type User = {
  name: string;
  age: number;
  isActive: boolean;
};

let user: User = {
  name: "hoge",
  age: 30,
  isActive: true
};
```

この例では、**`User`** 型は **`name`**、**`age`**、**`isActive`** というプロパティを持つオブジェクトを表しています。

### **型エイリアスの利点**

1. **再利用性**：一度定義した型を複数の場所で再利用できます。
2. **可読性**：複雑な型を簡潔な名前で表すことで、コードの読みやすさが向上します。
3. **柔軟性**：型エイリアスを使うと、型の構造を一か所で変更するだけで、その型を使用しているすべての場所に変更が適用されます。

## インターフェースについて

TypeScriptのインターフェースでは、プロパティやメソッドを持つオブジェクトの型を定義できます。

```tsx
interface User {
  name: string;
  age: number;
}

let user: User = {
  name: "fuga",
  age: 30
};
```

### **オプショナルプロパティ**

インターフェース内のプロパティはオプショナル（任意）にすることができます。これは、オブジェクトがそのプロパティを持つこともあれば、持たないこともあることを意味します。

```tsx
interface User {
  name: string;
  age?: number; // オプショナルプロパティ
}

let user: User = {
  name: "fuga"
};
```

### **メソッドを持つインターフェース**

インターフェースはメソッドのシグネチャも定義することができます。

```tsx
interface Greeter {
  greet(name: string): string;
}

class MyGreeter implements Greeter {
  greet(name: string) {
    return `Hello, ${name}`;
  }
}
```

この例では、**`MyGreeter`** クラスは **`Greeter`** インターフェースを実装し、**`greet`** メソッドを提供しています。

### ****インターフェースの拡張****

インターフェースは他のインターフェースを拡張（継承）することができます。

これにより、既存のインターフェースを再利用して、新しいインターフェースを作成できます。

```tsx
interface Person {
  name: string;
}

interface Employee extends Person {
  employeeId: number;
}

let employee: Employee = {
  name: "John",
  employeeId: 12345
};
```

### **型エイリアス vs インターフェース**

型エイリアスとインターフェースはよく似ています。両者の違いは主に拡張性にあると思います。インターフェースは拡張が可能ですが、型エイリアスはそのままでは拡張できません。ただし、型エイリアスはユニオン型など、インターフェースでは表現できないより複雑な型を作成することができます。状況によって使い分けるのが大事になってきそうです。

## まとめ

今回、基本的な部分しか触れていないですが、

TypeScriptについてもう少し深掘りしたことも書いていければと思います。

また、ここで説明した以外にも機能はまだあるので、公式ページ等を見てください。

https://www.typescriptlang.org/