JavaScriptからTypeScriptへ

2023年 7月12日　Posted　野々瀨(フロントエンドエンジニア)

近年のフロントエンド開発では、TypeScriptで開発することが大半を占めている印象です。長い間JavaScriptで開発し続けてきた者としては、コストを考えるとなかなか手が出しづらい言語です。とはいえ、TypeScriptは魅力的な言語ですので、積極的に使っていきたいものです。

そこで今回は、TypeScriptの特徴やJavaScriptの違いなど、軽くまとめた内容をご紹介しようと思います。

TypeScriptとは

TypeScriptとは、2012年ごろにMicrosoft社によって開発された、オープンソースのプログラミング言語およびJavaScriptの拡張言語（AltJS）です。JavaScriptでの開発において、特に大規模による問題点（型など）を解決するために開発されました。

TypeScript

JavaScriptとの違い

TypeScriptはJavaScriptの拡張言語ですので、JavaScriptの構文をほぼそのまま使用することができますが、次のような違いがあります。

インタープリタ言語とコンパイラ言語

JavaScriptはインタープリタ言語であるのに対し、TypeScriptはコンパイラ言語です。
インタープリタ言語は、実行時に一つ一つの処理ごとに機械語に翻訳しながら実行していきます。事前に翻訳作業が必要なく、コードをそのまま実行することができます。

かたやコンパイラ言語は、あらかじめコードを全て機械語に翻訳し、実行時はこの翻訳された状態のもので処理します。そのため実行速度が速く、また翻訳時にエラーを事前に検出することができます。翻訳することをコンパイル、翻訳するプログラムをコンパイラと言います。

動的型付けと静的型付け

JavaScriptは動的型付け言語であるのに対し、TypeScriptは静的型付け言語です。動的型付けは、プログラムを実行する時に変数などのデータに型を付けて、型の整合性をチェックします。そのためコードを書く際は、型の宣言をする必要がありません。

let foo = 'abc';
let bar = 123;

かたや静的型付けは、プログラン実行前にあらかじめ変数などのデータに与えられた型に対して、型の整合性をチェックします。コードを書く際は、型の宣言を予めしておく必要があります。

let foo: string = 'abc';
let bar: number = 123;

クラスの利用

JavaScriptはES5以前では、クラスという概念が存在せず使うことができませんでした。そのため当時はprototypeを利用して、疑似的にクラスのようなことを行っていました。TypeScriptではJavaScriptで使うことのできなかったクラス構文を使うことができます。

ちなみに、JavaScriptもECMAScript 2015(ES6)からクラス構文が使えるようになっています。ただし、JavaScriptとTypeScriptとではアクセス修飾子など、書き方が若干異なる部分があります。

TypeScriptのメリット・デメリット

TypeScriptでは次のようなメリット・デメリットがあります。

メリット：

デメリット：

メリット

型の事前チェック

静的型付けということもあり、コンパイル時に事前に型のチェックを行い、エラーがあった場合は即時に知らせてくれます。

ちなみにVisual Studio Codeなどのエディター・IDEで開発を行うことで、開いているファイル内のコードを、リアルタイムでチェックし、エラーを即時に知らせてくれるアプリケーションを利用すると便利です。

JavaScriptとの互換性

"JavaScriptとの違い"でも少し書きましたが、TypeScriptはJavaScriptの構文をほぼそのまま書くことができます。ですので、JavaScriptからTypeScriptへ移行する際も、スムーズに行うことができます。

豊富なライブラリやフレームワークの利用

JavaScriptでもライブラリやフレームワークは豊富にありますが、TypeScriptでも豊富に存在しています。もちろん、全てではないですが、JavaScriptのライブラリやフレームワークをTypeScript上で使用することもできます。

古いコードへの変換

古い環境（ブラウザーなど）に対応しない構文を使用した際、その古い環境に対応させたコードに変換することができます。例えば通常ES6で書かれたコードをIEで実行しようとすると、エラーとなり動作しませんが、これをES5に変換するようなことができます。

変換前：

const add = (x, y) => x + y;

console.log(add(1, 2));

変換後：

var add = function(x, y) {
    return x + y;
};

console.log(add(1, 2));

ちなみにある言語を別の言語へ変換することをトランスパイルと言いますが、古い環境に対応したコードへ変換することという意味も含まれています。

JSXが扱える

TypeScriptではReactではおなじみのJSXを使用することができます。この記事を書いている時点では古いですが、2015年9月16日にTypeScript 1.6でJSXに対応しました。そもそもJSXとは、JavaScirptのコードの中に、XMLのような構文を記述することができる拡張機能です。".tsx"という拡張子にすることで、JSXで動作するようになります。

const headingElement = <h1>Hello World</h1>;

TypeScript 1.6
TSConfig Reference

デメリット

コンパイルが必須

JavaScriptは単体で実行可能なのに対し、TypeScriptはそのままでは実行することができません。そのため、実行可能なJavaScriptへ変換する必要があります。

開発環境の準備

TypeScriptはコンパイルが必要ですので、変換するツールが必要になります。そのため、TypeScriptを扱うための環境を用意する必要があります。また、コードの補完機能など、より快適・効率よくするための支援ツールを利用する場合は、そのツールのインストールや設定なども行う必要があります。

学習コストの増加

JavaScriptの構文をそのまま書くことができますが、TypeScriptの構文も存在します。TypeScriptの構文を使用する場合は、学習として増加します。

コードの冗長

JavaScriptに比べてTypeScriptのコードが長くなる傾向にあります。特に型宣言は、JavaScriptにはないので、少なくとも変数や引数分は増えてしまいます。

ライブラリなどの型定義の対応

サードパーティー製のライブラリなど、型定義に対応していないライブラリを使用する場合は、対応する必要があります。対象のライブラリが@typesを持つパッケージが存在していれば、インストールして使用することができますが、存在しない場合は独自で用意する必要があります。

ドキュメントが必要になることも

TypeScriptは型に対しては型定義を行うことで、ドキュメントに近い役割をします。ただし、あくまでどんな型であるかだけですので、それがどんな役割あるいはどんな用途で使用するかなどの説明はありません。JavaScriptではJSDocというドキュメントツールを利用することが多いです。

TypeScriptにもTSDocというTypeScript用のドキュメントツールがありますので、JSDocを利用されていた場合はTSDocに置き換えることになります。ただし、TSDocは多少書き方が異なりますので注意が必要です。なお、一応TypeScriptでもJSDocを利用することはできます。

@use JSDoc
TSDoc

最後に

冒頭でも書きましたが、近年のフロントエンドの開発は、TypeScriptで開発することが多くなっています。多くは静的型付けによって品質を高めるということなのかなと感じています。品質が良くなることは当然良いことですが、デメリットも存在していることは確かです。かといって慎重になりすぎるのもよくはありませんし、食わず嫌いをするのもよくはありません。積極的に使っていって、そこから検討してもよいのではないでしょうか。