JavaScript to TypeScript Type Definitions (d.ts) Auto Converter 0.1.0


お久しぶりです。最近TypeScriptで遊んでるすてねこです。

JavaScriptからTypeScriptの定義ファイルを手作業で頑張って作ってたのですが、とーってもめんどくさくなってきました(

で、自動で変換できないかって思いました。

次の日あたりに簡単なのを試作・・・なんだか、いけそう!

ちょこちょこ改良を重ね無駄な機能をつけていきました!

そろそろ作る気力がなくなってきたので、公開してモチベーションを高めようかとか思います。

まだまだテスト版でバグとかたくさんあるかと思いますが・・・
コメントとか頂けると喜んで改良・修正します!\(>ヮ<)/
ブログまたは、Twitter @suteneko1027 までお願いします~

このアプリケーションを使って何が起こってもすてねこは責任を取りません!
あとアプリケーションの改良して公開したりは取りあえずおやめください><
あ、もちろん、このアプリケーションを使って生成された定義ファイルはご自由に使用してください!

[ 単純な定義ファイルの作り方 ]

1.CodeにJSのクラスっぽいものを書きます
2.Codeの最後に作ったクラスの定義を書きます
(複数ある場合は配列にしてください)
3.Convertを押すとResultとOutput DirectoryにTypeScriptの定義ファイルが生成されます。

4011f89f09dc45bf62ff6eab6498ab4c

無駄機能: Optionsのtypeをtsdからtsに変更してConvertします。
すると関数の定義まで出してくれます。
(※JSから完全なTSができるわけではありません。)

3ba846c0853244067536354f981032ea[1]

[ Node.JSモジュールの定義ファイルの作り方 ]
1.実行ファイルと同じフォルダにnode_modulesフォルダを設置します。(npmとかでインストールまたはコピー)
2.Codeにモジュールのオブジェクトを生成します。
3.Convertを押すとResultとOutput DirectoryにTypeScriptの定義ファイルが生成されます。

2775fe4881271a284602a7a2b677d745

 

[ ダウンロード ]
Windows版 JS2TSD 0.1.0 : js2tsd-win-0.1.0
Mac版 JS2TSD 0.1.0 : js2tsd-mac-0.1.0.app
(Mac版はMac持ってないので、よくわからないけど一応公開します。動いたら報告頂きたいです!)

Linux版は要望あればアップしますー。

どうなってるか詳しくはあとで書きます。。。
オブジェクトからたどったり、関数を文字列化して解析したりしてます。
あとアノテーションも使ってごにょごにょしてます。

Node.js Tools For Visual Studio Can’t Debug?


今月の初めにNode.js Tools For Visual Studio 1.0 betaが公開されましたね。

TypeScriptにも対応しデバッグもできて素晴らしい!

のですが、、なぜか新しいプロジェクトからTypeScriptのNode.jsプロジェクトを作成してもデバッグできない・・・

そもそもDebugで起動すると”debugger listening on port 5858”とでるだけで、app.tsが一行も実行されない。。(※Releaseだと実行されます。)

デバッグできるプロジェクトと比較したところ・・・全てのファイルが完全に一致。でも起動させると、やはり片一方はデバッグできてもう一方はできない。

まさかと思い、デバッグできない方のapp.tsの文字コードを確認するとUTF8 BOM。

はっΣと思いUTF8(BOM無)に文字コードを変更。動いた!!

文字コードの変更は、app.tsを開き、ファイル保存オプションの詳細設定を開き、一番下のほうのUnicode(UTF-8 シグネチャなし – コードページ 65001)を選択してOKでできますー。

6a0bf56113ab15e47e4a137172a4e6c9

追記
app.jsが文字コードUTF8 BOM付になっているかと思います。一度app.jsを削除するか、app.jsの文字コードもBOM無に変更しましょう。

TypeScript Definition Manager


TypeScript型定義ファイルの管理ツール(tsd 0.5~)の使い方
忘れてしまうのでメモ。
※tsd 0.3までと最新の0.5系ではコマンドが全く違います

インストール

npm install -g tsd

初期化

tsd init

定義ファイルのインストール

tsd query モジュール名 --action install

よく使うオプション
-r / --resolve (参照の依存関係を含める)
-o / --overwrite (上書き)
-s / --save (設定を保存)
-a / --action <name> (アクション)
    install (インストール)

オプションを省略せずに書いてたら長いので
tsd query モジュール名 -rosa install

使用例

tsd query node -rosa install
tsd query express -rosa install

tsファイルに定義ファイルの参照追加
typings以下にd.tsファイルがインストールされる
また、全てインクルードするために、tsd.d.tsも自動生成される

/// <reference path="./typings/node/node.d.ts" />
/// <reference path="./typings/express/express.d.ts" />
または
/// <reference path="./typings/tsd.d.ts" />

VisualStudio 2013 Update 2 RC


VisualStudio 2013 Update 2 RCが公開されましたね!

すてねこも早速入れてみたのですが、TypeScriptのプロジェクトが使えなくなってしまいました。。

“プログラムと機能”から”Microsoft Visual Studio Professional 2013″を修復したら正常に動くようになりました!

ちゃんとプロジェクトのTypeScriptのバージョンが古いけどバージョンアップする?って出てきました!

お試しあれー

Rebuild TypeScript


こないだのブログでTypeScript保存時に自動でコンパイルされるようになったのはいいんだけど、、

追加されたファイルとかjsファイルを削除した後、自動でコンパイルされてくれない><。

一つ一つファイルを編集して保存とかとっても面倒です。。

とりあえず、バッチファイルで全てのtsファイルをリビルドできるようにしました。

こんな感じです。

rebuild.bat

for /f "usebackq delims==" %%i IN (`dir "*.ts" /s /b`) DO tsc -t ES5 -m commonjs "%%i"

これを実行することで全てのtsファイルがコンパイルされます。

他にいい方法があれば教えてくださいっ♪

以上です!

Node.js Tools For Visual Studio


忙しくて一カ月もブログを放置してました;; WPFでアプリ書いたりしてました。。

Node.jsVisualStudio上で開発するためのツールの最新版がビルド(2014-03-12)されてました。

Node.js Tools For Visual Studio
https://nodejstools.codeplex.com/releases/view/116275

VisualStudio上でNode.jsをデバッグできたり便利な機能が備わってます。
いつの間にか、npm のパッケージのインストールやアップデートもできるようになってました!

最近、Node.js+TypeScriptで開発してるのですが、tsファイルを追加してもコンパイルされてくれません(´;ω;`)
多分TypeScriptのプロジェクトとNode.jsのプロジェクトファイルをごにょごにょすればできるはずです!

が、それはとっても面倒だなって・・・思ってオプションを見てると、
簡単にできそうなオプションがありました!

[ツール] → [オプション]
[テキストエディタ] → [TypeScript] → [プロジェクト] → [全般]
プロジェクトの一部でないTypeScriptファイルを自動的にコンパイルする

なんだかこれを使えばいけそうです!

b53f8cb25084aca03a7787d735650215

設定してtsファイルを作って保存すると・・・
ちゃんとjsにコンパイルされました!

あ、コンパイルしてるだけなのでtsファイルでブレークポイント設定してもデバッグできないので悪しからず。デバッグはjsでやってくださいっ。

angular-ui-router(0.2.8) release dir is empty…


angular-ui-routerをbowerからinstallするとreleaseフォルダの中身が空だった。。

どうやら間違ってangular-ui-routerのbower.jsonにignore: jsを追加してしまった模様。。

現状修正されてますが、bowerからいれると修正されていない0.2.8が入るので以下のコマンドでインストールしてください。

bower install --save angular-ui-router#0.2.8-bowratic-tedium

0.2.9になると修正されてるでしょう。

Angular-UI-Bootstrap TAB


Angular UI Bootstrapタブを使ってみました。

ngRouteやui-routerを使いだすとbootstrapタブがリンクで切り替えてるため使えなくなってしまいます。

AngularUIにはAngularJSのためのbootstrapコンポーネントが用意されています。

いつも通りbowerでインストールします。

bower install angular-bootstrap --save

スクリプトを読み込みます。

<script src="/vendors/angular-bootstrap/ui-bootstrap-tpls.min.js></script>

tplsテンプレートが含まれているものです。こちらを使う方が無難でしょう。

angularモジュール追加します

var app = angular.module('app', ['ui.bootstrap']);

で使い方はとっても簡単

<tabset>
	<tab heading="ヘッダー1">内容1</tab>
	<tab heading="ヘッダー2">内容2</tab>
	<tab heading="ヘッダー3">内容3</tab>
</tabset>

オプションとかはマニュアル読んでください←

angular-ui bootstrap
http://angular-ui.github.io/bootstrap/

Angular UI Router


前回ngRoute使いましたが、よくよく調べるとangular-ui-routerの方が多機能なようです。

こちらを使ってみましょう!

bower install angular-ui-router --save

インストール完了!

<script src="/vendors/angular-ui-router/release/angular-ui-router.min.js></script>

インクルード!あとはマニュアル通りに使いますー。

var app = angular.module('<app名>', ['ui.router']);

app.config(function($urlRouterProvider, $stateProvider) {
	$urlRouterProvider.otherwise('/index');

	$stateProvider
		.state('index', {
			url: '/',
			templateUrl: '/templates/dashboard.html'
		})
		.state('test', {
			url: '/test',
			templateUrl: '/templates/test.html'
		});
		.state('test.item', {
			url: '/:id',
			templateUrl: '/templates/test.item.html',
			controller: 'TestItemController'
		});
});

テンプレートが入る場所はng-viewではなく、ui-viewになりますー。

<div ui-view></div>

コントローラはこんな感じ

app.controller('TestItemController', function($scope, $stateParams) {
	// URL引数の取得: $stateParams.id
}

リンクするときはui-sref=”状態名”でも可能です。
もちろん今まで通りhrefでも大丈夫です!
引数の指定も簡単☆

<a ui-sref="test"></a>
<a ui-sref="test.get({id:0})"></a>

angular-ui-routerの何が便利かというと、状態に階層を設け、ページの一部分を書き換えることができます。
上記、例の場合。test→itemといった構造になっています。そのため、test.htmlのui-viewがtest.item.htmlに更新されます。

時間が無くなったので今回はこの辺で!

AngularJS angular-route angular-ui-router


AngularJS使っていてngRouteがなぜか動かないなーって思ってたらangular-ui-router使ってました。。。

angular-routeとは全くの別物なんですね。。

bower install angular-route --save

でインストール完了!

<script src="/vendors/angular-route/angular-route.js></script>

インクルード!して、あとはマニュアル通りに普通に使えますー。

angular.module('<app名>', ['ngRoute']).config(['$routeProvider',
	function($routeProvider) {
		$routeProvider
		.when('/index', {
			templateUrl: '/templates/index.html'
		})
		.when('/test', {
			templateUrl: '/templates/test.html'
		})
		.otherwise({
			redirectTo: '/index'
		});
	}
]);

あ、テンプレートで指定した部分はng-viewのところに入ります。

<div ng-view></div>

 

[追記] angular-ui-routerのほうが便利そうだったのでそちらも使ってみました!
http://nekok.com/2014/02/angular-ui-router/