日本マイクロソフト株式会社パートナー事業本部 パートナー技術統括本部テクニカル エバンジェリスト井上 章 (いのうえ あきら)

～ 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 ...

https://github.com/microsoft/vscode

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 で依存関係を管理)

http://www.typescriptlang.org/samples/index.html

TypeScriptAny browser. Any host. Any OS. Open Source.

JavaScript のスーパーセット

ES 3 以上の環境をサポート

静的型付けとオブジェクト指向

多くの開発ツールのサポート

最新 ES 言語仕様を先取り

JS 開発生産性を向上

Microsoft Developers

© 2017 Microsoft Corporation. All rights reserved.

本情報の内容（添付文書、リンク先などを含む）は、作成日時点でのものであり、予告なく変更される場合があります。