Overview

TypeScript を触ったことがなかったので、TypeScript 公式ページの TypeScript Tooling in 5 minutes を実際に試しながら、挙動や機能について紹介したいと思います。

What's TypeScript

TypeScript (TS) は Microsoft によって開発されたオープンソースのプログラミング言語 ( 2012年10月1日発表 ) であり、JavaScript に対して、静的型付けとクラスベースオブジェクト指向を加えたスーパーセットです。

TypeScript 公式ページ

(1) JavaScript and More
TypeScript は JavaScript に構文を追加して、エディターとの密接な統合をサポートします。
エディター上の早い段階でエラーをキャッチします。

(2) A Result You Can Trust
TypeScript コードは JavaScript へ変換され、JavaScript が動作する場所であればどこでも (ブラウザ、Node.js、アプリ) 実行することが可能です。

(3) Safety at Scale
TypeScript は JavaScript を理解し、型インターフェースを使用して、
あなたに素晴らしいツールを提供します。

Development Environment

今回の検証環境は、以下の通りです。

開発PC ( Windows 10 Pro )
- Visual Studio Code
- Node.js 16.13.2 (Stable)
  - npm 8.1.2
    - TypeScript 4.5.5

※ node.js のバージョン管理は nvm を使ってます。

という訳で、チュートリアルを上から順に試していきたいと思います。
TypeScript でシンプルな Web アプリケーションを構築してみましょう。

1. TypeScript をインストールする

TypeScript をプロジェクトで利用可能にするためには大きく2つの方法があります。

(1) npm 経由でインストールする
(2) Visual Studio の TypeScript プラグインとしてインストールする

※ Visual Studio 2017, Visual Studio 2015 Update 3 では、標準で TypeScript サポートされています。しかし、TypeScript のコンパイラー tsc は含まれていません。もし、Visual Studio で TypeScript をインストールしなかった場合は、こちらからダウンロードすることが可能です。

[ npm を使用する場合 ]

> npm install -g typescript

2. 初めての TypeScript ファイルを作成する

好きなエディターを開き、以下の JS コードを greeter.ts として保存します。

greeter.ts

function greeter(person)
  return "Hello, " + person;
}

let user = "Futo Horio";

document.body.textContent = greeter(user);

3. コードをコンパイルする

.ts 拡張子を使用しました。しかし、このコードは JavaScript そのものです。
既存の JavaScript アプリから直接コピーして、貼り付けることができます。

コマンドラインで、TypeScript コンパイラーを実行します。

tsc greeter.ts

コンパルが正常終了すると、さきほどと同じJSコードを含む、greeter.js が生成されます。

greeter.js

function greeter(person) {
    return "Hello, " + person;
}
var user = "Jane User";
document.body.textContent = greeter(user);

これで TypeScript が提供するいくつかの新しいツールを利用できるようになりました。
次に示すように、greeter 関数の引数である person に文字列型 (: string) を追記します。

greeter.ts

function greeter(person: string) {
  return "Hello, " + person;
}

let user = "Jane User"

document.body.textContent = greeter(user);

再度、greeter.ts をコンパイルしてみると、
出力はさきほどと変わらず、同じ JavaScript コードが生成されていました。

4. タイプアノテーション

TypeScript におけるタイプアノテーションは、関数もしくは変数の意図されたコントラクトを記録するための手軽な方法です。以下のコード (例) の場合、greeter 関数は単一の引数 (文字列) を伴って呼び出されることを意図しています。代わりに、greeter 関数を呼び出す際の引数を文字列から配列に変更してみてください。

この状態で、再度コンパイルをしてみます。

Argument of type 'number[]' is not assigable to parameter of type 'string'.

同様に、greeter 関数を呼び出す際の引数をすべて削除してみてください。

TypeScript は、予期していない数 (個数) の引数を用いて、この関数を呼出したことを通知します。いずれの場合も、TypeScript は、コードの構造と提供するタイプアノテーションの両方に基づいて静的分析を提供します。

※ エラーが発生しているにも関わらず、以前 greeter.js ファイルが生成されていることに注意してください。あなたのコードにエラーがある場合でさえ、TypeScript を使用することが可能です。ただし、この場合、TypeScript はコードが期待どおりに実行されていないことを警告します。

4. インターフェース

サンプルをさらに発展させましょう！ここでは firstName, lastName ２つのフィールドを持つオブジェクトを記述するためにインターフェースを使用します。TypeScript では、内部構造 ( フィールド ) に互換性がある場合、2つの型に互換性があります。(といっても、初めての方にはなんのことだか分かりづらいと思うので、一旦読み飛ばして、下のコードを確認してみてください。) これによって、明示的な implements 句を使用せずに、インターフェースに必要な構造を取り入れるだけで、インターフェースを実装することができます。

greeter.ts

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
 return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.textContent = greeter(user);

5. クラス

最後に、クラスを使用してサンプルを拡張しましょう。
TypeScript は、クラスに基づくオブジェクト指向プログラミングのサポートなど、
JavaScript の新しい機能をサポートしています。

ここでは、コンストラクタと新しい Public Field を持つ Student クラスを作成します。
クラスとインターフェースがうまく連携し、プログラマーが適切な抽象化レベルを決定できることに注意してください。

また、コンストラクタの引数で Public を使用しているのは、
その名前でプロパティを自動生成するための省略形です。

greeter.ts

class Student {
  fullName: string;
  constructor(
    public firstName: string,
    public middleInitial: string,
    public lastName: string
  ) {
    this.fullName = firstName + " " + middleInitial + " " + lastName;
  }
}

interface Person {
  firstName: string;
  lastName: string;
}

function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName;
}

let uesr = new Student("Jane", "M.", "User");

document.body.textContent = greeter(user);

tsc greeter.ts を実行しみてると..

greeter.js

var Student = /** @class */ (function () {
    function Student(firstName, middleInitial, lastName) {
        this.firstName = firstName;
        this.middleInitial = middleInitial;
        this.lastName = lastName;
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
    return Student;
}());
function greeter(person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.textContent = greeter(user);

生成された JavaScript コードが以前のコードと同じであることが分かります。

6. TypeScript アプリの実行

greeter.html ファイルを作成します。

greeter.html

<!DOCTYPE html>
<html>
  <head>
    <title>TypeScript Greeter</title>
  </head>
  <body>
    <script src="greeter.js"></script>
  </body>
</html>

Web ブラウザで greeter.html を開いて、
最初のシンプルな TypeScript Web アプリケーションを実行してください。

Hello, Jane User と表示されれば、無事動いています！

おわりに

というわけで、TypeScript の初心者向けのチュートリアルを試してみました。TypeScript をインストールするために、Node.js バージョン管理ツール (nvm) からv16.13.2 (推奨) を入れたんですが、なぜか npm モジュールが含まれてなかった。(再インストールしたら npm が正常にインストールされてた) のとか、TypeScript コンパイラ ( tsc ) を使って TS の Interface とか Class のコンパイルをやってみて、ドキュメントを眺めている時よりも理解が深められた気がする.. ので、今年は積極的に手を動かしながら技術を習得したい。

Overview

What's TypeScript

Development Environment

Contents

1. TypeScript をインストールする

2. 初めての TypeScript ファイルを作成する

3. コードをコンパイルする

4. タイプアノテーション

4. インターフェース

5. クラス

6. TypeScript アプリの実行

おわりに