.net column
.NET開発者のためのブログメディア

TypeScriptの使い方を紹介|静的型付けやクラス作成を行いましょう

 
TypeScriptの使い方を紹介|静的型付けやクラス作成を行いましょう
基本情報技術者試験の試験対策はこちら>>
SE
TypeScriptはMicrosoftが開発したプログラミング言語なのですね。
PM
そのとおりです。今回はTypeScriptの基本的なことについてご紹介いたしましょう。

TypeScript入門


今回は、TypeScriptの入門編です。
TypeScriptとは、Microsoftによって開発されたプログラミング言語です。
JavaScriptを拡張しており、「静的型付け」・「クラスが作成できる」等の特徴があります。
JavaScriptライブラリもTypeScriptから使用でき、互換性も高いです。
TypeScriptの入門編に興味のある方はぜひご覧ください。

TypeScriptとJavaScriptとの違い

TypeScriptの入門として、TypeScriptとJavaScriptとの違いから説明します。

・JavaScriptは動的型付け、TypeScriptは静的型付け
先ほど説明したように、TypeScriptは「静的型付け」です。
静的型付けとは、変数のデータ型を事前に決めることができることです。
こうすることで、コンパイルする時点でエラーが分かります。
つまり、エラーを未然に防ぐことができます。

一方、JavaScriptは「動的型付け」です。
動的型付けとは、プログラムの実行時にデータ型が自動で決まることです。
この場合、実行してみて初めてエラーが分かります。

・TypeScriptではクラスが作成できる
クラスとはソースコードを効率的に記述するための仕組みです。
TypeScriptファイルではクラスが簡単に定義でき、ソースコードも読みやすくなります。

準備

TypeScript入門編として、TypeScriptを使うための準備をします。
今回は、JavaScriptをデスクトップで使用できるNode.jsを使用します。
Node.jsをインストールすると、パッケージ管理ツールのnpm(Node Package Manager)がインストールされます。
※ここでは、Node.jsをインストールした前提で進めます。

まず、TypeScriptをインストールします。
コマンドプロンプトから以下のコマンドを実行し、TypeScriptをインストールします。

インストールが成功したかどうか、tscコマンドで確認してみます。

バージョンが表示されたので、正しくインストールできていることが分かります。

次に、コンパイルのための設定ファイルを作成します。
コマンドプロンプトから以下のコマンドを実行してください。

カレントディレクトリにtsconfig.jsonが作成されました。
これでTypeScriptを使う準備は完了です。
次の章で、簡単なTypeScriptを作成してみます。

TypeScriptでHello World

入門編としてよくある、Hello Worldを表示するプログラムをTypeScriptで作成してみましょう。

ここでは、sample.tsというファイルを新規に作成します。
※TypeScriptの拡張子は.tsです。

“string”の部分で明示的に型を指定しています(「静的型付け」)。
ここがJavaScriptと違うことろです。

TypeScriptの代表的な型には、以下があります。
・String: 文字列型
・Number: 数字型
・Boolean: true または false
・any:全ての型を許容する。事実上JavaScriptと同表記になる
・null:JavaScriptのnull型と同じ

では、TypeScriptをコンパイルします。
現在、カレントディレクトリには以下のファイルがある状態です。

コンパイルするには、tscコマンドの後に.tsファイルを指定します。
コンパイルに成功すると、.jsファイルが作成されます。

作成された.jsファイルを実行するには、nodeコマンドを使用します。

実行すると、”Hello World.”が表示されることが分かります。

入門編なので、コンパイルエラーが発生するとどうなるか確認してみましょう。
先ほどのsample.tsを以下のように編集します。

文字列なのに、Number型を指定しています。

この状態でコンパイルしてみましょう。

コンパイルエラーが発生することが分かります。
TypeScriptは静的型付けなので、事前にエラーが分かります。

関数の作成

TypeScript入門編として、関数を作成してみます。
sample2.tsというファイルを新規作成します。

関数の引数、戻り値をnumberで定義しています。

コンパイルし、実行してみます。

実行すると、正しい計算結果が表示されることが分かります。

クラスの作成

TypeScript入門編として、クラスを作成してみます。
sample3.tsというファイルを新規作成します。

コンパイルして実行してみます。

このように、TypeScriptでクラスを作成できます。

SE
TypeScriptにも挑戦してみようと思います。
PM
今回は入門レベルでしたので、さらに勉強してぜひマスターしてください。

まとめ

いかがでしたでしょうか。
TypeScriptの入門編として、導入手順から紹介しました。
またTypeScriptをコンパイルしてJavaScriptを生成し、JavaScriptを実行する方法を紹介しました。

今回紹介したものはあくまでも入門レベルなので、もっと色々なことができます。
ぜひご自身でソースコードを書いて、理解を深めてください。


.NET分野でのキャリアアップをお考えの方は、現在募集中の求人情報をご覧ください。

また、直接のエントリーも受け付けております。

エントリー(応募フォーム)

Search

Popular

reccomended

Categories

Tags