はじめに
TypeScriptド初心者が、「TypeScriptってそもそもなんなのさ」と理解することにトライした記事です
誤った説明があれば、教えてください 
TypeScriptとは、JavaScriptのスーパーセットです
「
...まずスーパーセットってなんだ？」
... 
スーパーセットは、「Xの上位互換となるもの」を指す言葉 
（※「Xの上位互換となるもの」は、「X」の機能がすべて含まれた上で拡張されているもの）
TypeScriptとJavaScriptを当てはめると、
「X」：JavaScript
「Xの上位互換となるもの」：TypeScript
「TypeScriptは、JavaScriptのスーパーセット」
TypeScriptは、JavaScriptのすべての機能を持ちつつ、
+αの機能を持つ言語なんだな〜と覚えておく。
TypeScriptの特徴
静的な型システム
型システムとは
- 変数に入れるデータの種類を決め、それ以外のデータが入らないように保証する仕組み
静的な型システムとは
- 「この変数にはどんな種類のデータを使っていいのか？」をあらかじめ決めて使う
- コードを実行する前に、エラーになりそうな部分を検出できる
- JavaScript：実行時に型が決まる（ 動的な型システム）
- TypeScript：コードを書く段階で型を決める（ 静的な型システム）
//例
let age: number = 30; //ageという変数は`number`（小数も含めた数値）の型を持つ
型推論が可能
型推論とは
変数/引数に対して明示的に型を宣言しなくても、周辺の文脈から型を暗黙的に決定することができる仕組みのことを指す。
型を宣言しなくても、入れられた値などから型を推測できる仕組み
前述の例なら、numberを省略することができる
//例
let age = 30;
コンパイラは、代入する値からnumber型だと判断することができる
letは再代入できるが、その代入がnumberでないとエラーになる 
コンパイラ：プログラミング言語で書かれたソースコードを、コンピュータが実行できる機械語などに変換するソフトウェア
構造的型付け
構造的型付けとは
「名前じゃなくて中身で判断する」型のルール
//例 Personという型を定義する
interface Person {
name: string;
age: number;
}
構造的型付け：「Personという型は、nameとageというプロパティを持つのね 
」
//例 Personに似ているオブジェクトのuserを、Person型として使う
const user = {
name: "山田花太郎",
age: 30,
job: "engineer"
};
function greet(p: Person) {
console.log(`こんにちは、${p.name}さん`);
}
greet(user);
構造的型付け：「userにjobとかいう知らないプロパティあるけど、nameとageあるし、Personとして使ってもいいよ〜
」
構造的に含んでいれば、その型として扱ってOKという考え方
背景
- JavaScriptは「ダックタイピング」を奨励する
-
オブジェクトの型よりもオブジェクトの持つメソッドやプロパティが何であるかによってオブジェクトを判断するプログラミングスタイル
-
TypeScriptはJavaScriptの延長線上にある言語のため、ダックタイピングが行えるような型システムを求められた背景がある
型はコードの実行に影響しない
TypeScriptのコードが実行されるまで
そもそも、どんな流れでTypeScriptのコードは実行されているのか？
ざっくりこんな感じです
TypeScriptコンパイラがやること
- TypeScript/JavaScriptのプログラムを古いverのJavaScriptに変換して、ブラウザやその他の実行環境で動作するようにする
- コードに型エラーがないかチェックする
JavaScriptに変換する時に起きること
- コードからすべての
interface、type、型アノテーションが削除される-
interface：オブジェクトの「構造（プロパティやメソッドの形）」を定義するための型 -
type：型に名前をつけて再利用できるようにする仕組み - 型アノテーション：変数にどんな値が代入できるかの指定
-
TypeScript プレイグラウンドで、TypeScriptと生成されるJavaScriptが並べてみると、わかりやすい
TypeScriptのメリット
最後に、TypeScriptのうれしいところを簡単にまとめました
JavaScriptコードベースのTypeScriptへの移行が楽
エラーをプログラムの実行前に検知できる
型付けがあることで、コードの意図が明確になり、誰が読んでも理解しやすい
型や型演算は実行時のパフォーマンスに影響しない
型エラーがあるコードも出力ができるので、とりあえず動かしてみることができる
デフォルトでは出力されるが、設定次第で制御できる
TypeScriptのありがたさを前より感じられそうです 
最後までお読みいただき、ありがとうございます 
参考