2024年11月
          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
無料ブログはココログ

カテゴリー「TypeScript」の記事

2015.02.21

TypeScript 1.4 for Visual Studio 2013 拡張機能

リンク: TypeScript 1.4 for Visual Studio 2013 拡張機能.

こっから、ダウンロードしたのをインストールすれば
TypeScript 1.4になるんだな。

(追記)
変更内容は↓に書いてくれていますw
TypeScript 1.4.1 変更点
TypeScript 1.3.0 変更点
TypeScript 1.1.0 変更点

2014.11.11

TypeScriptメモ(7) jQueryを使う

今まで、http://www.typescriptlang.org/Playgroundを使ってごそごそやってたんだが、本格的に使うなら、Visual Studio 2013 Express 2013 with Update 3 for Webをインストールするのが手っ取り早い。プロジェクトの新規作成にTypeScriptを使用したHTMLアプリケーションがあるのでそれを使うことにする。

まず、jQueryを追加する。ソリューションエクスプローラーのプロジェクト上でコンテキストメニューを表示しNuGetパッケージの管理を選ぶ。

右上のオンラインの検索にjqueryと入力して検索する。

20141008_222533

検索結果のjQueryをインストールする。
このままでは、型定義がないからそのままではTypeScriptでは使えない。
つぎにTypeScriptで使えるように型定義ファイルを追加する。
NuGetパッケージ管理画面でjquery DefinitelyTypedで検索してインストールする。

20141008_222848

htmlファイルに

<script src="Scripts/jquery-2.1.1.js"></script>

を追加して
TypeScriptファイルの頭に

/// <reference path="scripts/typings/jquery/jquery.d.ts" />

を追加するとTypeScriptでjQueryを使えるようになる。
この辺は、ソリューションエクスプローラからソースへドラックアンドドロップでも追加できる。

ほかの有名なJavaScriptのライブラリの型情報ファイルが用意されているようなので同様に検索して追加すると使えるようになる。

2014.10.10

TypeScriptメモ(6) ジェネリクス

C#やJavaのジェネリクスと同じような感じです。

こんな感じ。
// 関数で使う
function a<T>(val:T):void {
	alert(typeof val);
}

a<number>(12);			// numberと表示
a<string>("hoge");		// stringと表示

// クラスで使う
class hoge<T> {
	private aaa:T;
	
	constructor(val:T) {
		this.aaa = val;
	}
	public show():void {
		alert(typeof this.aaa + ":" + this.aaa);
	}
}

var h1:hoge<number> = new hoge<number>(10);
h1.show();		// number:10と表示
var h2:hoge<string> = new hoge<string>("hoge");
h2.show();		// string:hogeと表示

2014.10.09

TypeScriptメモ(5) モジュール

内部モジュールと外部モジュールというのがある。
内部モジュールは、C#のnamespaceやJavaのpackageなんかと同じように名前の衝突をさけたりするもの。外部モジュールは、外部ファイルから参照やロード(動的ロード?)するためのもの。と、勝手に認識してる(^^;)

内部モジュールは次のような感じ。

module hoge {
	//  class bはexportしてないのでモジュール内でしか使えない。
	class b {
		public message(text:string):void {
			alert(text);
		}
	}

	export class a {
		private bbb:b; // モジュール内なので使える
		
		constructor() {
			this.bbb = new b();
		}
		public message(text:string):void {
			alert(text);
		}
		public messageB():void {
			this.bbb.message("messageB");
		}
	}
}

var aaa:hoge.a;
aaa = new hoge.a();
aaa.message("にょ");		// "にょ"って表示される

var bbb:hoge.b;			// class bをexportしていないのでエラーになる。

外部モジュールは、CommonJSやAMDの仕様に合わせたモジュールとしてコンパイルされるものらしい。
これは必要になったときに調べよーwww

2014.10.07

TypeScriptメモ(4) インターフェイス

