TypeScript 入門
― 素のJavaScriptとはさようなら! ―

はじめに

勉強会コミュニティ & 宿泊イベント
Code in 定山渓温泉

TypeScriptとは

TypeScript はプログラミング言語

TypeScript ファイル (拡張子 .ts)
TypeScript コンパイラ (tsc コマンド)
JavaScript ファイル (拡張子 .js)
※"コンパイラ"(翻訳機)ではなく、"トランスパイラ"(変換器)と呼ばれることもある。

なにがうれしいの?
素の JavaScript だと...

早く作れない
早く変更できない
早く直せない
早く帰れない...
https://www.pakutaso.com/

新しい言語で対抗しよう!
• より高度・高級な仕様・機能をもつプログラミ
ング言語を設計・開発!
• この高機能言語でプログラムを書き、それを機
械で JavaScript に翻訳すれば、JavaScript の弱
点を克服できる!
☞ その "高機能言語" が TypeScript

このコードと、

このコード、どっちがいい?

しかも、このコード、バグがあります。

見つけられました?
"input.value"
の誤り
"this." が抜け
ている

先輩たち
• JavaScript を生成する高級プログラミング言語
の先輩たち。
CoffeScript
Haxe
Dart
JSX
etc...
Scala.js

他と比べて TypeScript の特徴は?
• 元の TypeScript コードと 1 対 1 で対応するよ
うな、読みやすい JavaScript を生成します。
• jQuery や AngularJS といった、JavaScript で
書かれたライブラリも普通に使えます。
• アロー関数や class 構文など、現代の
JavaScript では率直に書けない構文を提供しま
すが、この構文が、来る ECMAScript 6 の構文
を先取り。
• TypeScript を学んだ経験が ES6 にも概ね活かせる!

TypeScript の開発環境

TypeScript コンパイラ
• TypeScript コンパイラは、JavaScript で書かれ
ています。
• TypeScript Playground では、Webブラウザ上で
TypeScript コンパイラが動作しています。
• 通常は Node.js 上で TypeScript コンパイラを
実行・使用します。

TypeScript コンパイラの
インストール
• JavaScript の実行エンジンである Node.js と、
そのパッケージマネージャ "npm" をお使いの
PC にインストール。
• TypeScript コンパイラは、Node.js のパッケー
ジとして公開されているので、npm によって
インストールします。

$ sudo apt-get install git
$ sudo apt-get install nodejs
$ sudo apt-get install nodejs-legacy
$ sudo apt-get install npm
$ sudo npm install -g typescript@1.4
※2015年5月時点、Uuntu Desktop 14.10 上での例。
TypeScript v.1.5はまだAlphaバージョンだったのでv.1.4を明示的に指定。
プロジェクトごとに使用するTypeScript コンパイラのバージョンが違
う場合に備え、-g なしでプロジェクトにインストールすることも。

TypeScript コンパイラの使い方
• TypeScript コンパイラは、"tsc" というコマン
ドです。
$ echo console.log('Hello, World.') > hello.ts
$ tsc hello.ts
$ ls -l
hello.ts
hello.js
$ nodejs hello.js
Hello, World.

Demonstration
tsc コマンドによる TypeScript から
JavaScript へのコンパイル

実際には自動タスクツールと組み
合わせてウォッチ&コンパイル
※詳しくは「grunt typescript」や「gulp typescript」などで検索して調べてみよう。

エディタ

TypeScript を書くためのエディタ
• 著名なエディタであれば大抵、
TypeScript を書くためのアドイ
ンが流通しているようです。
• そのようなアドインを追加した
エディタであれば何でもよいで
しょう。
• もちろん統合開発環境(IDE)もオス
スメ
SublimeText
Emacs
Vim
Brackets
etc...

TypeScript を書くためのエディタ
• なお、TypeScript 用の支援がないエディタは、
せっかくの型付言語の利点が魅力半減！
オススメしません...。

リッチ系をピックアップ

Visual
Studio
• 利用資格に制限があるものの、無償
で使える Community Edition がある。
• TypeScript のみならず、HTML や
CSS など Web アプリ開発全般に強
い。
• 良くも悪くもオールインワンパッ
ケージ。Visual Studio をインストー
ルすれば TypeScipt 環境も出来上が
る。
• Windows OS 上でしか動作しない。

WebStorm
• Windows / MacOS / Linux 上で動作
する統合開発環境。
• TypeScript のみならず、HTML や
CSS など Web アプリ開発全般に強
い。
• 有償。30日間 試用可能。

