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

- システム
エンジニア - TypeScriptはMicrosoftが開発したプログラミング言語なのですね。
- プロジェクト
マネージャー - そのとおりです。今回は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でクラスを作成できます。
- システム
エンジニア - TypeScriptにも挑戦してみようと思います。
- プロジェクト
マネージャー - 今回は入門レベルでしたので、さらに勉強してぜひマスターしてください。
まとめ
いかがでしたでしょうか。
TypeScriptの入門編として、導入手順から紹介しました。
またTypeScriptをコンパイルしてJavaScriptを生成し、JavaScriptを実行する方法を紹介しました。
今回紹介したものはあくまでも入門レベルなので、もっと色々なことができます。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
数多くのエンジニアが集まります。

-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。


新着案件New Job
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万~30万円東京都品川区(大崎駅)遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万~60万円東京都港区(六本木駅)病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万~30万円東京都豊島区(池袋駅)開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万~50万円東京都豊島区(大塚駅)債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万~67万円東京都文京区(後楽園駅)PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万~55万円東京都豊島区(池袋駅)