はじめに Reactをやりはじめてimport なにがしみたいなモジュールを取り込むやり方に憧れて、そういう環境作れないかと試行錯誤した結果です。gruntとかは毎回準備するにはヘビーなので入れてません。 ということで備忘録開始。 1回だけやればいい作業 node.…

onChangeで選択された値を渡してくれるコールバックと、defaultValueで、初期選択の値を設定できるみたいな感じです。 ラジオボタンのリストの要素はoptionタグで指定できる雰囲気でいってみましょう。 まず、プロパティを定義します。 interface RadioListP…

なんとなくReactのチュートリアルをTypeScript JSXでこなせるような気がしてきたので、やってみたいと思います。 facebook.github.io プロジェクトの初期設定とかは以下の記事を参照してください。 blog.okazuki.jp 最初のコンポーネント 最初はCommentBoxと…

ということができるみたいですね。 fontSize → font-sizeみたいな感じのルールでJSのオブジェクトのプロパティをCSSのstyleの名前に変換してくれるみたいです。こんな感じで /// <reference path="typings/tsd.d.ts" /> var h2Style = { fontSize: 40, color: 'red', backgroundColor: 'yellow' };</reference>…

JSXとかだとgetDefaultPropsというメソッドを定義しておくとプロパティのデフォルト値として使ってくれるんですがTypeScriptの場合違うらしい。 どうやるかというと、デフォルト値がほしいプロパティの定義に?をつけて必須じゃなくしてから、public static d…

今まではタグを組み立ててただけですが、今回はReactComponentというものを作ります。 propsとstateというものをReactComponentを持ってるみたいですが、propsはイミュータブルでstateに変更する予定のある値を突っ込むみたいなイメージっぽいです。ReactCom…

今まで別にTypeScript JSXじゃなくてもいい書き方をしてたのですが、ついにJSXらしい書き方をしてみようと思います。 このコードを /// <reference path="typings/tsd.d.ts" /> var section = React.DOM.section( { className: 'container' }, React.DOM.h1({ className: 'header' }, 'React!!'), </reference>…

React.jsはReact.DOMに各種タグを簡単につくるためのファクトリメソッドが定義されています。使ってみましょう。 /// <reference path="typings/tsd.d.ts" /> var section = React.DOM.section( { className: 'container' }, React.DOM.h1({ className: 'header' }, 'React!!'), React.DOM.ul( { c</reference>…

同じ名前のタグを沢山組み立てるときに楽ができるReact.createFactoryという関数があるみたい。こんな感じで、liタグを沢山作るときにあらかじめliタグを作るファクトリを定義することができる。 /// <reference path="typings/tsd.d.ts" /> var h1 = React.createElement('h1', { className: 'hea</reference>…

createElementメソッドを使ってせっせとタグを組み立てることができます。タグ名、属性、子要素という感じみたいです。 /// <reference path="typings/tsd.d.ts" /> var h1 = React.createElement('h1', { className: 'header' }, 'これはReactです'); var p = React.createElement('p', null, 'Re</reference>…

先ほどは、CDN上のReactを読み込みましたが、手元にreactのjsファイルを持ってくる場合。 bowerを使いました。（Visual Studio関係ない） npm install bower -g と入力してbowerを入れます。bowerはgitを使うみたいなので、gitをインストールしてPATHを通し…

試行錯誤した結果です。 Reactは言わずと知れたFacebookが作ってるライブラリですが、最近Visual Studio 2015 Update 1でtsxというTypeScriptでJSXをサポートするみたいなものが出てきました。今回はこれを使って遊んでみたいと思います。 node.jsのインスト…

こんなバグがあるバージョンのTypeScriptもあります。 typescript definition from lib.d.ts - Stack Overflow 拡張機能からTypeScriptで検索して新しいの入れたらなおってました。

TypeScriptでページに対応するViewModelを作ります。今回はリストを持っただけのシンプルなやつ。 ポイントはアイテムが選択されたときに呼び出されるようにするclickプロパティ。WinJS.Utilities.markSupportedForProcessingを呼び出してるところ。これをす…

WinJSにはTypeScriptの型定義も用意されています。winjs.TypeScript.DefinitelyTypedがそれになります。これを使うとWinJSに用意されてるWinJS.ClassやWinJS.Namespaceとか使わなくても名前空間とかクラス定義ができるのが個人的には性に合ってそうな気がし…

