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

プログラミング言語

公開日時: 2020-08-25 　更新日時: 2021-10-07

この記事でわかること

システム エンジニア: 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をインストールします。

~/TypeScript$ npm install -g typescript

1	~/TypeScript$ npm install -g typescript

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

~/TypeScript$ tsc -v
Version 3.9.6

1 2	~/TypeScript$ tsc -v Version 3.9.6

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

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

~/TypeScript$ tsc --init
message TS6071: Successfully created a tsconfig.json file.

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です。


// sample.ts

let message: string = "Hello World."
console.log(message);

// sample.ts

let message: string = "Hello World."

console.log(message);

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

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

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

~/TypeScript$ ls
sample.ts  tsconfig.json

1 2	~/TypeScript$ ls sample.ts tsconfig.json

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

~/TypeScript$ tsc sample.ts
~/TypeScript$ ls
sample.js  sample.ts  tsconfig.json

~/TypeScript$ tsc sample.ts

~/TypeScript$ ls

sample.js sample.ts tsconfig.json

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

~/TypeScript$ node sample.js
Hello World.
~/TypeScript$

~/TypeScript$ node sample.js

Hello World.

~/TypeScript$

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

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


// sample.ts

let message: number = "Hello World."
console.log(message);

// sample.ts

let message: number = "Hello World."

console.log(message);

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

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

~/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$ 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というファイルを新規作成します。


// sample2.ts

function sumSample(a: number, b: number) : number {
return a + b;
}
let answer: number = sumSample(2, 3);
console.log(answer);

// sample2.ts

function sumSample(a: number, b: number) : number {

return a + b;

}

let answer: number = sumSample(2, 3);

console.log(answer);

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

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

~/TypeScript$ tsc sample2.ts
~/TypeScript$ node sample2.js
5
~/TypeScript$

~/TypeScript$ tsc sample2.ts

~/TypeScript$ node sample2.js

~/TypeScript$

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

クラスの作成

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


// 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);

// 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);

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

~/TypeScript$ tsc sample3.ts
~/TypeScript$ node sample3.js
Taro
30
~/TypeScript$

~/TypeScript$ tsc sample3.ts

~/TypeScript$ node sample3.js

Taro

~/TypeScript$

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

システム エンジニア: TypeScriptにも挑戦してみようと思います。

プロジェクト マネージャー: 今回は入門レベルでしたので、さらに勉強してぜひマスターしてください。

まとめ

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

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

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社夢真ビーネックスグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

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

TypeScript入門

TypeScriptとJavaScriptとの違い

準備

TypeScriptでHello World

関数の作成

クラスの作成

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

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

TypeScript入門

TypeScriptとJavaScriptとの違い

準備

TypeScriptでHello World

関数の作成

クラスの作成

まとめ

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

新着案件New Job

開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク

遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク

病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク

開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク

債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務

PMO/東京都豊島区/【WEB面談可】/在宅勤務

関連記事Related Posts