初心者 × AngularJS × TypeScript

@tsubakimoto_s

2014/07/05

AngularJS 福岡勉強会　 ( 第 1 回 )

自己紹介

• 松村 優大 (Yuta Matsumura)• @tsubakimoto_s

• 医療系システム開発、受託開発 (C#, VB.NET)• 島根 → 長崎 → 福岡• 草ソフトボールしてます。メンバー募集中。

初心者 × AngularJS × TypeScript 2

TypeScript

• Microsoft が開発したオープンソース言語。• JavaScript を生成する AltJS の一部。• 2014 年 4 月に Ver 1.0 がリリース。• 絶賛勉強中。• http://www.typescriptlang.org/• http://www.typescriptlang.org/Playground

初心者 × AngularJS × TypeScript 3

TypeScript の開発環境

• Visual Studio なら Intelligence が使えて便利。

• VS のバージョンに注意• Visual Studio 2012 + TypeScript Extension• Visual Studio 2013 Update 2

• 必須な Extension• Web Essentials

初心者 × AngularJS × TypeScript 4

TypeScript 書いてみる

初心者 × AngularJS × TypeScript 5

TypeScript JavaScript

TypeScript 書いてみる

初心者 × AngularJS × TypeScript 6

定義ファイル

• JavaScript ライブラリを TypeScript で利用できるように変換したファイル。• 拡張子は .d.ts

• 有名どころのライブラリの定義ファイルはあります。• https://github.com/borisyankov/DefinitelyTyped

• もちろん AngularJS の定義ファイルもあります。

初心者 × AngularJS × TypeScript 7

NuGet

• Visual Studio で定義ファイルを導入するにはNuGet を使うとカンタン。• NuGet とは .NET 向けのパッケージマネー

ジャ。• ソフトウェアやライブラリが入手できる。• 参考： http://bit.ly/1mWWu60

初心者 × AngularJS × TypeScript 8

NuGet

初心者 × AngularJS × TypeScript 9

• 依存関係にあるライブラリも同時にインストールされる。

NuGet

初心者 × AngularJS × TypeScript 10

TypeScript 書いてみる

初心者 × AngularJS × TypeScript 11

TypeScript って何か便利そう！

初心者 × AngularJS × TypeScript 12

ありがとうございました。

初心者 × AngularJS × TypeScript 13