Download as PDF, PPTX
![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/75/TypeScript-Visual-Studio-Code-14-2048.jpg)
Uploaded byAkira Inoue
TypeScript と Visual Studio Code
ふくあず ～春の訪れは突然に あの日あの時あの場所で ～ Japan Azure User Group 福岡 の資料です。
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 JavaApplet 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 AssemblyLanguage of the Web. by Scott Hanselman.
- 7.
- 8. Large scale JavaScriptdevelopment is hard.
- 9. TypeScript Any browser. Anyhost. Any OS. Open Source.
- 10. Any browser. Anyhost. 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 SystemExample // 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, ClassesExample 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 : ParameterizedTypes 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 vars1 = 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/ Codeoptimized editor Intellisense, debugging, GIT Windows + Mac + Linux Open Source
- 21. runtimes node.js, ASP.NETCore 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 開発クライアント ツール
- 23.
- 25. Erich Gamma Distinguished Engineer Microsoft DesignPattern の GoF の一人 Kent Beck とともに JUnit を開発 IBM 時代は Eclipse JDT の設計リーダー 2011 年 6 月から Visual Studio チームに参画
- 26. + Squirrel をアプリケーションのアップデート機能に +FirstMate を TextMate シンタックス バンドリング サポートに クロスプラットフォームの デスクトップ アプリケーション シェル (旧 Atom Shell)
- 27. Visual Studio Dev Essentials ANDMORE… 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.
- 30.