TypeScript その2

年末の休暇を利用してtypeScriptの演習を続行中。 現在まで理解できたところをとりあえず列挙。 nodejs が導入されている必要あり。 npm install typescript -g これで tscコマンドが使えるようになる。 tsc example.ts そして、これでexample.ts から example.jsがトランスパイルされる。 プロジェクトフォルダー内で tsc init とやると、コンパイラー設定用のtsconfig.jsonが作成され規定値が設定される。例えば、出力のJavaScriptのレベルが <pre>”target”:”es5″</pre> などと記述されている。またコードをトランスパイルしたときのエラーの出力設定などもできる。今のところ全く変更の必要のないレベルでトライアル中。 TypeScript は 基本的には JavaScriptのsuper setなのだが、 ’let’, ‘const’, ‘arrow function ()=>’, ‘ … spread operator’,’Template strings’ などes2015の書式が既にサポートされている。 なのでexample.tsではこれらの言語機能を使ってプログラムを書き、tscでトランスパイルすると、これらの表記をまだサポートしていない現行のブラウザでも動くようなJavaScriptに書き換えてくれる。上のConfig例ではes5レベルのコードに置き換わる。 つまりBabelと同じような使い方ができる、。 type safeなので 異なったタイプの変数へのアサインは論外としてもその可能性が生じそうなコードにはエラー表示が鬼のようにでる。例外処理とか、Interface定義を記述して対処すると満足して何も言わなくなってくれるので、バグの可能性のあるコードを書く可能性が低くなる。

SharePoint Column Formatter の使い方

SharePoint Onlineのテナントで一ヶ月くらい前からPushされはじめた機能なのだが、リストのコラムセッティングに”Column Formatting”というのが追加されている。 Text Entry Field になっており、説明は”JSON書式でフォーマットを記入してください”とかなりそっけない。 詳細はOffice Devのほうにある。 ここ 。 さらに書式サンプルのDepositoryがGitHUBにおいてある。 ここ   で、上の記述を参考にListViewのカスタム化を自分で試してみたのがこれ。 ここではCheckedのColumn Formatting に以下を指定 { “debugMode”: true, “elmType”:”div”, “children”:[ { “elmType”: “img”, “attributes”: { “src”: { “operator”:”?”, “operands”:[ “@currentField”, “/_layouts/images/CNSAPP16.GIF”, “/_layouts/images/CbUnChecked.gif” ] }, “aria-hidden”:”true” }, “style”: { } } ] } これでYes/Noの文字表示をアイコンイメージに置き換えている。 Delivery Statusのコラム書式はちょっと長くなる。(参照する各Columnの内部名称をColumn settingsでそれぞれ確認しておく必要があることに注意 下の例では CheckedはCheckedだがDue DateはTaskDueDateになっている) { “debugMode”: true, “elmType”: “div”, “attributes”: { “class”: { “operator”: “?”, “operands”: [ “[$Checked]”, “sp-field-severity–good”, { “operator”: “?”, “operands”: [ { “operator”: “<=”, “operands”: [ “[$TaskDueDate]”, { “operator”: “-“, “operands”: [ “@now”, 86400000 ] } ] }, “sp-field-severity–severeWarning”, { “operator”: “?”, “operands”: [ { “operator”: “<=”, “operands”: [ “[$TaskDueDate]”, “@now” ] }, “sp-field-severity–blocked”, { “operator”: “?”, “operands”: [ { “operator”: “<=”, “operands”: [ “[$TaskDueDate]”, { …