typescript と visual studio code
TRANSCRIPT
![Page 1: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/1.jpg)
Microsoft Openness~ TypeScript と Visual Studio Code ~
井上章 (いのうえあきら)
http://aka.ms/chack
日本マイクロソフト株式会社デベロッパーエバンジェリズム統括本部 (DX)
エバンジェリスト
![Page 2: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/2.jpg)
井上 章 (いのうえ あきら)エバンジェリスト
http://aka.ms/chack
2008 年マイクロソフト入社。
主に .NET/ASP.NET や Visual Studio, Microsoft Azure などの開発技術を専門とするエバンジェリストとして、技術書籍やオンライン記事などの執筆、さまざまな技術イベントでの講演などを行う。
![Page 3: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/3.jpg)
HTML & Plug-ins
FlashSilverlight
Java AppletActiveX
…
![Page 4: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/4.jpg)
HTML5 & CSS3 & JavaScript
![Page 5: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/5.jpg)
HTML5 & CSS3 & JavaScript
(function ($) {var offsetX = 20, offsetY = 20;$.widget('qs.infobox', {
options: {dataUrl: '', maxItems: 10
},_create: function () {
var that = this,name = this.name;},display: function (event, tagName) {
$.ajax({url: url,dataType: 'jsonp',success: function (data) {},
});},
});} (jQuery));
<div class="hoge" />
.hoge {color: red;background-color: #b6ff00;border-radius: 8px;
}
![Page 6: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/6.jpg)
JavaScript is the Assembly Language of the Web.
by Scott Hanselman.
![Page 7: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/7.jpg)
Problems of JavaScript
![Page 8: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/8.jpg)
Large scale JavaScript development is hard.
![Page 9: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/9.jpg)
TypeScriptAny browser. Any host. Any OS.
Open Source.
![Page 10: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/10.jpg)
Any browser. Any host. Any OS. Open Source.
![Page 11: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/11.jpg)
![Page 12: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/12.jpg)
Official Web Sites
www.typescriptlang.org
クイック スタートサンプル
github.com/Microsoft/TypeScript
ソースコードドキュメント
![Page 13: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/13.jpg)
TypeScript compilation process
TypeScriptファイル
(*.ts)
TypeScriptコンパイラ
(tsc.js)
JavaScriptファイル
(*.js)
TypeScript型定義ファイル
(*.d.ts)
JavaScript実行エンジン
(Browser, …)
Node.js または
WSH (WScript.Shell)で実行
ECMAScript 3 またはECMAScript 5 で生成
(ECMAScript 2015 試験的実装)
Web ブラウザーやNode.js など
![Page 14: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/14.jpg)
TypeScript Type System Example
// Anyvar x: any; // 明示的var y; // y: any と同じvar z: { a; b; }; // z: { a: any; b: any; } と同じ
function f(x) { // f(x: any): void と同じconsole.log(x);
}
// Numbervar x: number; // 明示的var y = 0; // y: number と同じvar z = 123.456; // z: number = 123.456 と同じ
// Booleanvar b: boolean; // 明示的var yes = true; // yes: boolean = true と同じvar no = false; // no: boolean = false と同じ
// Stringvar s: string; // 明示的var empty = ""; // empty: string = "" と同じvar abc = 'abc'; // abc: string = 'abc' と同じ
// Nullvar n: number = null; // 基本型は Null 設定可var x = null; // x: any = null と同じ
// Undefinedvar n: number; // n: number = undefined と同じvar x = undefined; // x: any = undefined と同じ // Enum
enum Color { Red, Green, Blue }var myColor = Color.Red;Console.log(Color[myColor]); // Red
![Page 15: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/15.jpg)
TypeScript Interface, Classes Example
interface Dog {name: string;Talk: () => string;
}
class Corgi implements Dog {name: string;constructor(name: string) {
this.name = name;}Talk(): string {
return "Bow wow!";}
}
class myDog extends Corgi {constructor() {
super("reo");}Talk(): string {
return "Wan wan!";}
}
var reo = new myDog();alert(reo.Talk());
![Page 16: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/16.jpg)
Generics : Parameterized Types
class Human<T> {constructor(public name: T) { }
Talk(): T { return this.name; }}
var me = new Human<string>("Akira");alert(me.Talk());
![Page 17: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/17.jpg)
Arrow Function Expressions
var s1 = function (x: number) { return Math.sin(x); } // 標準式
var s2 = (x: number) => { return Math.sin(x); }var s3 = (x: number) => Math.sin(x)
var s4 = x => { return Math.sin(x); }var s5 = x => Math.sin(x)
var s0: (x: number) => number;s0 = x => Math.sin(x)
![Page 18: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/18.jpg)
Get Accessor / Set Accessor
class Who {private _name: string;
get Name() { return this._name; }set Name(name: string) { this._name = name; }
}
var me = new Who();me.Name = "Akira Inoue";console.log(me.Name);
![Page 19: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/19.jpg)
Google TypeScript + VS Code
![Page 20: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/20.jpg)
Visual Studio Codehttp://code.visualstudio.com/
Code optimized editor
Intellisense, debugging, GIT
Windows + Mac + Linux
Open Source
![Page 21: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/21.jpg)
runtimes node.js, ASP.NET Core 1.0, Unity, Office
ソース
コントロール
git
タスク実行
gulpgrunt…
エディタ
30 以上の開発言語
拡張機能 Debuggers, Languages Linters, Snippets, Themes ...
![Page 22: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/22.jpg)
Yeoman (http://yeoman.io/)
クロスプラットフォーム ツール群
Windows, Mac OS, Linux
下記のツールで構成
yo : スキャフォールディング ツール
Bower, npm : パッケージ マネージャー
Grunt, Gulp : タスクランナー/ビルドツール
yo generator for ASP.NET Core
ASP.NET Core プロジェクト生成ツール
Web 開発クライアントツール
![Page 24: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/24.jpg)
![Page 25: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/25.jpg)
Erich GammaDistinguished Engineer
Microsoft
Design Pattern の GoF の一人
Kent Beck とともに JUnit を開発
IBM 時代は Eclipse JDT の設計リーダー
2011 年 6 月から Visual Studio チームに参画
![Page 26: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/26.jpg)
+ Squirrel をアプリケーションのアップデート機能に+ FirstMate を TextMate シンタックス バンドリング サポートに
クロスプラットフォームのデスクトップ アプリケーション シェル
(旧 Atom Shell)
![Page 27: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/27.jpg)
Visual StudioDev Essentials
AND MORE…
http://aka.ms/vsfreejp
開発ツール
Visual Studio Community
Visual Studio Code
クラウドサービス
Visual Studio Team Services
$25/month Azure credits
ソフトウェア
SQL Server Developer Edition
R Server Developer Edition
Parallels for Mac Pro (3 か月間)
Windows 10 Development VHD (60 日評価版)
Office Online Apps
Power BI / App Insights / HockeyApp Free Plan
トレーニング & サポート
Pluralsight (3 か月間)
WintellectNOW (3 か月間)
Xamarin University
Microsoft Virtual Academy
![Page 28: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/28.jpg)
インフラ技術者、開発者をはじめ、IT に携わるすべてのエンジニアのための技術コンファレンス
http://aka.ms/decode16
2016 年 5 月 24 日 ~ 25 日
ザ・プリンスパークタワー東京
![Page 29: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/29.jpg)
Microsoft
![Page 30: TypeScript と Visual Studio Code](https://reader031.vdocuments.site/reader031/viewer/2022022200/58a549be1a28ab4f088b6deb/html5/thumbnails/30.jpg)
本情報の内容(添付文書、リンク先などを含む)は、作成日時点でのものであり、予告なく変更される場合があります。