![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](https://image.slidesharecdn.com/dev-011typescriptanybrowser-171222043731/85/DEV-011_TypeScript-Any-browser-Any-host-Any-OS-Open-Source-15-320.jpg)
![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/dev-011typescriptanybrowser-171222043731/85/DEV-011_TypeScript-Any-browser-Any-host-Any-OS-Open-Source-20-320.jpg)
DEV-011_TypeScript ～Any browser. Any host. Any OS. Open Source～
- 2. 井上 章 (いのうえ あきら “チャック”) エバンジェリスト http://aka.ms/chack 2008 年マイクロソフト入社。 主に .NET/ASP.NET や Visual Studio, Microsoft Azure などの開発技術を専門とする エバンジェリストとして、技術書籍やオンライン記 事などの執筆、さまざまな技術イベントでの講演 などを行う。
- 3. セッションのゴール TypeScript 登場の背景を振り返る TypeScript の基本的な言語仕様と利用方法を学ぶ TypeScript の現在の動向と今後を知る
- 4. What programming language do you use? どんなプログラミング言語を使っていますか？
- 5. JavaScript is the Assembly Language of the Web. by Scott Hanselman
- 6. TypeScript TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source. JavaScript that scales.
- 8. 0
- 11. 1.5 1.6 1.7 1.8
- 13. 1. 2. 3. function greeter(person) { return "Hello, " + person; } var user = "Jane User"; var message = greeter(user);
- 14. 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 など
- 15. 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
- 16. 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());
- 17. 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; } }
- 20. http://www.typescriptlang.org/docs/handbook/tsconfig-json.html { "compilerOptions": { "module": "commonjs", "target": "es5", "noImplicitAny": false, "sourceMap": true }, "exclude": [ "node_modules" ] }
- 21. http://definitelytyped.org/ http://definitelytyped.org/tsd/ /// <reference path="ts/angular.d.ts" /> /// <reference path="ts/jquery.d.ts" />
- 29. Google TypeScript + VS Code
- 31. TypeScript Any browser. Any host. Any OS. Open Source. JavaScript のスーパーセット ES 3 以上の環境をサポート 静的型付けとオブジェクト指向 多くの開発ツールのサポート 最新 ES 言語仕様を先取り JS 開発生産性を向上
- 32. 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
- 33. アンケートにご協力ください。 ●アンケートに 上記の Session ID のブレイクアウトセッションに チェックを入れて下さい。 ●アンケートはお帰りの際に、受付でご提出ください。 マイクロソフトスペシャルグッズと引換えさせていただきます。
- 34. ROOM F Ask the Speaker のご案内 ●本セッションの詳細は、EXPO 会場内 『Ask the Speaker』コーナー Room F カウンタにてご説明させて いただきます。是非、お立ち寄りください。 Ask the Speaker EXPO会場MAP