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.

Demonstrationtsc コマンドによる 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

DemonstrationAtomエディタによる

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

DemonstrationjQueryと 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 コード上でのデバッグができるわけではありません。

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

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!