【TypeScript入門】TypeScriptの基本をわかりやすく解説！導入メリットやJavaScriptとの違いとは
TypeScriptとは
TypeScriptはWebアプリケーション開発分野における将来性の高さから、急速に注目を集めている比較的新しいプログラミング言語になります。
Google社では既に社内開発の標準言語指定されるなど、近い将来の普及がほぼ確実視されています。
そんなTypeScriptの基礎知識から導入メリット、JavaScriptとの違いについてまとめました。
TypeScriptの基礎知識
TypeScriptはマイクロソフト社によって開発されたプログラミング言語で、基本的にはJavaScriptをベースに作られています。
その上でJavaScriptのいくつかの欠点を補うようなアップデートが行われており、今後のWebアプリケーション開発、特に大規模開発分野において注目度が高まっている言語です。
マイクロソフト社は過去、C++にクラスの概念などを取り入れたC#を開発、リリースしました。C#は現在多くのWeb、ゲーム業界などで主流となり使用されています。
TypeScriptについても、マイクロソフト社がJavaScriptに新たな概念を取り入れ、より組織だった開発がスムーズとなるよう進化したという意味では、C#と似た位置づけにあると考えることができます。
C#が普及したからといってTypeScriptも必ず普及するというものではありませんが、今後JavaScriptに替わって普及する可能性も高く、知っておいて損は無い言語といえるでしょう。
JavaScriptとの違い
TypeScriptは概ねJavaScriptと似ていますが異なる部分もあり、その差こそがTypeScriptの基本コンセプトにあたります。
大きく2つの特徴があり、①静的型付けであること、②クラスベースオブジェクト指向であることがポイントです。
静的型付け言語である
最大の特徴として、JavaScriptが動的型付けであるのに対し、TypeScriptは型を宣言してからコーディングする静的型付けの言語になります。
そのためJavaScriptに比べると次のようなメリットがあります。
- コンパイル時にエラーとなるため実行前に型の不整合を検知できる
- IDE（統合開発環境）でエラー判定されるためコーディング中にミスに気づくことができる
- 定義が明確となることで第三者が見ても分かりやすく、リファクタリングもしやすい
エラーを事前に検知できコードが煩雑になるのを防げるため、特に大人数で開発を行う大規模開発において非常に高い生産性を発揮することができます。
クラスベースオブジェクト指向である
もうひとつの特徴としてTypeScriptでは、JavaScriptで不可能だったクラスの生成が可能となっています。
- これまで冗長になっていた記述を簡略化することができる
- クラス単位でfunctionを管理することで大勢の開発でも効率化、統一化することができる
クラスを取り入れることで大規模開発において飛躍的に生産性を上げることができます。
静的型付けと同様、大人数での開発にフォーカスしたアップデートとなります。
また、JavaScriptの標準であるECMAScript言語標準では、将来的にクラスベースオブジェクト指向を取り入れる提案が行われています。
TypeScriptはこの潮流を重視し、先んじてクラスベースオブジェクト指向を搭載しているという背景があります。
そのため将来的にJavaScriptにクラスベースオブジェクト指向が取り入れられた際の互換性もカバーしていることになります。
JavaScriptとの互換性について
TypeScriptはJavaScriptに無い機能を備えている一方で、JavaScriptとの互換性の高さが大きな特徴となっています。
コンパイルするとJavaScriptのコードへと変換され、またJavaScriptのライブラリがそのまま使用できるなど互換性が非常に高くなっています。
さらに、静的型付けとなるTypeScriptですが、コンパイル時のオプションにより自動で型推測をすることが可能です。
any型として定義することで既存のJavaScriptコードをそのまま移行することもできます。
他のJavaScript変換言語と比べてもコンパイル前後のコードで差が少なく、JavaScript習得者にとっては扱いやすいでしょう。
TypeScriptの導入メリット
これまで挙げた特徴から、TypeScriptを導入するメリットについてまとめてみます。
- JavaScriptより短く読みやすいコードが書ける
- JavaScriptとの互換性が高い
- 型を宣言するためエラーを未然に防げる
- 大規模開発において高い生産性を発揮する
大規模開発が主となるGoogleでは先んじて標準言語設定されており、大規模でなくてもエラー検知の安全性などから導入企業が増えています。
規模に関わらず、組織として開発を行う上では効率や管理のしやすさといった面でメリットが大きいといえるでしょう。
導入における注意点
注意点としては、TypeScriptは新しい言語なので日本語情報が少なく、構造も難しいため他言語に比べると学習が困難といえます。
JavaScript習得者の場合理解しやすいと思いますが、新規で一からTypeScriptを学ぶ場合の学習ハードルは少し高くなるでしょう。
また、将来性は高いものの現時点で他言語より案件が多いわけではありません。ITエンジニア観点で見た案件獲得の即効性という意味では注意が必要です。
TypeScriptの導入方法
TypeScriptの導入は非常にシンプルでハードルは低くなっています。
Visual Studioで開発する
TypeScriptの開発者であるマイクロソフトが提供しているVisual Studioでは、標準でTypeScriptをサポートしており、コンパイラーやデバッガーも搭載されています。
IDEを用いることで型宣言をしていることの恩恵を最大限受けることができ、効率化を図ることができます。一方、MAC OSユーザは利用できないなどの制限があります。
コマンドラインで開発する
TypeScriptをサーバーサイドで実行することも可能です。サーバーサイドでの実行はNode.jsがセットアップされていれば、npmからコマンドを実行しインストールすることで利用することができます。
Webブラウザ上で開発する
TypeScript公式サイトのPlaygroundを使うなど、Web上で記述からコンパイルまで完結させることも可能です。
TypeScriptの記述方法
それでは実際にTypeScriptの記述方法について見てみましょう。
型宣言について
TypeScript最大の特徴となる型宣言について見ていきましょう。TypeScriptでは基本的に以下のような型宣言が使用されます。
- number型：整数や少数などの定義分けは不要
- string型：文字型
- boolean型：真偽型
- any型：全ての型を許容。事実上JSと同表記になる
- null型：JSのnull型と同じ
ポイントとしては数字は全てnumber型となるため他言語のように整数、少数などに細分化して管理する必要は無いとことです。
またany型は全ての型を許容するためコンパイル時にエラーとなることがありません。
ただし、any型として定義した変数に想定外の値が入った場合、実行するまで検知することができなくなります。
any型は事実上、静的型付けとしてのルールを一時的に無効化する宣言となり、多用してしまうとTypeScriptの長所そのものが失われてしまうため注意が必要です。
型宣言の厳格さを調節可能
TypeScriptでは型の厳格さを調整することができます。
tsconfig.json内のコンパイルオプションでstrictオプションをtrueとすれば静的型条件を堅くすることができます。
TypeScriptの記述サンプル
TypeScriptの簡単な記述サンプルを見てみましょう。
サンプル①基本の型宣言
- function getMultiple(a: number, b: number) : number {
- return a * b;
- }
- var answer: number = getMultiple(10, 7);
このように、ほとんどJavaScriptと記述は変わりませんが、: numberで型定義があるようにアノテーション型を用いて変数の後に型の宣言を行うのがTypeScriptです。
変数はvar 変数名: 型名、関数はfunction 関数名 (引数名: 引数の型) : 関数の戻りの型 {}で表します。
サンプル②コンパイルエラーとなるケース
- function getMultiple(a: number, b: number) : number {
- return a * b;
- }
- var answer: number = getMultiple(“10”, “7”);
サンプル②のケースでは、number型で定義した変数に文字列（string型）を代入しようとしています。
avaScriptなら関数が実行されNaNが返却されますが、TypeScriptの場合はコンパイル時にエラーとなります。
サンプル③any型を用いるケース
- function getMultiple(a: any, b: any) : any {
- return a * b;
- }
- var answer: any = getMultiple(“10”, “7”);
サンプル③では型をany型として宣言しています。
この場合コンパイルは正常に行われますが、実行時にNaNが返却されます。つまり、型を宣言せずコーディングしたJavaScriptと全く同じ挙動となります。
型のチェックはあくまでもコンパイル時に行われ、コンパイル後に生成されるのはTypeScriptが変換されたJavaScriptのコードです。
そのためany型を使った場合は実行時まで型の不一致がわからなくなってしまうため注意が必要です。
サンプル④型推論を用いて宣言を省略する
- function getMultiple(a: number, b: number) : number {
- return a * b;
- }
- var answer = getMultiple(10, 7);
TypeScriptでは宣言せずとも明らかな場合、型推論を用いてアノテーションを省略することもできます。
サンプル④の場合、number型とnumber型を掛け算して得られた値を返却値としているため、変数answerは宣言せずともnumber型であると認識されます。
動的型付けのJavaScriptライブラリ参照について
TypeScriptはJavaScriptと高い互換性を持ちライブラリをそのまま参照することができます。
一方で、JavaScriptが動的型付け言語であるためライブラリには型情報が保持されていません。
アンビエント宣言を用いて型情報を記述することも可能ですが、都度記述するのは効率的ではありません。
型宣言ファイルを利用可能
TypeScriptでは、.d.ts拡張子で定義されるファイルを型定義ファイルとして読み込むことができます。
型定義ファイルは自分で作っても良いですが、既に型定義をまとめたファイルがgithub上で公開されています。これらを利用することで手間無くJavaScriptライブラリの参照が可能となっています。
TypeScriptが必要なエンジニアとは
サンプルを見ても分かるように、TypeScriptは基本的にJavaScriptに準拠しているためJavaScriptの知識があれば可読性は高い言語であることが分かります。
そのためJavaScriptに精通しているエンジニアであれば最小の努力で新たな武器をひとつ手にすることができるでしょう。
最近では、大規模案件を中心にJavaScriptとtypeScriptを併用した開発案件が多くなってきています。
そのため現状JavaScriptを利用しており、今後選択肢として大規模プロジェクトでのWebアプリケーション開発に携わる可能性のあるエンジニアであれば、TypeScriptの習得は非常に意義のあるものだと考えられます。
まとめ
いかがだったでしょうか。
TypeScriptは将来性の高さから、今後も注目の言語として扱われていくでしょう。
JavaScriptとの互換性も高いため、新しいプログラミング言語の中では非常におすすめできる言語といえるでしょう。
