Post on 11-Jul-2020
JavaScript と Web 技術のこれまでを振り返る
TypeScript 登場の背景を知る
TypeScript 1.0 の言語仕様と利用方法を学ぶ
セッションのゴールSession Takeaways
HTML & Plug-ins
FlashSilverlight
Java AppletActiveX…
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.
TypeScriptAny 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 など
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
// Anyvar 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);
}
// Numbervar x: number; // 明示的var y = 0; // y: number と同じvar z = 123.456; // z: number = 123.456 と同じ
// Booleanvar b: boolean; // 明示的var yes = true; // yes: boolean = true と同じvar no = false; // no: boolean = false と同じ
// Stringvar s: string; // 明示的var empty = ""; // empty: string = "" と同じvar abc = 'abc'; // abc: string = 'abc' と同じ
// Nullvar n: number = null; // 基本型は Null 設定可var x = null; // x: any = null と同じ
// Undefinedvar 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.tsimport log = require("./log");
log.message("Hello");
// log.tsexport 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 にコンパイル
静的型付けの導入
多くの実行環境をサポート
オープンソース
TypeScriptA language for large scale JavaScript development.
TypeScript Books
著者 : わかめまさひろ 著者 : 川俣晶 著者 : 川俣晶
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> コマンドラインオプションを外部ファイルから読み込む
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
アンケートにご協力ください。
●アンケートの「Breakout Session」記入欄に、上記の【Session ID】を
ご記入ください。
●アンケートはお帰りの際に、受付でご提出ください。
マイクロソフトスペシャルグッズと引換えさせていただきます。
Ask the Speaker のご案内 Ask the Speaker
展示会場MAP
●本セッションの詳細は、展示会場内
『Ask the Speaker』コーナー
Room B カウンタにてご説明させて
いただきます。是非、お立ち寄りください。