Post on 21-Jan-2018
日本マイクロソフト株式会社パートナー事業本部 パートナー技術統括本部テクニカル エバンジェリスト井上 章 (いのうえ あきら)
~ Angular ユーザーなら押さえておきたい!~
TypeScript と Visual Studio Code の基礎と活用
井上 章 (いのうえ あきら)
テクニカル エバンジェリスト
http://aka.ms/chack
2008 年マイクロソフト入社。
主に .NET/ASP.NET や Visual Studio, Microsoft Azure などの開発技術を専門とするエバンジェリストとして、技術書籍やオンライン記事などの執筆、さまざまな技術イベントでの講演などを行う。
✓ TypeScript 登場の背景を振り返る
✓ TypeScript の基本的な言語仕様と利用方法を学ぶ
✓ TypeScript の現在の動向と今後を知る
セッションのゴールSession Takeaways
Any developer
Any app
Any platform
Visual Studio Codehttp://code.visualstudio.com/
Code optimized editor
Intellisense, debugging, GIT
Windows + Mac + Linux
Open Source
runtimes node.js, .NET Core, Unity, Office
ソース
コントロール
git
タスク実行
gulpgrunt…
エディタ
30 以上の開発言語
拡張機能 Debuggers, Languages Linters, Snippets, Themes ...
JavaScript is the Assembly Language of the Web.
by Scott Hanselman.
TypeScript
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
Any browser. Any host. Any OS. Open Source.
JavaScript that scales.
JavaScript (ECMAScript) のスーパーセット (上位拡張)
となるオープンソースのプログラミング言語
0
TypeScript コンパイラ (tsc) が JavaScript を生成
静的型付け、クラス、モジュールをサポート
~ Any browser. Any host. Any OS. Open Source. ~
Official Web Sites
www.typescriptlang.org
クイック スタートサンプル
github.com/Microsoft/TypeScript
ソースコードドキュメント
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 など
1. 2.
3.
function greeter(person) {return "Hello, " + person;
}var user = "Jane User";var message = greeter(user);
JavaScript のあいまいさを排除し、安全性・可読性・生産性を向上
interface I { }
class C { }
module M { }
{ s: string; }
number[]
() => boolean
// Numberlet x: number; // 明示的let y = 0; // y: number と同じ
// Booleanlet b: boolean; // 明示的let yes = true; // yes: boolean = true と同じ
// Stringlet s: string; // 明示的let n = "akira"; // n: string = "akira" と同じ
// Enumenum Color { Red, Green, Blue }let myColor = Color.Red;Console.log(Color[myColor]); // Red
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());
ジェネリクス (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; }
}
tsconfig.json
http://www.typescriptlang.org/docs/handbook/tsconfig-json.html
{"compilerOptions": {
"module": "commonjs","target": "es5","noImplicitAny": false,"sourceMap": true
},"exclude": [
"node_modules"]
}
各種 JavaScript ライブラリの変数, オブジェクト, API 等の定義ファイル
http://definitelytyped.org/
型定義ファイルの入手
https://www.npmjs.com/~types
https://aka.ms/types/// <reference types="node" />
※ソースコードで手動参照
※ npm でインストール (package.json で依存関係を管理)
TypeScriptAny browser. Any host. Any OS. Open Source.
JavaScript のスーパーセット
ES 3 以上の環境をサポート
静的型付けとオブジェクト指向
多くの開発ツールのサポート
最新 ES 言語仕様を先取り
JS 開発生産性を向上
Microsoft Developers
© 2017 Microsoft Corporation. All rights reserved.
本情報の内容(添付文書、リンク先などを含む)は、作成日時点でのものであり、予告なく変更される場合があります。