誰が読むのかわからんからクッソ冗長に説明してみる。
◆まず
例えば「hoge」というおなまえのオブジェクトがあって、それが「prop」というbooleanなプロパティを持っているときの操作について考える。
let hoge = { prop: true };
if (hoge.prop) console.log('ちばけんま！');
一行目でhogeを作成して、次の行のifにおいてhogeのpropを読みだした。その結果はtrueであるから、consoleに「ちばけんま！」とlogされた。
タグ: typescript
◆結論
Vue.set使いなはれ。
◆経緯
TypeScriptで連想配列をIndex Signaturesで作るじゃん？んで、その中身書き換えんじゃん？
変更が反映されないんすよ。
private hoge = {} as {[key: number]: string};
private created(){
this.hoge[0] = 'ちんちん';
}
private piyo(){
this.hoge[0] = 'もがもが';
}
piyoを呼んでも内容が書き変わらない。ぴぎゃあ！
イヤー詰まった。
◆結論
当然ながらTypeScriptだよ。なんでJavaScriptなんて使ってるわけ？いい大人がさぁ。聡ずかしくないのかよ。
<v-switch :input-value="hoge" @click="piyo" @change="fuga" />
private hoge = false;
private piyo(e: MouseEvent) {
if (!window.confirm('お前はそれでいいのか？')) e.preventDefault();
}
private fuga(){
// 適当な処理
}
答えが分かれば簡単だった。
◆理解のキモ
◆結論
qs : [New] stringily: Add serializeDate option to customize Date serialization.
◆やりかた
- dayjsをyarn add（あるいはnpm install）
- qsをyarn add
- ふつうTypeSciptを使ってるはずなので、「yarn add @types/qs」もする。
- ここを眺めて、ある程度理解する。
- 下の感じにする。
※ほぼJavaScriptと変わらんが、TypeScriptの書き方だよ。
baseAxios.interceptors.request.use((config) => {
config.paramsSerializer = (params) => qs.stringify(params, {
serializeDate: (date: Date) => dayjs(date).format('YYYY-MM-DDTHH:mm:ssZ') });
return config;
})
IE11ってマジ糞ウンチofウンコのファッキン無能ゴミブラウザだからPromiseは使えないんだけど、BabelでバベればPromise使えます。
で、それとは別に、「発生したエラーをすべてキャッチしたいね」っていう話がありまして、Vueのmain.tsでcatchしようと思った。
だけどもVue.config.errorHandlerがPromiseのrejectionを拾ってくれないという事実が判明して無事死亡。死亡しながら色々ググったらどうやらwindowに「unhandledrejection」のEventListenerをAddすりゃいいという結論に至った。
参考：Window: unhandledrejection イベント
で、IE11で動かなかった。ビルゲイツ殺す。
◆ひとりごと
Swiperじゃなくてtiny-slider使った方が良いような気がする。
◆要件
- カルーセル
- 両端に前後のスライドちら見せ
- 自動送り
- 無限ループ
- 親要素から要素数不明のオブジェクト列を受け取り、その内容からスライドを生成。
- 親要素はaxiosでそのオブジェクト列を取得する。レンダリングとは非同期な通信である。
- TypeScriptで、単一ファイルコンポーネントで、SCSS。
- vue-property-decorator使ってるよ！便利だよ！君も使いなよ！
◆修正しました
◆2019/6/23
修正したんだけど、ちょっとまー残念な感じではある。というのも、Vue 3.0になるまでフラグメントが使えない。だから泣く泣くdivで囲う羽目になった。スタイル当てるのも場合によってはちょっと辛いな。２パターン紹介しているから、好きな方を使え。
Vue 3.0が来たらフラグメント使え。
◆したいこと
- APIで画像を表示する。（SVGじゃないやつ）
- APIで画像が取得できなかった時は、指定の画像を表示する。（SVGでもなんでも）
- APIを2回投げたくない。画像が取得できたのならそれをDataURIの形にしてしまおうと思う。
◆おことわり
以下の成分を含みます。
これから説明するんだけど、どっから説明したもんかわからんから適当に説明する。「わかんね」って人はコメントしてくれ。
Visual Studioで使用することができる「基本的な Vue.js Web アプリケーション」テンプレートでプロジェクトを作成した際に
TS2688 ‘node’ の型定義ファイルが見つかりません。
とか言われた。
Build:名前 ‘Element’ が見つかりません。
Build:名前 ‘HTMLElement’ が見つかりません。
TS2304 (TS) 名前 ‘Element’ が見つかりません。
TS2304 (TS) 名前 ‘HTMLElement’ が見つかりません。
TS2304 (TS) 名前 ‘Node’ が見つかりません。
ぅぅぅうううるせぇ！！！！！！１１１
Visual StudioでTypeScriptなWebサイトを作ってるんだけど、大量にエラーをはいた。
Visual StudioでType Scriptのプロジェクト作って遊ぼうと思ってたんだけど
tsconfig.json で入力が見つかりませんでした。指定された ‘include’ パスは ‘[“**/*”]’ で、’exclude’ パスは ‘[“node_modules”]’ でした。
とか言われた。
結論から言うと俺には解決できず、解決しなくていいエラー（意味不明）だと思う。気付いたら消えてた。
①ググり方
なんか技術者っぽい感じに華麗にググれたから、回答に行きついた手順を書いておく。なんかに役立てればいいよ。要らない人は飛ばせ。