Angular ユーザーなら押さえておきたい！ TypeScript と Visual Studio Code の基礎と活用

日本マイクロソフト株式会社
パートナー事業本部パートナー技術統括本部
テクニカルエバンジェリスト
井上章 (いのうえあきら)
～ 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 Code
http://code.visualstudio.com/
Code optimized editor
Intellisense, debugging, GIT
Windows + Mac + Linux
Open Source

runtimes node.js, .NET Core, Unity, Office
ソース
コントロール
git
タスク実行
gulp
grunt
…
エディタ
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
// 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

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

TypeScript
Any browser. Any host. Any OS. Open Source.
JavaScript のスーパーセット
ES 3 以上の環境をサポート
静的型付けとオブジェクト指向
多くの開発ツールのサポート
最新 ES 言語仕様を先取り
JS 開発生産性を向上

Angular ユーザーなら押さえておきたい！ TypeScript と Visual Studio Code の基礎と活用

More Related Content

What's hot

Viewers also liked

Similar to Angular ユーザーなら押さえておきたい！ TypeScript と Visual Studio Code の基礎と活用

More from Akira Inoue

Recently uploaded

Angular ユーザーなら押さえておきたい！ TypeScript と Visual Studio Code の基礎と活用