TypeScript超入門

きよくら ならみ

2013/05/25

第五回 okayama-js勉強会

• ハンドル：「きよくら ならみ」

– @kiyokura

• 岡山生まれ岡山育ちのプログラマー

– 現在は県内の某製造業で社内SE

• NET系の開発やWebアプリ開発

– Microsoft MVP for ASP.NET/IIS

自己紹介

• Okayama IT Engineers Community– 通称OITECの運営スタッフ

– 主にMS系のテクノロジを扱う勉強会などを、岡山で開催しています

– site: oitec.vbstation.net

• オープンラボ岡山– 今年から主宰を引き継ぎました

– 岡山でノンジャンルの技術系勉強会を開催

– site: olojp.net

コミュニティ

はじめに

はじめに

• このセッションの目的：– TypeScriptを殆ど知らない・触ったことがない方へ、

TypeScriptがどんなものかを大まかにお伝えするものです

• 対象者：– JavaScriptはある程度知っている– TypeScriptをあまり知らないが…

これから始めてみたいとりあえずざっくりしたところが知りたい

• そのため、細かい機能や注意点、また静的型付け自体に関する言及等は極力割愛します

アジェンダ

• TypeScriptって何なの？

• 概要のブレイクダウン

• 試してみよう

• 言語としての特徴

• TypeScriptのロードマップ

• JavaScriptの未来

• まとめ

TypeScriptって何なの？

公式サイト

• www.TypeScriptLang.org

TypeScript

• TypeScript is a language for application-scale JavaScript development.

• TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.

• Any browser. Any host. Any OS. Open Source.

from “www.typescriptlang.org”

TypeScript

• JavaScriptによる大規模開発に対応する為に設計された言語です

• JavaScriptのスーパーセットであり、”静的型付け”が大きな特徴ですコンパイルによりJavaScriptを生成します

• 様々なブラウザや環境で動作しますそしてオープンソースです

超訳 by kiyokura

作ってるのは？

• Microsoftによるプロダクト

– でも、オープンソース

• 設計は Anders Hejlsberg

– Turbo Pascal / Delphi / C#

– 通称"ヘジたん"

from wikipedia

概要のブレイクダウン

application-scaleJavaScript development

• "アプリケーション規模"とは？？

– 部分的な利用からアプリケーション全体への拡大

• 見栄えの制御• 簡単な入力値の検証

• アプリ全体の制御• ビジネスロジック

JSの大規模開発で問題なりやすい点

• 動的型

• スコープ– グローバル汚染– ブロックスコープが無い

• 曖昧でもなんとなく動く– 暗黙のセミコロン補完

• プロトタイプベース– 独特で理解しにくい

JavaScriptのスーパーセット

• 基本構文はJavaScriptと（だいたい）同じ

– 学習コストが低い

– 既存のJavaScriptもそのまま使える場合も多い

• ECMAScript 6thの仕様先取り

JavaScriptへコンパイル

• 最終的にJavaScriptへコンパイルされます

– *.tsファイルから*.jsファイルへ

• リーダブルなJavaScriptを出力

– 可読性が高く、人がメンテ可能

hoge.ts hoge.js

コンパイル

実行環境

• 実行環境＝JavaScriptが動くところ

• ブラウザだけではない

– 例えば…

• Node.js

• Windows Scripting Host

オープンソース

• TypeScript is Open Source Software

– Apache License 2.0

• CodePlexでホスト

– typescript.codeplex.com

– VCSはgit

ここまでのまとめ

• TypeScriptは以下の特徴を持った言語

– JavaScriptのスーパーセット

– 大規模開発に耐えうる

– JavaScriptにコンパイルされる

– オープンソース

– tsの動作環境＝jsの動作環境

試してみよう

TypeScriptの開発・実行環境

開発環境のつくり方

• 開発環境は無償で構築可能– Visual Studio ＋ アドオン

• Windows限定• VSは無償版でOK

