はじめに

単純にJavaScriptじゃなくTypeScriptを使うメリットを知りたいという興味本位から調べ始めました。粗末な備忘録ですがお付き合い頂けると幸いです。

この記事の対象者

私と同じ初学者の方
同じような疑問を持っている方
温かい目で見守っていただける方

そもそも、JavaScriptとは

まず、TypeScriptについて考える前に比較とするJavaScriptとはなんぞや

JavaScriptは、ウェブページを動的にするために使われるプログラミング言語です。当初はブラウザ内で動作するスクリプト言語として登場しましたが、現在ではサーバーサイド（Node.jsなど）やモバイルアプリ開発、デスクトップアプリケーション、ゲーム開発など、多岐にわたる領域で使用されています。JavaScriptは、HTMLとCSSと共に、ウェブ開発の3つの核となる技術の一つです。
JavaScriptの主な特徴は以下の通りです：

インタープリタ言語: JavaScriptはコンパイルされる代わりに、ブラウザやNode.jsなどの環境によってリアルタイムで解釈され実行されます。

オブジェクト指向: JavaScriptはプロトタイプベースのオブジェクト指向言語であり、継承、カプセル化、多様性などのオブジェクト指向の概念をサポートしています。

イベント駆動: JavaScriptはユーザーのアクション（クリック、タッチ、キーボード入力など）に応じて実行されるイベント駆動型の言語です。これにより、動的でインタラクティブなウェブページを作成することができます。

非同期処理: AJAXやPromise、async/awaitなどの技術を利用して、非同期処理を行うことができます。これにより、サーバーからのデータ取得や長時間実行されるタスクをバックグラウンドで処理し、ウェブアプリケーションのパフォーマンスとユーザー体験を向上させることができます。

from ChatGPT

本題のTypeScriptとは

本題のTypeScriptとはなんぞや

TypeScriptは、Microsoftによって開発されたオープンソースのプログラミング言語です。JavaScriptに静的型付けとクラスベースオブジェクト指向を加えた拡張言語として設計されています。TypeScriptはJavaScriptに完全に互換性があり、どんなJavaScriptのコードもTypeScriptのコードとして機能します。TypeScriptのコードはトランスパイルすることで純粋なJavaScriptコードに変換され、ブラウザやNode.jsなどのJavaScriptが実行可能な環境で実行されます。
TypeScriptの主な特徴は以下の通りです：

静的型付け: 変数、関数の引数、戻り値に型を指定できます。これにより、開発中に型の不一致によるエラーを検出しやすくなり、コードの安全性とメンテナンス性が向上します。

クラスベースオブジェクト指向: JavaScriptのプロトタイプベースの継承に加えて、より伝統的なクラスベースのオブジェクト指向概念をサポートしています。これにより、大規模なアプリケーションの開発が容易になります。

インターフェイスと抽象クラス: コードの構造を定義するためのインターフェイスと抽象クラスを提供します。これにより、設計の段階でコードの契約を定義し、実装の一貫性を保つことができます。

ジェネリクス: 型の再利用性を高めるためのジェネリクスをサポートしています。これにより、型安全を保ちながら柔軟なコードの記述が可能になります。

ESNextサポート: 最新のECMAScript標準の機能をサポートしており、将来のJavaScriptの機能を先取りして使用することができます。

ツールチェーンのサポート: 優れた開発ツール（エディタの自動補完、リファクタリングツールなど）のサポートにより、開発プロセスが効率化されます。

from ChatGPT

TypeScriptを使うとなにが嬉しいのか

なるほど、メリットがたくさんありそうですね
一つずつ見ていきます

静的型付け

変数、関数の引数、戻り値に型を指定できます。

これは確かに嬉しいですね。

let a = 123;

a = "abc";

とできていたところが、TypeScriptではコンパイルエラーになるということですよね。
これは変数の取り扱いが安全になりそうです。ちゃんと型推論機能もついてるようです

let a: number = 123;

a = "abc"; //ここでコンパイルエラー

クラスベースオブジェクト指向

これはJavaScriptだとオブジェクトからオブジェクトを作るようなプロトタイプベースのオブジェクト指向だったのがJavaなどと同じようなクラスベースのオブジェクト指向で書けるということでしょう。先にJavaを触っていた僕としては嬉しいです。

現在はJavaScriptでもクラス構文を使えるみたいですが、まぁそれはおいておきましょう。

インターフェイスと抽象クラス

これは大きいですね、さきほどのクラスベースのオブジェクト指向と同様に継承だとか再利用といったことが簡単になるので大規模開発などでかなりメリットがでてくる部分かなと思います。

ジェネリクス

今回調べて初めてしった概念だったのですがとても便利ですごいとおもいます。要は関数にかかわる型すら変数として扱うということみたいです。

ジェネリックを用いない場合、戻り値や引数の型は一意または任意のどちらかとなってしまいます

function identity(arg: number): number {
  return arg;
}

function identity(arg: any): any {
  return arg;
}

一意だと引数や戻り値の型がかわるごとに同じ処理でも違う関数を定義しなおさないといけないし、任意だとなんでもありになってしまうので危険性が上がる。そこで、戻り値や引数の型を変数として使うときに設定しようという感じみたいですね。

function identity<T>(arg: T): T {
  return arg;
}

let a = identity<String>("Hoo");

let a = identity<String>(123); //これは指定した型と引数に代入する値の型が違うのでコンパイルエラー

ESNextサポート

これは新しいECMAscriptのバージョンを現在動くバージョンに変換してくれる的な意味らしい
ちがったらすみません。ご教示ねがいます

ツールチェーンのサポート

これはIDEが充実していますよという意味でしょう。

おわりに

そもそも、JavaScriptに完全互換があってこの魅力的な要素の数々...TypeScript勉強していこうと思います。
バックエンドエンジニアとして働いていくのですが、フロントエンド技術もとても面白いものが多く勉強になることが多いなと感じています。応援よろしくお願いします。

参考リンク

TypeScriptとは
 JavaScriptとは
 ~ESNextとは~
ChatGPT

おねがい

ほんとに初学者の備忘録なので内容に誤りがある可能性があります
見つけた際にはお手数ですがご連絡いただけると大変ありがたいです