2015/11/21 Kansai Frontend UG 「2016年のAltJSについて語る会」発表スライド

1. TypeScript 入門してみる
KEN
2015.11.21

2. 自己紹介
● KEN
○ @kenfdev
○ http://kenev.net/
● 株式会社 鈴木商店
○ 大阪のクラウドシステム開発会社
● とにかくJavaScriptが好き
○ 元々.NET系エンジニアだったがJavaScripter
に転身

3. もくじ
● TypeScript？
● Visual Studio Code？
● デモ
● 参考URLなど

4. TypeScript？

5. TypeScript?
+ + ≒

6. TypeScript?
作っているのはMicrosoft！
なので結構心強い

7. TypeScript?ー目的
● JavaScriptに型情報を付加できる
● 基本的なES2015が今すぐに使える

8. TypeScript?ー型の何がうれしいの？
● 型情報が無い場合とくらべてリファクタが容易になる
● コンパイラ（っぽいもの）がエラーを見つけてくれる
○ ランタイム時に見つかる凡ミスとはおさらば！
※後ほどデモでお見せします

9. TypeScript?ー導入ってめんどくさくないの？
● そんなことはない（たぶん）
● なぜなら
● JavaScriptはTypeScript
だから
TypeScript
JavaScript

10. TypeScript?ー導入ってめんどくさくないの？
.js → .ts
TypeScriptはJavaScriptのスーパーセットなので、
拡張子を変えるだけでTypeScriptファイルの完成！

11. これだけだと
あまり意味はない
意味が無いわけではない。

12. TypeScript?ー暗黙的な型推論
● .js → .ts した時点で型推論は始まる！
● number型にstring型を入れようとしたら怒られます！
● なのでとりあえず.js → .tsとするだけでちょっとTypeScriptの恩恵を受けることが
できます

13. これ以外の部分が
TypeScriptの真の強み！

14. Interfaces
ClassesModules
Functions
Generics
Mixins
Declaration
Merging
d.ts Files
TypeScript?ー強み・特徴

15. めっちゃあります
ので

16. Interfaces
ClassesModules
Functions
Generics
Mixins
Declaration
Merging
d.ts Files
この辺りについてデモします

17. その前に…

18. Visual Studio Code
を紹介します

19. Visual Studio Code?
● 無料の（高機能）コードエディタ
● 立ち位置的にはSublimeTextとかAtomとかの対抗馬（？）たぶん
● クロスプラットフォーム
● Intellisenseが使える（特にTypeScriptと使うとすごい）
● Node.jsのデバッグができたり
● ASP.NETの開発ができたり
● Gitが使えたり
● などなど…

20. これもMicrosoftが作ってる
結構イケてる
無料のコードエディタ

21. しかも
この前の水曜日（2015/11/18)
オープンソース化！
https://github.com/Microsoft/vscode

22. とりあえずそろそろ
デモします

23. 参考URL（ほとんど英語ですが…）
● TypeScript Book
https://github.com/basarat/typescript-book
● Editing TypeScript
https://code.visualstudio.com/Docs/languages/typescript
● TypeScript公式サイト
http://www.typescriptlang.org/
● Visual Studio Code
https://www.visualstudio.com/ja-jp/products/code-vs.aspx

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