Atom
• Windows / MacOS / Linux 上で動作
するテキストエディタ。
• GitHub 主導で開発。オープンソース。
無償で利用可能。
• 豊富なアドイン(パッケージ)が流通。
• テキストエディタと言いながら起動
が激重とのもっぱらの評判

Atom による TypeScript 環境構築
• 以下のアドイン(パッケージ)をAtomにインス
トールすればOK!
•atomcomplete-plus
•linter
•atom-typescript

Demonstration
Atom エディタによる
TypeScript プログラミング

デモで触れた TypeScript 構文の
おさらい
• class 構文
• アロー関数
• テンプレート文字列
☞ いずれも ECMAScript6 で実現される。

じゃぁ、ECMAScript 6 がどこで
も使える時が来たら、TypeScript
は要らなくなっちゃうの?

いいえ。

TypeScript には
型
があります。

型は正義!
• TypeScript は "静的型付言語"。
• コンパイル時に、存在しない変数やメンバを参
照していないか、また、それらの型は適合して
いるか、などがチェックされます。
• 新規にプログラムを書き起こすときはもちろん、
機能の追加や変更、不具合修正で威力を発揮!

他の JavaScript ライブ
ラリの使用

使えます。が、"型定義" が必要！
• その JavaScript ライブラリに、どんなメンバ
や引数を持つ、どんな型のグローバルオブジェ
クトや関数があるのかがわからないと、
TypeScript コンパイラはコンパイルができま
せん。

"型定義" ファイルの登場
• そこで、TypeScript の構文で型情報のみを記
述した "専用のテキストファイル" を作ってお
き、これを参照してコンパイルする仕組みがあ
ります。
• その "専用のテキストファイル" が "型定義"
ファイルです。
• JavaScript のファイル名+".d.ts" という命名規
則
• 例) "jquery.d.ts"

"型定義" ファイルの入手方法
• 著名な JavaScript ライブラリには、既に誰か
が TypeScript 用型定義ファイルを作成・公開s
してくれてます。
• 型定義ファイルの集積所が DefinitelyTyped。
https://github.com/borisyankov/DefinitelyTyped

"tsd" コマンド
• DefinitelyTyped サイトからの型定義の取得な
どを管理してくれる。
$ sudo npm install -g tsd
$ tsd install jquery

Demonstration
jQuery と TypeScript を使ったプログラミング

"型定義" を書く
• 型定義ファイルが作成・公開されてなくても、
自分で書けばOK
• 型定義ファイルといっても、型情報しか書かなかっ
ただけの、ただの TypeScript です。
• "declare" 構文をマスターすれば OK
• 場合によっては、.d.ts ファイルを作るまでも
なく、本体の .ts ファイル中にインラインで型
定義を書いてもいいでしょう。

デバッガ
Webクライアント側開発における

Web 開発でのデバッグ作業は?
• Google Chrome をはじめとした Web ブラウ
ザに備え付けの、Ctrl + Shift + I 又は F12 開発
者ツールには、JavaScript デバッガが備わって
います。
• この Web ブラウザの開発者ツールで、デバッ
グ作業ができます。

じゃぁ、TypeScript がコンパイル
して生成した JavaScript コードに
対してデバッグ作業をするの?

いいえ。

コンパイル元の TypeScript ソースコードに対して
ブレークポイントが張れます!
ステップ実行ができます!
変数ウォッチができます!

Souce Map

.mapファイルを生成すればOK!
• TypeScript コンパイラは、オプションスイッ
チ指定すれば、コンパイル時に source map
ファイル(.map) を同時生成します。
• TypeScript の特徴のひとつ、
"元の TypeScript コードと、概ね 1 対 1 で対応する
ような JavaScript コードを生成する"
が、副次的に、このようなデバッグのしやすさに効
いてきます。
※source mapという仕組み上、完璧に TypeScript コード上でのデバッグができるわけではありません。

Demonstration
Firefox の開発者ツールを使ったデバッグ作業

Open Source

GitHub で
開発が進められています
• Contributor License Agreement 結べば、
fork & commit & pull request できます。

CLA申請書

2日後に返信もらう

標準型定義ファイルについて
Issue & Pull Request

しくじった。

まとめ

TypeScript はオススメ
• 安全で読みやすいコードが書ける
• JavaScript の上位互換なので学習投資がムダに
ならない
• jQuery とか AngularJS とか普通に使える
• 強力なエディタ支援がある
• 普通にデバッガ使える
• GitHub 上で開発にかかわれる

このセッションをとおして...
• JavaScript で直接書く代わりに TypeScript を
使ってコーディングする人が増えることで...
• 1人でも多くの方のコーディングがより楽しい
時間になれば幸いです。

定山渓温泉でまたお会いしましょう!
― Learn & Practice & Share ―
See you!