Embed Size (px)
DESCRIPTION
TypeScriptは明日から使うべきですよ。
Citation preview
TypeScriptは明日から使うべきMTI 技術の泉
@vvakame
わかめ まさひろ
GAE
Android
TypeScript
AngularJS
@v vakame
• Google App Engine!• Android!• Google Apps!などなど、!
!
!
技術に特化した会社です。!Microsoft?
なぜ、TypeScriptか？
どーして？
Type?
• Type = 型!
• 型は多くのプログラミング言語に存在!
• “型”の扱いには言語ごとに優劣がある!
• 静的型付け!
• 動的型付け
静的型付け• 静的解析で多くの整合性検査が可能!
• 不整合があったらコンパイルエラー!
• int hoge = “Hoge”;!
• ↑エラー！!
• 大規模・大人数 になるほど利点⤴!
• Java・C# などが有名
動的型付け• 型がないわけではないんだけども…!
• 静的に検証しない(できない!
• hoge = “Hi!” ; hoge = 1 ;!
• 問題なし！(ある場合もある!
• テストの重要性⤴ 大人数開発…⤵!
• Ruby・Python などが有名
static vs dynamic
一体、どっちがいいの？
時代は静的型付けだ！• 動的型付けの利点は確かにある!
• テスト書きやすい!
• 黒魔術しやすい!
• デメリットもある!
• テストしっかり書かないと死ぬ!
• リファクタリングめっちゃ怖い
王者 JavaScript
• 昔はOFFにしとけとか言われてたのに!
• 今や花形ですよ！!
• JavaScript実行しない日があるだろうか!
• いや、ない！
だがしかし…• しかしJavaScriptさんはマジガバガバ!
• 動的型付けだしー!
• そんな言語仕様でいいんですか…？!• クラス無い!
• prototypeとかいうのはある(小声!
• モジュール(パッケージ)無い!
• 安全に開発できない！！！
そこでTypeScriptですよ
• 静的型付けなJavaScript！!
• クラスある！!
• モジュールある！
サイキョーやん？
TypeScriptの特長
TypeScriptの特長• TypeScriptはJavaScriptを拡張した言語!
• 静的型付け！!
• ECMAScript 6規格の文法を先取り☆!
• 読みやすい変換後JavaScript!
• Java, C# とかに優しい言語仕様!• 長いコンパイル時間 → 1.1.0 で改善
最も現実的なaltJSだ！
親Microsoft情報
• Microsoftが作ってる!
• Visual Studio がサポートしている！!
• C#作者が作ってる！
でも僕はMacで使ってる
Why needs 型？• 多くのエラーをコンパイル時に!
• 実行時エラーはもううんざり！!• 間違った使い方は不可能に!
• リファクタリングも安心確実！!• コンパイルが通ればある程度動く！!
• IDEなどのサポートが得られやすい
JS完全互換！
TypeScriptでの型
• primitive type 御三家!
• number!• string!• boolean
JS完全互換！
TypeScriptでの型
• 忘れちゃならない!
• any!• void
JS完全互換！
TypeScriptでの型• class!
• 実体も型も存在するイケメン!
• interface!• 地味 型しか存在しない!
• object type literal!• ↑TypeScriptリファレンス参照!
• 雑に説明すると即席interfacemodule君も一応いる
TypeScriptでの型
• ECMAScriptにいるやつ!
• DateとかArrayとかFunctionとか!• ブラウザにいるやつ!
• windowとかDOM系のやつとか↑結局classかinterface
型注釈
http://goo.gl/jKVeHw
var str1: string = "string"; var str2: number = "string"; // エラー！ var str3 = "string"; // 初期化子の型から型推論されstringを指定したのと等価 str3 = 1; // エラー！ !var b: boolean = true; var n: number = 1; !var a: any = true; a = 1; // any は何でもOK！
クラス
http://goo.gl/l3zjBi
class Hoge { name: string; constructor(name: string) { this.name = name; } hello(): string{ return "Hello, " + this.name; } } !var obj = new Hoge("world"); window.alert(obj.hello());
インタフェース
http://goo.gl/GQD89G
interface IHoge { str: string; num: number; } !var obj: IHoge = { str: "string", num: 1 }; !window.alert(obj.str + obj.num);
内部モジュール
http://goo.gl/gvjgTU
module sample { export var str = "string"; export class Hoge { hello(word: string): string { return "Hello, " + word; } } } module sample2 { // SampleB.Hoge を Piyoとしてインポート import Piyo = sample.Hoge; export var str = new Piyo().hello("TypeScript"); } window.alert(sample2.str);
既存資産の活用
今まで書いたJSも使える
TypeScript & JavaScript
• JSのライブラリが使いたい！!
• jQuery!• AngularJS!• mocha!• etc…!
• お任せください！
既存資産も使う！
DefinitelyTyped
definitely/déf(ə)nətli/ →define 副詞more ～; most ～ 2 明確に, はっきりと〈断る述べる決めるなど〉.
type/taɪp/ 〖語源は「打ってできた形型」〗 (形)typical, (副)typically 名詞複～s/-s/ 1 C(ある特性を共有する)型, タイプ, 類型; 種類(kind2, sort)
ウィズダム英和辞典より
I’m committer!
definitelytyped.orggithub.com/borisyankov/DefinitelyTyped
型定義ファイル .d.ts
Over 550!
interface Moment { ! format(format: string): string; format(): string; ! fromNow(withoutSuffix?: boolean): string; ! startOf(soort: string): Moment; endOf(soort: string): Moment; ! add(input: MomentInput): Moment; add(soort: string, aantal: number): Moment; add(duration: Duration): Moment; subtract(input: MomentInput): Moment; subtract(soort: string, aantal: number): Moment; ! calendar(): string; clone(): Moment; ! valueOf(): number; ! local(): Moment; // current date/time in local mode ! utc(): Moment; // current date/time in UTC mode ! isValid(): boolean;
既存JSに型を後付けするhttp://momentjs.com/
goo.gl/9QnuC3
完全網羅！
TypeScriptリファレンス
紙･電子共 好評発売中！
Amazon(紙, Kindle)達人出版会(PDF)
mozaic.fm
2回くらい話した
#5 TypeScript
#8 AltJS in LL Diver
実際の開発風景
見学してみよう！
質問？
