Angular ユーザーなら押さえておきたい！ TypeScript と Visual Studio Code の基礎と活用
1 like4,375 views
GrapeCity Angular Day 2017 の資料です。 http://www.kokuchpro.com/event/grapecity_angularday/
![JavaScript のあいまいさを排除し、安全性・可読性・生産性を向上
interface I { }
class C { }
module M { }
{ s: string; }
number[]
() => boolean
// Number
let x: number; // 明示的
let y = 0; // y: number と同じ
// Boolean
let b: boolean; // 明示的
let yes = true; // yes: boolean = true と同じ
// String
let s: string; // 明示的
let n = "akira"; // n: string = "akira" と同じ
// Enum
enum Color { Red, Green, Blue }
let myColor = Color.Red;
Console.log(Color[myColor]); // Red](https://image.slidesharecdn.com/typescriptvscodegrapecityangularday20171026p-171026073205/85/Angular-TypeScript-Visual-Studio-Code-19-320.jpg)
![ tsconfig.json
http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": true
},
"exclude": [
"node_modules"
]
}](https://image.slidesharecdn.com/typescriptvscodegrapecityangularday20171026p-171026073205/85/Angular-TypeScript-Visual-Studio-Code-22-320.jpg)
Angular ユーザーなら押さえておきたい！ TypeScript と Visual Studio Code の基礎と活用
- 1. 日本マイクロソフト株式会社 パートナー事業本部 パートナー技術統括本部 テクニカル エバンジェリスト 井上 章 (いのうえ あきら) ～ Angular ユーザーなら押さえておきたい！ ～ TypeScript と Visual Studio Code の基礎と活用
- 2. 井上 章 (いのうえ あきら) テクニカル エバンジェリスト http://aka.ms/chack 2008 年マイクロソフト入社。 主に .NET/ASP.NET や Visual Studio, Microsoft Azure などの開発技術を専門とする エバンジェリストとして、技術書籍やオンライ ン記事などの執筆、さまざまな技術イベントで の講演などを行う。
- 3. ✓ TypeScript 登場の背景を振り返る ✓ TypeScript の基本的な言語仕様と利用方法を学ぶ ✓ TypeScript の現在の動向と今後を知る セッションのゴール Session Takeaways
- 5. Any developer Any app Any platform
- 6. Visual Studio Code http://code.visualstudio.com/ Code optimized editor Intellisense, debugging, GIT Windows + Mac + Linux Open Source
- 7. runtimes node.js, .NET Core, Unity, Office ソース コントロール git タスク実行 gulp grunt … エディタ 30 以上の 開発言語 拡張機能 Debuggers, Languages Linters, Snippets, Themes ...
- 9. JavaScript is the Assembly Language of the Web. by Scott Hanselman.
- 10.
- 13. TypeScript TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source. JavaScript that scales.
- 15. JavaScript (ECMAScript) のスーパー セット (上位拡張) となるオープン ソースのプログラミング言語 0 TypeScript コンパイラ (tsc) が JavaScript を生成 静的型付け、クラス、モジュールをサポート ～ Any browser. Any host. Any OS. Open Source. ～
- 16. Official Web Sites www.typescriptlang.org クイック スタート サンプル github.com/Microsoft/TypeScript ソースコード ドキュメント
- 17. TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc) JavaScript ファイル (*.js) TypeScript 型定義ファイル (*.d.ts) JavaScript 実行エンジン Node.js または WSH (WScript.Shell) で実行 ECMAScript 3 (ES3) ECMAScript 5 (ES5) ECMAScript 2015+ (ES2015, ES2016, ES2017, ESNEXT) Web ブラウザーや Node.js など
- 18. 1. 2. 3. function greeter(person) { return "Hello, " + person; } var user = "Jane User"; var message = greeter(user);
- 19. JavaScript のあいまいさを排除し、安全性・可読性・生産性を向上 interface I { } class C { } module M { } { s: string; } number[] () => boolean // Number let x: number; // 明示的 let y = 0; // y: number と同じ // Boolean let b: boolean; // 明示的 let yes = true; // yes: boolean = true と同じ // String let s: string; // 明示的 let n = "akira"; // n: string = "akira" と同じ // Enum enum Color { Red, Green, Blue } let myColor = Color.Red; Console.log(Color[myColor]); // Red
- 20. interface, class, namespace などのオブジェクト指向言語構文の導入 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 let reo = new myDog(); } alert(M.reo.Talk());
- 21. ジェネリクス (Generics) 構文 アロー関数式 (ES2015 匿名関数構文) Get / Set アクセサ構文 (プロパティ) class Human<T> { ... } let me = new Human<string>("Akira"); let a = function (x: number) { return Math.sin(x); } // 標準式 let b = x => Math.sin(x) class Who { private _name: string; get Name() { return this._name; } set Name(name: string) { this._name = name; } }
- 22. tsconfig.json http://www.typescriptlang.org/docs/handbook/tsconfig-json.html { "compilerOptions": { "module": "commonjs", "target": "es5", "noImplicitAny": false, "sourceMap": true }, "exclude": [ "node_modules" ] }
- 23. 各種 JavaScript ライブラリの変数, オブジェクト, API 等の定義ファイル http://definitelytyped.org/ 型定義ファイルの入手 https://www.npmjs.com/~types https://aka.ms/types /// <reference types="node" /> ※ ソースコードで手動参照 ※ npm でインストール (package.json で依存関係を管理)
- 28. TypeScript Any browser. Any host. Any OS. Open Source. JavaScript のスーパーセット ES 3 以上の環境をサポート 静的型付けとオブジェクト指向 多くの開発ツールのサポート 最新 ES 言語仕様を先取り JS 開発生産性を向上
- 30. © 2017 Microsoft Corporation. All rights reserved. 本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。