TypeScript Property 'value' does not exist on type 'Element'

TypeScriptでvalueプロパティーに値を設定したコードにコンパイルエラーが発生していた。

エラー内容は、 「hoge.ts:176:30 - error TS2339: Property 'value' does not exist on type 'Element'.」 というものだった。

コードはごくごく簡単なdomを選択してvalueプロパティに値を設定するというもの。

document.querySelector('._foo').value = "bar";

調べてみるとキャストを行う必要があり、HTMLInputElementにしたら問題が解決した。

(<HTMLInputElement>document.querySelector('._foo')).value = "bar";

正直にカミングアウトすると、毎回、こうするの結構、めんどくさい。

TypeScript Property 'submit' does not exist on type 'Element'

TypeScriptでsubmitメソッドを書いたコードにコンパイルエラーが発生していた。

エラー内容は、 「hoge.ts:176:30 - error TS2339: Property 'submit' does not exist on type 'Element'.」 というものだった。

コードはごくごく簡単なdomを選択してsubmitメソッドを使うというもの。

var _foo = document.querySelector('._foo');
_foo.submit();

調べてみるとキャストを行う必要があり、HTMLFormElementにしたら問題が解決した。

var _foo:HTMLFormElement = document.querySelector('._foo');
_foo.submit();

正直にカミングアウトすると、毎回、こうするの結構、めんどくさい。

taggleプラグインでaddメソッドを使った時のonTagAddメソッドの挙動について

taggleプラグインでaddメソッドを使った時にonTagAddメソッドが設定されている場合、どのような引数で呼ばれるのか気になったので調べてみた。

var Taggle = require("taggle");
var _taggle = new Taggle('hoge',{
    onTagAdd: function(event, tag){
        console.log(event)
    }
});
_taggle.add(['foo'])

taggleプラグインを初期化する時に、onTagAddメソッドの設定を行い、そのあと、addメソッドでタグを設定する。

結果として、console.logにはnullが設定されていた。

sean.is

Android StudioでMonacaのandroidアプリのデバッグがやりやすくなった件

Monacaの公式マニュアルで確認すると、Android Studioでデバッグする場合、新規プロジェクトの作成を行うか既存のプロジェクトを開く必要があった。

docs.monaca.io

久しぶりにAndroid Studioでデバッグする機会があり、改めて確認したら、上記の方法をとらずにデバッグする方法があったので、備忘録としてまとめる。

まず、Android Studioを起動させ、右下にある「Configure」の「AVD Manager」を選択

Android Studio 起動画面

次に、「Create Virtual Device」を選択

Create Virtual Device

デバイスの選択を行う

Choose a device definition

OSを選択してダウンロード

Select a system image

ライセンスの許諾を行う

License Agreement

コンポーネントのダウンロードをひたすら待つ

Component Installer

ダウンロードが完了したら「Finish」

Finish

OSのダウンロードも完了したので、端末とOSを組み合わせてFinish

Verify Configuration

作成が完了したら再生ボタンを押してデバッグ

Virtual Devices

Android エミュレーター

TypeScriptのEventTargetでコンパイルエラーになってしまう件

TypeScriptでaタグにclickイベントを追加した時の話。

document.querySelector('a').addEventListener('click',(e)=>{
  let _currentTarget = e.currentTarget;
  let _href = _currentTarget.getAttribute('href');
});

onClickでイベントが発生し、イベントが起きたaタグに対するhref属性をcurrentTargetから取得するごくシンプルなプログラムなのだがコンパイルエラーが発生する。

エラーの内容は、

Property 'getAttribute' does not exist on type 'EventTarget'

で、どうすればいいのか調べた。

調べた結果、instanceofメソッドを使ってコンパイルエラーを解消することができた。

document.querySelector('a').addEventListener('click',(e)=>{
  let _currentTarget = e.currentTarget;
  if(_currentTarget instanceof HTMLAnchorElement){
    let _href = _currentTarget.getAttribute('href');
  }
  
});

果たしてここまで実装しないといけないのだろうか？

ちょっと疑問に感じてしまった。

npmとwebpackでqsを使う

jQueryを使わずにajaxを行う場合、いくつかの選択肢があり、その中の一つとしてaxiosがあります。

axiosでajaxを行う際に、注意点が一つあり、リクエスト時にパラメータをJSONとして送信してしまいapplication/x-www-form-urlencodedフォーマットとして送信してくれない。

そこで、代案としてURLSearchParamsを使う方法があるのですが、IE11が対応していないので別の手段を探す必要がある。

探した結果、見つけ出したのが、qsというquery stringをパースしてくれるプログラムでした。

github.com

使い方はとても簡単で、まずは、npmでインストールを行う。

npm install qs

requireメソッドを使ってqsをインクルードする。

var _qs = require('qs');

axiosでajaxを行う際は、パラメータを文字列にできればいいので、stringifyメソッドを使う

var _qs = require('qs');
var _foo = _qs.stringify({test:'hoge'});
console.log(_foo)
// test=hoge

最後に、webpackコマンドを叩けばOK

Firebaseに最適な Node.jsのバージョンは8

確かうる覚えなのだが、FirebaseをNode.js経由で使う場合、Node.jsのバージョンは8がよかった記憶があるのだが、なんで10ではないのだろうと疑問に感じて調べた。

調べた結果、Cloud FunctionsのNode.jsがバージョン8に対応しており、10はベータなので、少し古いNode.jsを過去に選択していたことがわかった。

firebase.google.com

書いておかないと忘れるな、これ。