TypeScriptをはじめるにあたって

# TypeScriptとは
JavaScriptに型システムとその他の機能を追加したプログラミング言語。icrosoftによって開発され、2012年に初めて公開された

## TypeScriptの特徴
**1.型注釈（Type Annotations）**
漢字をそのまま読むと「かたちゅうしゃく」ただ多くの場合「型アノテーション」または「タイプアノケーション」と呼ばれる。変数や関数に型を明示的（はっきりと具体的に示す）に指定できる

:::note info
<string>変数とは</string>
「データを一時的に保存しておくための名前付きの入れ物やラベルのようなもの」変数には名前が付いており値を代入したり後から変更したりできる
:::

```diff_typescript
let message: string = "こんにちは";
let count: number = 5;
```
1行目は`let`これは変数を宣言するためのキーワード
この場合`message`という変数が定義されている

`message: string`
これが型注釈。`message`変数には**`string`型（文字列型）**の値しか代入できない事を示している
`= "こんにちは"`
`message`変数に初期値として「こんにちは」という文字列を代入している

:::note warn
letは変数を宣言するためのもの
stringは文字列型
:::


2行目も`let`同じく変数を宣言するためのキーワード
`count: number`
これも型注釈。`count`変数には**`number`型（数値型）**の値しか代入できない事を示している
`= 5`
`count`変数に初期値として数値`5`を代入している

:::note warn
letは変数を宣言するためのもの
numberは数値型
:::

**2.静的型チェック**
コードを実行する前にエラー検出ができる。デバックの時間を短縮できるメリット

**3.最新のJavaScript機能**
TypeScriptは最新のJavaScriptの機能をサポートし、それを古い環境にもトランスパイル（変換）可能」である

**4.クラスとインターフェイス**
オブジェクト指向プログラミング（OOP）を簡単に実装できる

:::note info
オブジェクト指向とは
プログラムを「オブジェクト」と呼ばれるデータの集合とその操作を基に設計・構築するプログラミングの考え方や手法のこと
- [オブジェクト指向とは]()
:::

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

class Person implements User {
    constructor(public name: string, public age: number) {}
}
```
このコードはTypeScriptにおいてインターフェースとクラスを組み合わせたオブジェクト指向プログラミングの基本的な例となっている
```diff_typescript
interface User {
    name: string;
    age: number;
}
```
**①インターフェース`User`**
- `interface`
インターフェースはオブジェクトの構造（形）を定義するためのもの
この場合`User`は「`name`という文字列型のプロパティ」と「`age`という数値型のプロパティ」を持つことが求められている
- **プロパティ**
`name: string`：必須の文字列型プロパティ
`age: number`：必須の数値型プロパティ
- **目的**
インターフェースを使う事でクラスやオブジェクトがどのような構造をもつべきか明示的に指定できる

```diff_typescript
class Person implements User {
    constructor(public name: string, public age: number) {}
}
```
**②クラス`Person`**
- `class`
クラスはオブジェクトの設計図として使われている
- `implements User`
このクラスは`User`インターフェースを実装している事を示している
つまり`Person`クラスは必ず`name`と`age`のプロパティを持たなければならない
インターフェースを実装することで構造が正しいかコンパイル時にチェックされる
- **コンストラクター(`constructor`)**
クラスがインスタンス化されるときに呼び出される特別なメソッド
この場合、`name`と`age`の値を初期化する
`public`修飾子を使うことでコンストラクター引数がそのままプロパティとして設定される（暗黙的なプロパティ宣言）
:::note info
修飾子（しゅうしょくし）
プログラミングにおいてクラスのプロパティやメソッドのアクセス範囲や振る舞いを指定するためのキーワード。これによりオブジェクト指向プログラミングにおける「カプセル化」を実現する。こうする事によりデータの隠蔽ができ必要なデータや機能だけを公開し、不要なまたは危険な操作を防ぐ。プログラムの安全性や可読性を高め効率的な設計を実現する

`public`【公開】
プロパティやメソッドがクラスの内外からアクセス可能
`private`【非公開】
プロパティやメソッドがクラスの外部からアクセスできない
`protected`【保護】
プロパティやメソッドがクラス内側および継承されたクラス（サブクラス）からのみアクセス可能
`readonly`【読み取り専用】
初期化時またはコンストラクタ内で値を設定し、それ以降は変更不可
メソッドの`static`修飾子
プロパティやメソッドをインスタンスではなくクラス自体に属させる
:::

このコードの実際の使用例は
```diff_typescript
const person = new Person("太郎", 25);
console.log(person.name); // 太郎
console.log(person.age);  // 25
```
:::note warn
`console.log`は標準の出力メソッド
:::

**5.JavaScriptとの互換性**
TypeScriptはJavaScriptのスーパーセットなので既存のJavaScriptコードをそのまま使用できる

**6.エディタ支援**
型情報を利用して、コード補完やエラー検出が強化される（VS Codeと相性が良い）

## TypeScriptを使用するメリット
- コードの可読性と保守性が向上
型注釈によりコードの意図が明確になる
- バグを未然に防ぐ
静的型チェックにより、実行前に多くのバグを発見できる
- 大規模開発向け
複数人のチームで作業する場合、型システムがコードの整合性を保つのに役に立つ
- 既存のJavaScriptを導入し段階的に移行できる

# TypeScriptのインストール
## 1.Node.jsを公式サイトでインストールする
https://nodejs.org/en

JavaScriptの実行環境を自分パソコンやサーバー上に作ることができる様になるツール
フロントエンドの開発環境としても使われているメジャーなもの
TypeScriptでも裏でNode.jsのツールが使われてるため先にインストールする

## 2.TypeScriptをコマンドプロンプトでインストールする
https://www.typescriptlang.org/

- グローバルインストール（どのプロジェクトでも使用可能）
すべてのパッケージを`dependencies`に入れるため、依存関係の管理が簡単
短期的な学習用や個人開発目的ならコチラ
```
npm install -g typescript
```
- プロジェクトごとのインストール（開発用依存として）
本番環境`dependencies`と開発環境`devDependencies`のパッケージを明確に分けられる
チーム開発や本番環境へのデプロイを必要とするならコチラ
```
npm install typescript --save-dev
```
どっちでも良いが将来的なことを考えると`--save-dev`有りの方が良いとは言われている
コマンドを打つ際の動作には直接的な違いはない

## 3.TypeScriptのインストール確認
無事インストールされたかこのコマンドで確認する
```
tsc -v
```

## 4.Visual Studio Codeをインストールする
https://code.visualstudio.com/

TypeScriptのサポートが最初から組み込まれているツール
（TypeScriptのコンパイラは別にインストールする必要があったが2で出来ている）
主にエラーを直接エディター上に表示してくれる目的で使う人が多い

## 用語集
- **コンパイラ**
コンパイラ（compiler）は、プログラムのコードをあるプログラミング言語（主に高水準言語）から、コンピュータが直接実行できる形式（主に機械語）に変換するソフトウェアのこと。このプロセスを「コンパイル」と呼ぶ

- **DOM要素**
DOM要素（Document Object Model要素）とは、HTMLやXML文書をプログラムから操作するためのオブジェクト

- ****