この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
TypeScriptを始めよう
弊社はAWS構築やモバイルアプリ開発、データインテグレーションなどの業務が目立ちますが、最近ではフロントエンド開発（HTML / JavaScript / CSS）も頻繁に行なっています。特にJavaScriptについてはTypeScriptを併用した開発を行う場合が増えてきています。
そんな背景の中、気づけば置いてけぼりになりそう。ということで粛々と勉強していきたいと思います。
TypeScriptの公式サイトのチュートリアル「TypeScript in 5 minutes」は 5分でできる ので 時間はないけどとりあえず軽〜く始めてみたい！ という人にはオススメです。
やってみること
まずは初歩的なところのみに触れてみたいと思います。
- TypeScriptのコンパイルを試してみる
- TypeScriptを書くための環境を用意する（Visual Studio Code）
実行環境
今回は以下の環境で試してみます。
- macOS Mojave (10.14.1)
- Node.js (8.15.1)
- yarn (1.7.0)
- Visual Studio Code (1.33)
- TypeScript (3.4.0)
TypeScript 3.4.0 の実行環境は Node.js のバージョンが 4 ~ 9 が必須となっています。その中の最新のLTS版である 8 を使っています。
環境構築
TypeScriptのインストール
今回はお試しということでyarnを使ってグローバルにインストールします。具体的なプロジェクトなどに導入する場合は package.json に記載することとなります。
$ yarn global add typescriptyarnを使わずにNPMを使う場合は、次のコマンドになります。
$ npm install -g typescriptVisual Studio Codeのインストール
以下のページからVisual Studio Codeをインストールします。
Visual Studio CodeでTypeScriptファイルを開くと、こんな感じの環境でコーディングできます。
TypeScriptで記述したコードをコンパイルする
ts ファイルの作成とコンパイル
それでは早速コードを書いていきましょう。まずは以下を greeter.ts というファイル名で保存します。
greeter.ts
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);このコード自体にはまだTypeScript独自の書き方（つまり、型）は登場しておらず、通常のJavaScriptの記法（ECMA Script 2015）のみで書かれています。
このファイルをコンパイルするコマンドを実行してみましょう。
$ tsc greeter.tsgreeter.js というファイルが生成されます。TypeScriptファイルはブラウザで直接実行することはできませんが、コンパイルすることで、ブラウザで直接実行できるJavaScriptファイルを生成することができます。
TypeScriptの機能に触れてみる
型アノテーションを使う
greeter.ts に型を導入してみましょう。
greeter.ts
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);greeter() 関数の引数に string という記述が入りました。これを 型アノテーション と言います。このファイルのコンパイルも問題なく成功します。
$ tsc greeter.ts型が効いているか試してみましょう。greeter.ts を以下に書き換えます。
greeter.ts
function greeter(person: string) {
return "Hello, " + person;
}
let user = [0, 1, 2];
document.body.innerHTML = greeter(user);5行目を文字列ではなく配列にしています。greeter() 関数の引数はstring型を指定していますので、型違いとなります。コンパイルを実行するとコンパイルエラーが発生します。
$ tsc greeter.ts
greeter.ts:7:35 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
7 document.body.innerHTML = greeter(user);
~~~~
Found 1 error.これで greeter() 関数の引数にはstring型しかセットできなくなりました。型を入れた効果が出ていますね?
インターフェースとクラス
TypeScriptではインターフェースの機能を使うことができます。
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.innerHTML = greeter(user);このコード例では Person というインターフェースを定義し greeter() 関数の引数に指定しています。firstName と lastName を持つオブジェクトであることが定義されています。この場合、具体的な実装にはクラスなどは必要とせず、直接オブジェクトを作る場合も許容されます。
また、以下のようにJavaScript（ECMA Script 2015）の機能であるClassを使うこともできます。コンストラクタ自体はJavaScriptの機能ですが、一つ一つの引数に型を指定しています。なお public を指定することで、コンストラクタ引数がメンバーに展開されます。したがって Person で指定するインターフェースの型に適合している形になります。
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 user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);HTMLファイルに組み込む
最後に、コンパイルした greeter.js をHTMLファイルに組み込んでみましょう。
<!DOCTYPE html>
<html>
<head><title>TypeScript Greeter</title></head>
<body>
<script src="greeter.js"></script>
</body>
</html>ブラウザで開くと greeter.js が実行され、document.body.innerHTML にセットした文章が表示されます。
TypeScriptを使ってWebアプリ開発をステップアップさせよう
簡単ではありますがTypeScriptの導入を学んでみました。ここから、TypeScriptの各機能を詳細に見ていくことで、良い学びのステップを踏んでいけることでしょう。
TypeScriptの最も重要な機能は「静的型付け」です。Visual Studio Codeを使ってちょっと試してみると分かりますが、その恩恵としてコードヒントが出るほか、F12 キーを押すことで定義に飛ぶことができたりします。
どのような言語でも、型はIDEと組み合わせることで強力なパワーを発揮すると思います。TypeScriptを使いこなす上では、TypeScriptの機能だけではなく、IDE（Visual Studio Codeなど）やプラグインの機能でどのように開発効率を上げられるかも重要ですので、組み合わせて身に付けたいですね。
186
