.NET開発者のためのブログメディア
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をインストールします。
|
1 |
~/TypeScript$ npm install -g typescript |
インストールが成功したかどうか、tscコマンドで確認してみます。
|
1 2 |
~/TypeScript$ tsc -v Version 3.9.6 |
バージョンが表示されたので、正しくインストールできていることが分かります。
次に、コンパイルのための設定ファイルを作成します。
コマンドプロンプトから以下のコマンドを実行してください。
|
1 2 |
~/TypeScript$ tsc --init message TS6071: Successfully created a tsconfig.json file. |
カレントディレクトリにtsconfig.jsonが作成されました。
これでTypeScriptを使う準備は完了です。
次の章で、簡単なTypeScriptを作成してみます。
TypeScriptでHello World
入門編としてよくある、Hello Worldを表示するプログラムをTypeScriptで作成してみましょう。
ここでは、sample.tsというファイルを新規に作成します。
※TypeScriptの拡張子は.tsです。
|
1 2 3 4 5 6 |
// sample.ts let message: string = "Hello World." console.log(message); |
“string”の部分で明示的に型を指定しています（「静的型付け」）。
ここがJavaScriptと違うことろです。
TypeScriptの代表的な型には、以下があります。
・String: 文字列型
・Number: 数字型
・Boolean: true または false
・any：全ての型を許容する。事実上JavaScriptと同表記になる
・null：JavaScriptのnull型と同じ
では、TypeScriptをコンパイルします。
現在、カレントディレクトリには以下のファイルがある状態です。
|
1 2 |
~/TypeScript$ ls sample.ts tsconfig.json |
コンパイルするには、tscコマンドの後に.tsファイルを指定します。
コンパイルに成功すると、.jsファイルが作成されます。
|
1 2 3 |
~/TypeScript$ tsc sample.ts ~/TypeScript$ ls sample.js sample.ts tsconfig.json |
作成された.jsファイルを実行するには、nodeコマンドを使用します。
|
1 2 3 |
~/TypeScript$ node sample.js Hello World. ~/TypeScript$ |
実行すると、”Hello World.”が表示されることが分かります。
入門編なので、コンパイルエラーが発生するとどうなるか確認してみましょう。
先ほどのsample.tsを以下のように編集します。
|
1 2 3 4 5 6 |
// sample.ts let message: number = "Hello World." console.log(message); |
文字列なのに、Number型を指定しています。
この状態でコンパイルしてみましょう。
|
1 2 3 4 5 6 7 8 9 10 |
~/TypeScript$ tsc sample.ts sample.ts:3:5 - error TS2322: Type '"Hello World."' is not assignable to type 'number'. 3 let message: number = "Hello World." ~~~~~~~ Found 1 error. ~/TypeScript$ |
コンパイルエラーが発生することが分かります。
TypeScriptは静的型付けなので、事前にエラーが分かります。
関数の作成
TypeScript入門編として、関数を作成してみます。
sample2.tsというファイルを新規作成します。
|
1 2 3 4 5 6 7 8 9 |
// sample2.ts function sumSample(a: number, b: number) : number { return a + b; } let answer: number = sumSample(2, 3); console.log(answer); |
関数の引数、戻り値をnumberで定義しています。
コンパイルし、実行してみます。
|
1 2 3 4 |
~/TypeScript$ tsc sample2.ts ~/TypeScript$ node sample2.js 5 ~/TypeScript$ |
実行すると、正しい計算結果が表示されることが分かります。
クラスの作成
TypeScript入門編として、クラスを作成してみます。
sample3.tsというファイルを新規作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
// sample3.ts class Person { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } } const person = new Person('Taro', 30); console.log(person.name); console.log(person.age); |
コンパイルして実行してみます。
|
1 2 3 4 5 |
~/TypeScript$ tsc sample3.ts ~/TypeScript$ node sample3.js Taro 30 ~/TypeScript$ |
このように、TypeScriptでクラスを作成できます。
- SE
- TypeScriptにも挑戦してみようと思います。
- PM
- 今回は入門レベルでしたので、さらに勉強してぜひマスターしてください。
まとめ
いかがでしたでしょうか。
TypeScriptの入門編として、導入手順から紹介しました。
またTypeScriptをコンパイルしてJavaScriptを生成し、JavaScriptを実行する方法を紹介しました。
今回紹介したものはあくまでも入門レベルなので、もっと色々なことができます。
ぜひご自身でソースコードを書いて、理解を深めてください。
