TypeScript と Visual Studio Code
2 likes1,154 views
ふくあず ～春の訪れは突然に あの日あの時あの場所で ～ Japan Azure User Group 福岡 の資料です。
![TypeScript Type System Example
// Any
var 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);
}
// Number
var x: number; // 明示的
var y = 0; // y: number と同じ
var z = 123.456; // z: number = 123.456 と同じ
// Boolean
var b: boolean; // 明示的
var yes = true; // yes: boolean = true と同じ
var no = false; // no: boolean = false と同じ
// String
var s: string; // 明示的
var empty = ""; // empty: string = "" と同じ
var abc = 'abc'; // abc: string = 'abc' と同じ
// Null
var n: number = null; // 基本型は Null 設定可
var x = null; // x: any = null と同じ
// Undefined
var 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](https://image.slidesharecdn.com/fukuazutypescriptvsc20160409-160409080634/85/TypeScript-Visual-Studio-Code-14-320.jpg)
TypeScript と Visual Studio Code
- 1. Microsoft Openness ～ TypeScript と Visual Studio Code ～ 井上 章 (いのうえ あきら) http://aka.ms/chack 日本マイクロソフト株式会社 デベロッパー エバンジェリズム統括本部 (DX) エバンジェリスト
- 2. 井上 章 (いのうえ あきら) エバンジェリスト http://aka.ms/chack 2008 年マイクロソフト入社。 主に .NET/ASP.NET や Visual Studio, Microsoft Azure などの開発技術を専門とする エバンジェリストとして、技術書籍やオンライ ン記事などの執筆、さまざまな技術イベントで の講演などを行う。
- 3. HTML & Plug-ins Flash Silverlight Java Applet ActiveX …
- 4. HTML5 & CSS3 & JavaScript
- 5. 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; }
- 6. JavaScript is the Assembly Language of the Web. by Scott Hanselman.
- 8. Large scale JavaScript development is hard.
- 9. TypeScript Any browser. Any host. Any OS. Open Source.
- 10. Any browser. Any host. Any OS. Open Source.
- 12. Official Web Sites www.typescriptlang.org クイック スタート サンプル github.com/Microsoft/TypeScript ソースコード ドキュメント
- 13. 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 など
- 14. TypeScript Type System Example // Any var 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); } // Number var x: number; // 明示的 var y = 0; // y: number と同じ var z = 123.456; // z: number = 123.456 と同じ // Boolean var b: boolean; // 明示的 var yes = true; // yes: boolean = true と同じ var no = false; // no: boolean = false と同じ // String var s: string; // 明示的 var empty = ""; // empty: string = "" と同じ var abc = 'abc'; // abc: string = 'abc' と同じ // Null var n: number = null; // 基本型は Null 設定可 var x = null; // x: any = null と同じ // Undefined var 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
- 15. 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());
- 16. Generics : Parameterized Types class Human<T> { constructor(public name: T) { } Talk(): T { return this.name; } } var me = new Human<string>("Akira"); alert(me.Talk());
- 17. 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)
- 18. 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);
- 19. Google TypeScript + VS Code
- 20. Visual Studio Code http://code.visualstudio.com/ Code optimized editor Intellisense, debugging, GIT Windows + Mac + Linux Open Source
- 21. runtimes node.js, ASP.NET Core 1.0, Unity, Office ソース コントロール git タスク実行 gulp grunt … エディタ 30 以上の 開発言語 拡張機能 Debuggers, Languages Linters, Snippets, Themes ...
- 22. Yeoman (http://yeoman.io/) クロスプラットフォーム ツール群 Windows, Mac OS, Linux 下記のツールで構成 yo : スキャフォールディング ツール Bower, npm : パッケージ マネージャー Grunt, Gulp : タスクランナー/ビルドツール yo generator for ASP.NET Core ASP.NET Core プロジェクト生成ツール Web 開発クライアント ツール
- 25. Erich Gamma Distinguished Engineer Microsoft Design Pattern の GoF の一人 Kent Beck とともに JUnit を開発 IBM 時代は Eclipse JDT の設計リーダー 2011 年 6 月から Visual Studio チームに参画
- 26. + Squirrel をアプリケーションのアップデート機能に + FirstMate を TextMate シンタックス バンドリング サポートに クロスプラットフォームの デスクトップ アプリケーション シェル (旧 Atom Shell)
- 27. Visual Studio Dev 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
- 28. インフラ技術者、開発者をはじめ、IT に携わるすべてのエンジニアのための技術コンファレンス http://aka.ms/decode16 2016 年 5 月 24 日 ～ 25 日 ザ・プリンス パークタワー東京
- 29. Microsoft