TypeScript 1.0 オーバービュー

TypeScript 1.0 オーバービュー井上章 (いのうえあきら) http://aka.ms/chack 日本マイクロソフト株式会社デベロッパーエクスペリエンス & エバンジェリズム統括本部エバンジェリスト

 JavaScript と Web 技術のこれまでを振り返る  TypeScript 登場の背景を知る  TypeScript 1.0 の言語仕様と利用方法を学ぶセッションのゴール Session Takeaways

HTML & Plug-ins Flash Silverlight Java Applet ActiveX …

HTML5 & CSS3 & JavaScript

HTML5 & CSS3 & JavaScript (function ($) { var offsetX = 20, offsetY = 20; $.widget('qs.infobox', { options: { dataUrl: '', maxItems: 10 }, _create: function () { var that = this,name = this.name; }, display: function (event, tagName) { $.ajax({ url: url, dataType: 'jsonp', success: function (data) { }, }); }, }); } (jQuery)); <div class="hoge" /> .hoge { color: red; background-color: #b6ff00; border-radius: 8px; }

JavaScript is the Assembly Language of the Web. by Scott Hanselman.

      Problems of JavaScript

Large scale JavaScript development is hard.

TypeScript Any browser. Any host. Any OS. Open Source.

      Any browser. Any host. Any OS. Open Source.

1. http://nodejs.org/ 2. 3. Compiler and Development Tool ※ TypeScript コンパイラの実体 … AppData¥Roaming¥npm¥node_modules¥typescript¥bin¥tsc.js

TypeScript compilation process TypeScript ファイル (*.ts) TypeScript コンパイラ (tsc.js) JavaScript ファイル (*.js) TypeScript 型定義ファイル (*.d.ts) JavaScript 実行エンジン (Browser, …) Node.js または WSH (WScript.Shell) で実行 ECMAScript 3 または ECMAScript 5 で生成 Web ブラウザーや Node.js など

Compiler Options オプション機能 -d, --declaration 型定義ファイルを生成する -h, --help ヘルプを表示する --mapRoot LOCATION マップファイルの場所をデバッガーに指定する -m KIND, --module KIND 外部モジュール生成の種類を指定する : KIND は commonjs または amd --noImplicitAny 暗黙の any 型の使用を警告する --out FILE 複数の .ts ファイルを一つの .js ファイルとして出力する --outDir DIRECTORY .js ファイルの出力先を指定する --removeComments .ts 内のコメントを .js ファイルに出力しない --sourcemap ソースマップを生成する --sourceRoot LOCATION .ts ファイルの場所をデバッガーに指定する -t VERSION, --target VERSION .js ファイルの ECMAScript バージョンを指定する：ES3 (default) または ES5 -v, --version tsc コンパイラバージョンを表示する -w, --watch 指定したファイルを監視し、変更された時点で逐次コンパイルをおこなう @<file> コマンドラインオプションを外部ファイルから読み込む

       https://github.com/borisyankov/DefinitelyTyped  Typing for Libraries

こちらこちら     Compiler and Development Tool

      Compiler and Development Tool

Official Web Sites www.typescriptlang.org typescript.codeplex.com クイックスタートサンプルソースコードドキュメント

ブラウザベースで手軽に体験

        TypeScript Type System interface I { } class C { } module M { } { s: string; } number[] () => boolean

TypeScript Type System Example // Any var x: any; // 明示的 var y; // y: any と同じ var z: { a; b; }; // z: { a: any; b: any; } と同じ function f(x) { // f(x: any): void と同じ console.log(x); } // Number var x: number; // 明示的 var y = 0; // y: number と同じ var z = 123.456; // z: number = 123.456 と同じ // Boolean var b: boolean; // 明示的 var yes = true; // yes: boolean = true と同じ var no = false; // no: boolean = false と同じ // String var s: string; // 明示的 var empty = ""; // empty: string = "" と同じ var abc = 'abc'; // abc: string = 'abc' と同じ // Null var n: number = null; // 基本型は Null 設定可 var x = null; // x: any = null と同じ // Undefined var n: number; // n: number = undefined と同じ var x = undefined; // x: any = undefined と同じ // Enum enum Color { Red, Green, Blue } var myColor = Color.Red; Console.log(Color[myColor]); // Red

         TypeScript Classes and Modules interface I { } class C { } module M { } { s: string; } number[] () => boolean

TypeScript Interface, Classes Example 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!"; } } var reo = new myDog(); alert(reo.Talk());

TypeScript Module Example module Sayings { var local = 2; export class Greeter { ... } } var gt = new Sayings.Greeter(); // main.ts import log = require("./log"); log.message("Hello"); // log.ts export function = message(s: string) { console.log(s); }

   Generics : Parameterized Types class Human<T> { constructor(public name: T) { } Talk(): T { return this.name; } } var me = new Human<string>("Akira"); alert(me.Talk());

  Arrow Function Expressions var s1 = function (x: number) { return Math.sin(x); } // 標準式 var s2 = (x: number) => { return Math.sin(x); } var s3 = (x: number) => Math.sin(x) var s4 = x => { return Math.sin(x); } var s5 = x => Math.sin(x) var s0: (x: number) => number; s0 = x => Math.sin(x)

  Get Accessor / Set Accessor class Who { private _name: string; get Name() { return this._name; } set Name(name: string) { this._name = name; } } var me = new Who(); me.Name = "Akira Inoue"; console.log(me.Name);

 詳細  詳細   詳細  Unit Test for TypeScript test("will add 5 to number", function () { var res: number = mathLib.add5(10); equal(res, 15, "should add 5"); });

   TypeScript Debugging

    Aligning with ECMAScript 6     Compiler and Language Improvements

JavaScript のスーパーセット JavaScript にコンパイル静的型付けの導入多くの実行環境をサポートオープンソース

TypeScript A language for large scale JavaScript development.

TypeScript Books 著者 : わかめまさひろ著者 : 川俣晶著者 : 川俣晶

    Typing for the jQuery /// <reference path="jquery.d.ts" /> ...

  http://www.typescriptlang.org/   http://typescript.codeplex.com/   http://go.microsoft.com/fwlink/?LinkId=267238   http://channel9.msdn.com/Events/Build/2014/3-576   https://groups.google.com/forum/#!forum/typescript-japan   https://www.facebook.com/groups/wTypeScript/ Resources

TypeScript 1.0 オーバービュー

by Akira Inoue, Developer Evangelist at 日本マイクロソフト株式会社

on Jun 14, 2014

Statistics

Views

Actions

0 Embeds 0

Accessibility

Categories

Upload Details

Usage Rights

Report content

TypeScript 1.0 オーバービュー Presentation Transcript