インターフェイス
C#やJavaのインターフェイスみたいなもの。

// インターフェイスの定義
interface Hoge {
	aaa:number;
	hoge():string;
}
 
// インターフェイスHogeを実装したクラス
class HogeHoge implements Hoge {
	aaa:number;
	constructor() {
		this.aaa = 10;
	}
	public hoge():string {
		return "hogehoge:" + this.aaa;
	}
}
 
var aaa:Hoge = new HogeHoge();
// ↓こんな書き方も出来る
var bbb:Hoge = {
	aaa:20,
	hoge: function() {
		return "bbb.hoge():" + this.aaa;
	}
}
 
alert(aaa.hoge());        // "hogehoge:10"が表示される
alert(bbb.hoge());        // "bbb.hoge():20"が表示される。

2014.08.24

TypeScriptメモ(3) クラス

よし、次はクラスだ。

続きを読む "TypeScriptメモ(3) クラス" »

2014.08.23

TypeScriptメモ(2) 引数の省略、関数のオーバーロード

クラスに行こうかと思ってたが、引数の省略と関数のオーバーロードについて書く。

引数の省略は変数名の後に?をつけると、省略可能になる。省略された場合、変数の値はundefinedになる。

 function hoge(a:string, b?:number) :void {
	alert("hoge:" + a +"," + b);
 }

 hoge("aaa");

この場合、"hoge:aaa,undefined"と表示される。

省略された時のデフォルト値を指定する方法がある。

 function hoge(a:string, b:number = 10) :void {
	alert("hoge:" + a +"," + b);
 }

 hoge("aaa");

この場合、"hoge:aaa,10"と表示される。

可変長引数は、変数の前に…を付けて配列する。

 function hoge(a:string, ...b:any[]):void {
	alert("hoge:" + a +"," + b);
 }

 hoge("aaa",10,2);

関数のオーバーロードは、引数の型が違う関数の宣言を書いておき、型の違う引数のところをanyやobjectにした関数本体を宣言する。その関数内で型のを調べて処理を分岐することでオーバーロードっぽいことを実現する。

 function hoge(a:number):void;
 function hoge(a:string):void;

 function hoge(a:any):void {
	if(typeof a == "number") {
		alert("number");
	} else {
		alert("string");
	}
 }
 hoge(18);

この場合、"number"と表示される。

2014.08.13

TypeScriptメモ(1) 変数宣言、関数宣言

とりあえず(1)とあるが、(2)以降があるかどうかはわからんw

TypeScriptとはJavaScriptに静的型付け、クラスが追加されたものと認識してる。
他にもいろいろあるみたいだが、とりあえずこれだけ押さえておこう(^^;)

静的型付け

変数の宣言に型を指定できて、コンパイル時に違う型の値を代入するとエラーになる。
宣言方法は、

 var hoge:string;         // 変数の宣言
 hoge = "hogehoge";
 hoge = 123;       // ←コンパイル時、エラーになる。

データ型には、number型(数値)、string型(文字列)、boolean型(真偽値)、any型(何でもあり?)、enum型(列挙型)なんかがある。 列挙型の宣言は、

 enum {
     hoge1,
     hoge2
 }

みたいな感じで行う。

関数型?
( a: T1, b:T2 …) => T3 みたいに書く。T1,T2は引数a,bの型、T3は戻り値の型。これはデータ型を書けるとこに書ける。
 var hoge:(a:number) => string;
 
 hoge = function (a:number):string {
	 return "hoge" + a.toString();
 }
関数宣言
こんな感じ。戻り値の型、引数の型を指定する。
function hoge1(a:number) : string {
	return "hoge1_" + a.toString();
}
戻り値のない関数の場合は、voidを指定する。
ふー、ちと疲れた。というかちょっと長くなってきたので今回はここまで。
ということは、クラスについてまだ書いてないのでTypeScriptメモ(2)もありそーだw