– node.jsで動くコンパイラ• node.jsが動くOS＝大体の主要OS• コードはお好みのテキストエディタ

– 試すだけならブラウザ上で！• 公式サイトのplay groundで試せます

• （nodeのコンパイラ利用時の）エディタ/IDEのサポート– Sublime Text 2(*) / vim / emacs ...等々– WebMatrix 3 / WebStrom(*)

*製品自体は有償

まずはここから

• 公式サイト（www.typescriptlang.org）

– Get TypeScript Now

Visual Studioの場合

• アドオンをインストール（VS2012用）

– 無償版も利用可能

• Visual Studio Express 2012 for Web

– http://www.microsoft.com/visualstudio/jpn/products/visual-studio-express-for-web

• msiをダウンロードして実行

それ以外の場合

• まずはnode.jsが動く環境を作る

• npmでインストール

• Windowsの場合、WebMatrixを利用するとnode.jsごと簡単にインストール可能

– WebMatrix 3をインストール後、

– 拡張機能のTypeScript Compilerをインストール

npm install -g typescript

Play Ground

• 公式サイトのPlayから

• ブラウザ上でリアルタイムにコンパイル

– 実行も可能

– コード補完もかなり効く

コンパイルのデモ

• 簡単なコードとJavaScriptへのコンパイルのデモ

コンパイルのデモ：VS

• Visual Studioの場合は自動的にコンパイル

– 保存のタイミングでtsファイルの同名のjsファイルが自動作成される

– 有償版Visual Studioの場合は、無償のアドオンでリアルタイムコンパイルも可能

• Web Essentials

コンパイルのデモ：node.js

• 以下のコマンドでコンパイル

• テキストエディタやIDEがサポートするケースも

tsc hoge.ts

コンパイル例

TypeScript JavaScript

ここまでのまとめ

• コンパイラ/開発環境は無償で入手可

• 大きく二種類

– Visual Studioアドオン（無償版VS対応）

– コマンドラインコンパイラ（node.js）

• IDEやテキストエディタでサポート有

言語仕様の概要

言語としての大まかな特徴

• 基本構文はJavaScript

• 静的型

• 型推論

• クラスベースのオブジェクト指向

• アロー関数式

基本構文はJavaScript

• 基本構文はJavaScriptとほぼ同じ

– 教育・学習コストが少ない

– 既存のjsもtsとしてコンパイル可能

• 書き方によってはエラーになることもある

• 後述する特徴を実現するための拡張

静的型付け

• 型注釈による型の宣言

– 変数 / 関数の引数 / 関数の戻り値

– ある型で宣言された変数に別の型は代入できない

• コンパイルエラーが起こる

静的型付けの例

var name: string;var age : number;function sqrt(num: number): number {

return num * num;}

name = "kiyokura";age = 20;

// 以下はエラーname = 20;age = "hatachi";

var x = sqrt("hoge"); // 引数が文字列型

メリット・デメリット？

• 一般的な静的型付のメリットを参照– ここでは割愛

• 『デメリット』といわれがちな点のフォロー– 型の宣言が面倒

→ 型推論のサポート

– ダックタイピングしたい→ InterfaceとStructural Subtyping

– 複数の方を受ける変数を使いたい→ any型の採用

型推論

• 文脈から型が明らかな場合、明示的な型注釈を省略可能

– 変数の初期化時→ 代入される型が明らかな時

– 関数の戻値→ 返却される値の型が明らかな時

var name = "kiyokura"; // 明らかにstring型function sqrt(num: number) {

return num * num; // 明らかにnumber型}

クラスベースのオブジェクト指向

• Class– JavaやC#等のクラスに近い考えで実装可能– 継承も可能

• Interface– 特定の形のオブジェクトの別名– JavaやC#等のInterface的な使い方も可– Structural Subtypingのポイント

• Module– 内部モジュール：NameSpace的に使う– 外部モジュール：外部のファイルをロードする

Classの例

