TypeScriptを始めよう
TypeScriptはMiroSoft社が開発したオープンソースのプログラミング言語になります。Javascriptにデータタイプの制限を加え、開発時に起こりうるバグを防ぐために作られました。 TypeScriptを始める前に知っておくべきこと TypeScriptはJavaScriptにコンパイルできる言語ですので基本のJavaScriptが理解できていないとその良さも生かせません。 まずTypeScriptを学ぶ前に下記のJavaScriptの基本だけは知っておくようにしましょう。 TypeScriptってなに? JavaScriptを使い始めると色々な部分で変だな、ふにゃふにゃしているなと思う事がありませんか?特に変数にデータタイプを指定する必要がないので下記のようなコードが実行できてしまいます。 これはJavaScriptはDynamically Typed Language(動的型付け言語)であるからです。 ブラウザがJavaScriptコードを実行する際に勝手にデータタイプを変更してしまうので、できるだけ正解に近いものを返してくれるようになります。 これは使い勝手は良いですが、バグが発生する原因になりがちです。 これらの問題を解決するために作られたのがTypeScriptです。TypeScriptではデータタイプを指定する必要があるので静的型付け言語(static typing)といえます。 静的型付け言語 動的型付け 言語 TypeScriptC/C++C#JavaGoScalaSwift JavaScriptPythonRubyPHP メリット コンパイル時にエラーが出てくれるエラーが事前にわかるのでコンパイル時にデバッグができます。例:・整数型変数なのに文字列を代入しようとしてる・型の違うデータで関数を呼ぼうとしている 記述量が大幅に減るデータ型の記載が不要になるので、書くコード量が減る。 比較的簡単にプログラムが書けるデータタイプを気にしなくてよい。 TypeScriptはJavaScriptのすべての機能を持つ以上に開発時に変更点のフィードバックが分かるのでデベロッパーの強い味方といえます。 なのでVSCodeなどのテキストエディタで.tsのタイプスクリプトファイルの変数のデータタイプを変更しようとすると下記のようにエラーがでます。 TypeScriptの難点 ①TypeScriptをJavaScriptコードにコンパイルしないといけない。→TypeScriptのコードはブラウザが理解できないのでJavaScriptのコードに変換(コンパイル)してあげないといけないです。 ②コードの制限が細かい。→JavaScriptと比べてコードを書く量が増え、データタイプをいちいち宣言しないといけません。スケールの小さいプロジェクトの場合はJavaScriptだけで対応することも検討すべきです。 TypeScriptのプロジェクトを作成する TypeScriptを使用するにあたりNode.jsを使います。まずは使用するマシンにNode.jsがインストールされていることを確認しましょう。 つぎにtypescriptのライブラリをグローバルにインストールします。 テキストエディタ テキストエディタはVSCodeをお勧めします。 ではテキストエディタを開いて、.tsファイル(TypeScriptファイル)を作成しましょう。今回はindex.tsファイルを作成してみます。 ちなみに.tsファイルにはタイプを指定しない普通のJavaScriptを書くこともできます。 ではターミナルを開いて.tsファイルをコンパイルしてみましょう。 VSCodeのターミナルが開けたらtscのコマンドを使ってJavaScriptファイルにコンパイルしてみましょう。 そうすると新しく.jsファイルが作成されたことが確認できます。 データタイプの指定 TypeScriptでデータタイプを指定するには変数の宣言の際に:タイプの形式で記載することができます。 では、再度.tsファイルをコンパイルしてみます。中身を見てみましょう。 変数のletがvarになっていることが分かりますね。これはコンパイル時にES5(ECMAScript)の基準に従って古いブラウザでも実行できるファイルに変換しているからです。なのでアロー関数を使った場合もES5の基準に従って変換してもらえます。 もしES6の基準で.tsファイルをコンパイルしたい場合は–targetフラグを使用してください。 TypeScriptのコンフィグファイル ではターミナル(コマンドプロンプト)から下記のコマンドでTypeScriptのコンフィグファイルを作成してみましょう。 コマンドの実行後にtsconfig.jsonファイルが作成されました。 この中身を見てみると多くのコンフィグがコメントアウトされています。これを必要に応じて設定することができます。説明はコンフィグの右側にあります。ではtargetフラグを見てみます。 では中身を消して””だけ残してみましょう。その後にカーソールが””の中にある際に、コントール+スペースバーを押すとすべてのオプションを見ることができます。 そのほかに、rootDir、outDirで.tsファイルを読み込むディレクトリ、書き出し先を設定できます。これでファイルを指定せずにコンパイルを実行することができます。 また“removeComments”: trueに設定することで.jsファイルにコメントを除くことができます。これは便利ですね。 “noEmit”: trueを設定すると、エラーがある際にはコンパイルが実行されません。 また、TypeScriptに慣れた時点でコンフィグ設定を学ぶことになるので、現段階ですべてを理解する必要はありません。 では、次回以降にTypeScriptのデバッグの仕方、詳しい書き方を説明していきたいと思います。 お疲れ様でした。