TypeScriptとは
JavaScriptに型システムとその他の機能を追加したプログラミング言語。icrosoftによって開発され、2012年に初めて公開された
TypeScriptの特徴
1.型注釈（Type Annotations）
漢字をそのまま読むと「かたちゅうしゃく」ただ多くの場合「型アノテーション」または「タイプアノケーション」と呼ばれる。変数や関数に型を明示的（はっきりと具体的に示す）に指定できる
変数とは
「データを一時的に保存しておくための名前付きの入れ物やラベルのようなもの」変数には名前が付いており値を代入したり後から変更したりできる
let message: string = "こんにちは";
let count: number = 5;
1行目はletこれは変数を宣言するためのキーワード
この場合messageという変数が定義されている
message: string
これが型注釈。message変数には**string型（文字列型）**の値しか代入できない事を示している
= "こんにちは"
message変数に初期値として「こんにちは」という文字列を代入している
letは変数を宣言するためのもの
stringは文字列型
2行目もlet同じく変数を宣言するためのキーワード
count: number
これも型注釈。count変数には**number型（数値型）**の値しか代入できない事を示している
= 5
count変数に初期値として数値5を代入している
letは変数を宣言するためのもの
numberは数値型
2.静的型チェック
コードを実行する前にエラー検出ができる。デバックの時間を短縮できるメリット
3.最新のJavaScript機能
TypeScriptは最新のJavaScriptの機能をサポートし、それを古い環境にもトランスパイル（変換）可能」である
4.クラスとインターフェイス
オブジェクト指向プログラミング（OOP）を簡単に実装できる
オブジェクト指向とは
プログラムを「オブジェクト」と呼ばれるデータの集合とその操作を基に設計・構築するプログラミングの考え方や手法のこと
interface User {
name: string;
age: number;
}
class Person implements User {
constructor(public name: string, public age: number) {}
}
このコードはTypeScriptにおいてインターフェースとクラスを組み合わせたオブジェクト指向プログラミングの基本的な例となっている
interface User {
name: string;
age: number;
}
①インターフェースUser
-
interface
インターフェースはオブジェクトの構造（形）を定義するためのもの
この場合Userは「nameという文字列型のプロパティ」と「ageという数値型のプロパティ」を持つことが求められている -
プロパティ
name: string：必須の文字列型プロパティ
age: number：必須の数値型プロパティ -
目的
インターフェースを使う事でクラスやオブジェクトがどのような構造をもつべきか明示的に指定できる
class Person implements User {
constructor(public name: string, public age: number) {}
}
②クラスPerson
-
class
クラスはオブジェクトの設計図として使われている -
implements User
このクラスはUserインターフェースを実装している事を示している
つまりPersonクラスは必ずnameとageのプロパティを持たなければならない
インターフェースを実装することで構造が正しいかコンパイル時にチェックされる -
コンストラクター(
constructor)
クラスがインスタンス化されるときに呼び出される特別なメソッド
この場合、nameとageの値を初期化する
public修飾子を使うことでコンストラクター引数がそのままプロパティとして設定される（暗黙的なプロパティ宣言）
修飾子（しゅうしょくし）
プログラミングにおいてクラスのプロパティやメソッドのアクセス範囲や振る舞いを指定するためのキーワード。これによりオブジェクト指向プログラミングにおける「カプセル化」を実現する。こうする事によりデータの隠蔽ができ必要なデータや機能だけを公開し、不要なまたは危険な操作を防ぐ。プログラムの安全性や可読性を高め効率的な設計を実現する
public【公開】
プロパティやメソッドがクラスの内外からアクセス可能
private【非公開】
プロパティやメソッドがクラスの外部からアクセスできない
protected【保護】
プロパティやメソッドがクラス内側および継承されたクラス（サブクラス）からのみアクセス可能
readonly【読み取り専用】
初期化時またはコンストラクタ内で値を設定し、それ以降は変更不可
メソッドのstatic修飾子
プロパティやメソッドをインスタンスではなくクラス自体に属させる
このコードの実際の使用例は
const person = new Person("太郎", 25);
console.log(person.name); // 太郎
console.log(person.age); // 25
console.logは標準の出力メソッド
5.JavaScriptとの互換性
TypeScriptはJavaScriptのスーパーセットなので既存のJavaScriptコードをそのまま使用できる
6.エディタ支援
型情報を利用して、コード補完やエラー検出が強化される（VS Codeと相性が良い）
TypeScriptを使用するメリット
- コードの可読性と保守性が向上
型注釈によりコードの意図が明確になる - バグを未然に防ぐ
静的型チェックにより、実行前に多くのバグを発見できる - 大規模開発向け
複数人のチームで作業する場合、型システムがコードの整合性を保つのに役に立つ - 既存のJavaScriptを導入し段階的に移行できる
TypeScriptのインストール
1.Node.jsを公式サイトでインストールする
JavaScriptの実行環境を自分パソコンやサーバー上に作ることができる様になるツール
フロントエンドの開発環境としても使われているメジャーなもの
TypeScriptでも裏でNode.jsのツールが使われてるため先にインストールする
2.TypeScriptをコマンドプロンプトでインストールする
- グローバルインストール（どのプロジェクトでも使用可能）
すべてのパッケージをdependenciesに入れるため、依存関係の管理が簡単
短期的な学習用や個人開発目的ならコチラ
npm install -g typescript
- プロジェクトごとのインストール（開発用依存として）
本番環境dependenciesと開発環境devDependenciesのパッケージを明確に分けられる
チーム開発や本番環境へのデプロイを必要とするならコチラ
npm install typescript --save-dev
どっちでも良いが将来的なことを考えると--save-dev有りの方が良いとは言われている
コマンドを打つ際の動作には直接的な違いはない
3.TypeScriptのインストール確認
無事インストールされたかこのコマンドで確認する
tsc -v
4.Visual Studio Codeをインストールする
TypeScriptのサポートが最初から組み込まれているツール
（TypeScriptのコンパイラは別にインストールする必要があったが2で出来ている）
主にエラーを直接エディター上に表示してくれる目的で使う人が多い
用語集
-
コンパイラ
コンパイラ（compiler）は、プログラムのコードをあるプログラミング言語（主に高水準言語）から、コンピュータが直接実行できる形式（主に機械語）に変換するソフトウェアのこと。このプロセスを「コンパイル」と呼ぶ -
DOM要素
DOM要素（Document Object Model要素）とは、HTMLやXML文書をプログラムから操作するためのオブジェクト -