結構めんどくさい。とりあえず動いたのでメモ。 ng.resource.IResourceを継承したものを作る プロパティを生やす IResourceServiceからIResourceClassを作る IResourceClassのgetの戻り値を自作のIResourceを継承したものにキャスト あとは好きにする /// <reference path="scripts/typings/angularjs/angular.d.ts" /> /</reference>…

カオスな感じですが、AngularJSを使ってForm認証を行うサンプルを作成しました。ちょっと自信がないので、突っ込み歓迎です…。 TypeScript + AngularJSでASP.NETのForm認証を行う in C#, JavaScript for Visual Studio 2013 基本的にはASP.NET Identityでユ…

ただのメモです。 AngularJS使っててエラーがでたら以下の点を確認すること。 必要なモジュールは読み込まれているか angujar.module("hoge", [ここを確認]) 必要なjsファイルは、ちゃんとページに読み込まれているか typoしてないか $routeProviderを$rootP…

ルート定義のwhenメソッドの第二引数のresolveでは、コントローラに注入したいデータを取得する処理を定義することが出来ます。 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> /// <reference path="scripts/typings/angularjs/angular-route.d.ts" /> module TypeScriptAngularJSApp2 { angular.module("MyApp", ["ngRoute"]) // コントローラの定義。value1とvalue2を</reference></reference>…

サービスのインスタンスは1つ。ということは、同じサービスをページ間で共有すればデータを渡すことが出来るということです。ということでやってみました。 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> /// <reference path="scripts/typings/angularjs/angular-route.d.ts" /> module TypeScriptAngularJSApp2 { // データ共有用のサービス class SampleService { ke</reference></reference>…

とりあえずパラメータを使うのが一番楽そうです。パラメータはng.ILocationServiceのsearchメソッドにオブジェクトを渡してやるといい感じに面倒を見てくれます。 前回の処理に、ページ間のデータ渡しをコントローラに追加したコードは以下のような感じにな…

ng.ILocationServiceを使います。 ルートの定義 $locationでng.ILocationServiceをコントローラにインジェクションできるので、そいつのpathメソッドにURLを指定することで画面遷移が出来ます。 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> /// <reference path="scripts/typings/angularjs/angular-route.d.ts" /> module TypeScriptAngularJSApp2 { // Page1用のス</reference></reference>…

AngularJSのかなり強力なディレクティブという機能のハローワールドしてみました。こいつAngularJSでDOM操作する処理をカプセル化する素敵なやつです。とりあえず、JavaScriptではなくてTypeScriptでは、どういう風にかくのかというのをつかむために、Hello …

毎回NuGetからAngularJSと型定義入れたりするのがめんどくさくなったので、プロジェクトテンプレート化しました。zipのまま、TemplatesのProjectTemplatesフォルダにつっこめば使えると思います。

Single Page Applicationだとしても、疑似的にページ切り替えしますよね。ということで、そのための機能がAngularJSにもあります。 使い方 angular-route.js(min.js)をangular.js(min.js)の後に追加。angular.moduleのモジュール作成時に"ngRoute"への依存関…

サービスというものは、シングルトンで管理されるコントローラあたりから使うものみたいです。作り方はコントローラと大して変わらないけど、モジュールのserviceメソッドで登録するらしい。 ということで、サービスとスコープとコントローラを定義してみた…

お手軽にDOMの要素の表示非表示を切り替えれるっぽいということで試してみました。バックのTypeScriptは、フラグを1つもったScopeを定義して、それをtrue/falseを切り替えるだけのシンプル実装 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> interface ToggleMenuScope extends ng.IScope { isShow: </reference>…

入力フォームとかで使いそうです。先ほどの例では、ボタンに直接ng-clickをつけて関数を割り当ててましたが、formでやるように改造してみます。ちなみにTypeScript側は下と同じです。 TypeScriptとAngularJS「プロパティの監視とコレクションのバインド」 - …

とあるプロパティの値の変化を監視して、その中身をコレクションに履歴として収集するようにするアプリを組んでみました。ここまで、すんなりいってるので怖いです。 TypeScript側 ポイントは$scopeの$watch関数。こいつに監視したいスコープのプロパティを…

やってることは大したことではないけど、実際のプログラムでは、スコープに持たせるのは単純なプリミティブ型ではなくてオブジェクトですよね。ということでやってみた。結果としてはちゃんと動いた TypeScript側 /// <reference path="scripts/typings/angularjs/angular.d.ts" /> module MyApp { // scopeに持たせるオ</reference>…