class Person {name: string;age: number;

constructor(name: string, age: number) {this.name = name;this.age = age;

}

greet(): string{return "Hello, I'm " +

this.name + ". I'm " +this.age.toString() + "years old!";

}}

Classの例（コンパイル後）

var Person = (function () {function Person(name, age) {

this.name = name;this.age = age;

}Person.prototype.greet = function () {

return "Hello, I'm " + this.name + ". I'm " + this.age.toString() + "years old!";

};return Person;

})();

アロー関数式

• ＝＞（アロー演算子）による匿名関数の省略記法

– 関数型リテラルの省略記法

– いわゆるラムダ

//アロー関数式var sqrt = (x:number) => { return x * x };

//これと等価（コンパイル後）var sqrt = function (x) { return x * x; };

ここまでのまとめ

• 基本の構文はJavaScriptそのもの

• 型注釈による静的な型宣言

• 型推論による省略記述

• クラス指向オブジェクト言語的構文

• アロー関数式によるラムダ記法サポート

TypeScriptのロードマップ

ロードマップ

• 2013/05/24現在

– Current：0.8.3

• アドオンのバイナリやパッケージなどはこれ

– Alpha：0.9.0

• CodePlexからダウンロード可能

予定されているフィーチャー

• 0.9.0– Generics– Overload on constants– Improve compiler performance– Improvements to type system to help model a larger variety of

JS libraries

• 0.9.1– Align with ECMAScript 6 modules– Project integration support in VS plugin

• 1.x– A handful of language features are scheduled for exploration

after the 1.0 release, including:• Async/Await• Mixins• Protected access

– ES6-compatible codegen

今手を出さないほうが良いの？

• 考え方次第だと思うが…

• 私のスタンス– とりあえずベターJavaScriptとして使っていいん

じゃない？• 例：型安全なJavaScriptとしてだけ使うとか

• この使い方なら学習コストもゼロに近いのでは

– 吐かれるJavaScriptがリーダブルなので、最悪、そっちをメンテする手もあるし• どちらにしろベタでJavaScript書くことになるなら、

使い捨てのジェネレータ感覚で使っても損になるところは無さげ

JavaScriptと未来

ある人曰く

JavaScript is

Assembly Language

for the Web

曰く

• JavaScript is Assembly Language for the Web

• JavaScriptはWebのアセンブリ言語である

Scott Hanselman http://www.hanselman.com/blog/JavaScriptIsAssemblyLanguageForTheWebS

ematicMarkupIsDeadCleanVsMachinecodedHTML.aspx

JavaScriptの偉大な導師たち曰く

だいたい合ってる

JSの偉大なる導師たち

• "だいたい合ってる"Mike Shave , Brendan Eich,

Douglas Crockford

http://www.hanselman.com/blog/JavaScriptisAssemblyLanguagefortheWebPart2MadnessorjustInsanity.aspx

"JavaScript is Assembly Language"

• もう、そうなりつつあるのでは？

– TypeScript

– CoffeeScript

– HAXE

– Dart

– JSX

– Google Web Toolkit

– Script#

– （jQuery）

TypeScriptの目指しているところ（私見）

• general purpose

• 大規模開発にも耐えられる堅牢さ

• ベターJavaScript言語

• JavaScriptコンパイル言語界のJavaやC#のポジション

...なんじゃないかな、と思っています

まとめ

TypeScriptとは

• ざっくり、こんな言語

• 手軽に試すこともできます

• 個人的には将来的にもっと大きな波になる予感がします

• 今のうちに触ってみることをお勧めしたいです

Let's try and enjoyTypeScript !

参考

公式サイト

• http://www.TypeScriptLang.org

– チュートリアル

– play ground

– コンパイラ等のダウンロード

CodePlex

• http://typescript.codeplex.com

– ソース一式

• 各種サンプルも含まれている

– backboneのサンプル等もあった

– アルファ版のバイナリダウンロード

– issue トラッカー

ご清聴ありがとうございました