まずは、これだけ
TypeScriptは、JavaScriptに「値の種類を確認する仕組み」を加えた言語。
実行前に間違いへ気づきやすくし、最後はJavaScriptへ変換して動かします。
TypeScriptはJavaScriptを広げた言語
TypeScriptではJavaScriptとほぼ同じ処理を書けます。大きな違いは、文字列・数値・オブジェクトなど、データの形をあらかじめ示せることです。
たとえば「年齢には数値が入る」と決めておけば、誤って文字列を渡したときに、実際に画面を動かす前からエディターやチェック処理が知らせてくれます。
JavaScript
すぐ実行でき、柔軟に値を扱える。
TypeScript
型を使い、開発中に矛盾を見つけやすい。
共通点
Web画面の動きや処理を書く目的は同じ。
実行する前に間違いを見つける
JavaScriptでは、間違った種類の値が渡されても、その処理を実際に通るまで問題に気づけない場合があります。TypeScriptはコードを確認し、合わない組み合わせを先に警告します。

1型を書く期待するデータを示す
2チェック矛盾を探す
3修正実行前に直す
4変換JavaScriptにする
5実行ブラウザで動く
規模が大きいほど役立ちやすい
小さなコードなら、どの値がどこで使われるか覚えていられます。しかし画面や機能、開発者が増えると、データの形を共有することが難しくなります。

入力補助
使える項目や関数をエディターが提案しやすい。
変更に強い
データ構造を変えた影響箇所を探しやすい。
意図を共有
何を渡し、何を返す処理か読み取りやすい。
TypeScriptでも実行時の問題は起こる
型チェックで、通信失敗、利用者が入力した想定外の値、サーバーから届く誤ったデータなどをすべて防げるわけではありません。外部から受け取る値は、実行時にも確認が必要です。
また、最初は型の書き方や変換環境を学ぶ必要があります。短い試作品ではJavaScriptの手軽さが合う場合もありますが、長く育てるアプリではTypeScriptが選ばれることが増えています。
ここまでのまとめ
TypeScriptはJavaScriptを別物へ置き換えるのではなく、開発中の確認と共有を助ける仕組みを足した言語です。