Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Visual Studio Codeで始めるTypeScript

694 views

Published on

OSC 2016 北海道のセッション資料です。

Published in: Technology
  • Be the first to comment

Visual Studio Codeで始めるTypeScript

  1. 1. http://www.drewby.com http://aka.ms/chack
  2. 2. What programming language do you use? どんなプログラミング言語を使っていますか?
  3. 3. JavaScript is the Assembly Language of the Web. by Scott Hanselman
  4. 4. TypeScript TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source. JavaScript that scales.
  5. 5. 0
  6. 6. 1. 2. 3. function greeter(person) { return "Hello, " + person; } var user = "Jane User"; var message = greeter(user);
  7. 7. TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc) JavaScript ファイル (*.js) TypeScript 型定義ファイル (*.d.ts) JavaScript 実行エンジン Node.js または WSH (WScript.Shell) で実行 ECMAScript 3 (ES3) ECMAScript 5 (ES5) ECMAScript 2015 (ES2015) 試験的実装 Web ブラウザーや Node.js など
  8. 8. interface I { } class C { } module M { } { s: string; } number[] () => boolean // Number var x: number; // 明示的 var y = 0; // y: number と同じ // Boolean var b: boolean; // 明示的 var yes = true; // yes: boolean = true と同じ // String var s: string; // 明示的 var n = "akira"; // n: string = "akira" と同じ // Enum enum Color { Red, Green, Blue } var myColor = Color.Red; Console.log(Color[myColor]); // Red
  9. 9. 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!"; } } namespace M { export var reo = new myDog(); } alert(M.reo.Talk());
  10. 10. class Human<T> { ... } var me = new Human<string>("Akira"); var a = function (x: number) { return Math.sin(x); } // 標準式 var b = x => Math.sin(x) class Who { private _name: string; get Name() { return this._name; } set Name(name: string) { this._name = name; } }
  11. 11. Visual Studio Code http://code.visualstudio.com/ Code optimized editor Intellisense, debugging, GIT Windows + Mac + Linux Open Source
  12. 12. runtimes node.js, .NET Core, Unity, Office ソース コントロール git タスク実行 gulp grunt … エディタ 30 以上の 開発言語 拡張機能 Debuggers, Languages Linters, Snippets, Themes ...
  13. 13. + Squirrel をアプリケーションのアップデート機能に + FirstMate を TextMate シンタックス バンドリング サポートに クロスプラットフォームの デスクトップ アプリケーション シェル (旧 Atom Shell)
  14. 14. https://github.com/microsoft/vscode
  15. 15. TypeScript Any browser. Any host. Any OS. Open Source. JavaScript のスーパーセット ES 3 以上の環境をサポート 静的型付けとオブジェクト指向 多くの開発ツールのサポート 最新 ES 言語仕様を先取り JS 開発生産性を向上
  16. 16.   http://www.typescriptlang.org   http://www.typescriptlang.org/docs/tutorial.html   https://github.com/Microsoft/TypeScript   https://github.com/Microsoft/TypeScript/blob/master/doc/spec.md
  17. 17. 本情報の内容(添付文書、リンク先などを含む)は作成日時点でのものであり、予告なく変更される場合があります。

×