1.はじめに。
学ぼうと思った経緯としては、TypeScriptとJavaを使用する開発に携わる機会があったことが挙げられます。また、「TypeScriptとは何か」と疑問に思い調べたところ、「事前に型（制約）を定義できるJavaScriptのようなもの」という説明を受けました。その際、「それはJavaと似ているのではないか」と感じたため、Javaと比較しながらTypeScriptを学んでいきたいと考えています。
2.そもそもTypeScriptって何？
TypeScript is JavaScript with syntax for types.
TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
出典:TypeScript公式
訳すると「TypeScript は型の構文を持つ JavaScript です。」
「TypeScript は JavaScript をベースに構築された厳密に型指定されたプログラミング言語であり、あらゆる規模でより優れたツールを提供します。」
とTypeScriptの公式を開くと真っ先に書いてありました。
つまりJavaScriptの知識が前提になってきそうです。(今回JSについては割愛します。)
Learning JavaScript and TypeScript
We frequently see the question “Should I learn JavaScript or TypeScript?“.
The answer is that you can’t learn TypeScript without learning JavaScript! TypeScript shares syntax and runtime behavior with JavaScript, so anything you learn about JavaScript is helping you learn TypeScript at the same time.
出典:新人プログラマーのためのTypeScript(公式ドキュメント)
訳:「「JavaScript と TypeScript のどちらを学ぶべきですか？」という質問をよく目にします。
答えは、JavaScript を学ばなければ TypeScript を学ぶことはできないということです。TypeScript は構文と実行時の動作を JavaScript と共有しているため、JavaScript について学ぶことはすべて、同時に TypeScript を学ぶことにも役立ちます。」
つまり初学者はJavaScriptを学ぶことでTypeScriptも同時に学ぶことができる。一石二鳥ですね。
本題に戻ります。
TypeScriptには以下の特徴があります。
1. 静的な型付けおよび動的型付けができる。
TypeScriptは強力な型付けシステムを備えており、コンパイル時に変数や関数のパラメータの型を指定することができます。
一つ目にして一番似ているなと思う部分がこの型付けができることなのですが、
Javaも静的型付けができますよね。
おかげでエラーを早期に検出することができますし、実行時のバグの発生も少なくなります。
let num1: number = 10; // num1を静的に数値として型付けしている
let num2: string = "20"; // num2を静的に文字列として型付けしている
let result = num1 + num2;//←ここでエラーが出る
ただ、実行時に型チェックをしないのでJavaとの相違点はそこですかね。
2. 強力な型推論ができる。
TypeScriptは「型推論」がとにかく強力なため。明示的な宣言がなくとも、省略して書くことができます。
Javaの型推論は年々強化されてきているようですが、対照的にまだ限定的な型推論かなと思います。
例えばこういうもの
function divide(a : number , b : number){
return a/ b; // 戻り値は自動的にnumber型になる
}
const result = divide (10,2); //resultも自動的にnumberになる！
いちいち変数の型や定義を明示しなくてもよい点は利便性が高いと感じます。一方で、可読性や保守性の観点では、あえて明示的に定義したほうがコードの意図が伝わりやすくなる場合もあると考えています。特に、チーム開発や一定の知識を前提とした環境では、そのメリットが大きいように感じます。
3.コードの整理が便利
TypeScriptには、コードを整理するためのモジュールと名前空間のサポートが組み込まれています。
なのでJavaでも馴染みがある private, protected, publicにといったアクセス就職誌を使って簡単にデータをカプセル化できます。
例えばこのように
namespace Utilities {
export function greet(name: string): string {
return `Hello, ${name}!`;
}
export function capitalize(str: string): string {
return str.toUpperCase();
}
}
console.log(Utilities.greet("John")); // 出力：Hello, John!
console.log(Utilities.capitalize("hello")); // 出力：HELLO
これでグローバル汚染の防止 greetやcapitalizeといった一般的な名前の関数をそのまま定義すると、他の場所で定義された同名の関数と衝突する恐れなくなり。
しかもnamespace Utilitiesで囲むことで、それらは今後Utilities.xxxとして隔離されるので、今後、Utilities.xxxと関数名をつけてアクセスすることができ、関連するコードを倫理的にグループ化可能になります。
(補足:あくまで上記は例であり、実際のTypeScriptはESModuleを使ってファイル自体を独立とした単位として扱ったコーディングをすることが多いようです。)
4.JavaScriptとの互換性
こちらはJavaとの比較には全く関係ないような気がしますが、大事な特徴の一つであるため記述します。
冒頭でも記述した通り、「TypeScript は型の構文を持つ JavaScript 」なのでJavaScriptのフレームワークやライブラリを使用できるため、JavaScriptの開発環境や実行環境があれば、別途構築せずにそのまま使えます。JavaScriptで作られたファイルを呼び出して使うことも可能です。
TypeScriptはそのままではブラウザで動かず、一度JavaScriptに変換（コンパイル）されます。この工程で古いブラウザ向けに変換することも可能です。
おわりに
TypeScriptの特徴について整理してみましたが、挙げ始めるときりがなく、非常に多くの要素があると感じました。そのため、今回は基礎的な特徴に絞り、4つに整理しています。
また、学習を進める中で気づいた点として、変数定義など一部の書き方はJavaと似ているものの、TypeScriptはあくまでJavaScriptを基盤としているため、実質的にはJavaScriptとの比較に近いのではないかという疑問を持つようになりました。
実際にJavaとTypeScriptの比較に関する記事も多く参考になりましたが、読み進めるうちに、両者は単純に優劣を比較するものではなく、それぞれの特性に応じて使い分けるべきものであると感じました。特に、新規プロジェクトの立ち上げ時に、用途や要件に応じてどちらを採用するか検討する、という観点で比較するのが適切ではないかと考えています。
その上で、自身の学習方針としては、あくまでJavaと比較しながらTypeScriptを理解していくことに意味があると考えています。これは、フロントエンド技術に対する抵抗感を軽減するための一つのアプローチとして有効だと感じています。
さらに、TypeScriptは調べるほどに興味深く、Javaと同様に大規模システムやアプリケーション開発で活用されるケースも多いことから、今後も学習を継続することで実務において大きな力になると考えています。
参考: