ターニングポイントさん!?

10bace LOG

タグ: typescript

TypeScriptのNull/undefined処理のはなし

誰が読むのかわからんからクッソ冗長に説明してみる。

◆まず

例えば「hoge」というおなまえのオブジェクトがあって、それが「prop」というbooleanなプロパティを持っているときの操作について考える。

let hoge = { prop: true };
if (hoge.prop) console.log('ちばけんま!');

一行目でhogeを作成して、次の行のifにおいてhogeのpropを読みだした。その結果はtrueであるから、consoleに「ちばけんま!」とlogされた。

【Vue】TypeScriptの連想配列がバインドされぬわ

◆結論

Vue.set使いなはれ。

Vue:オブジェクトの変更検出の注意

◆経緯

TypeScriptで連想配列をIndex Signaturesで作るじゃん?んで、その中身書き換えんじゃん?

変更が反映されないんすよ。

  private hoge = {} as {[key: number]: string};
  private created(){
    this.hoge[0] = 'ちんちん';
  }
  private piyo(){
    this.hoge[0] = 'もがもが';
  }

piyoを呼んでも内容が書き変わらない。ぴぎゃあ!

【Vuetify】v-switchとかv-checkboxのchangeをcancelする

イヤー詰まった。

◆結論

当然ながら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(){
    // 適当な処理
  }

答えが分かれば簡単だった。

◆理解のキモ

axiosのgetメソッドでdateをISO8601形式にoffset付きで変換

◆結論

qs : [New] stringily: Add serializeDate option to customize Date serialization.

◆やりかた

  • dayjsyarn add(あるいはnpm install)
  • qsyarn 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でPromiseのunhandled regectionをハンドる

IE11ってマジ糞ウンチofウンコのファッキン無能ゴミブラウザだからPromiseは使えないんだけど、BabelでバベればPromise使えます。

で、それとは別に、「発生したエラーをすべてキャッチしたいね」っていう話がありまして、Vueのmain.tsでcatchしようと思った。

だけどもVue.config.errorHandlerがPromiseのrejectionを拾ってくれないという事実が判明して無事死亡。死亡しながら色々ググったらどうやらwindowに「unhandledrejection」のEventListenerをAddすりゃいいという結論に至った。

参考:Window: unhandledrejection イベント

で、IE11で動かなかった。ビルゲイツ殺す。

Vue.jsとナマのswiperを使ってaxiosで取得したデータを表示したい時のあるある早く言いたい

◆ひとりごと

Swiperじゃなくてtiny-slider使った方が良いような気がする。

◆要件

Vue.jsでimgの:srcにaxiosのresponse.dataをbindしてerrorをcatchした時は違う画像みせたかった人の逸話

◆修正しました

◆2019/6/23

修正したんだけど、ちょっとまー残念な感じではある。というのも、Vue 3.0になるまでフラグメントが使えない。だから泣く泣くdivで囲う羽目になった。スタイル当てるのも場合によってはちょっと辛いな。2パターン紹介しているから、好きな方を使え。

Vue 3.0が来たらフラグメント使え。

◆したいこと

  • APIで画像を表示する。(SVGじゃないやつ)
  • APIで画像が取得できなかった時は、指定の画像を表示する。(SVGでもなんでも)
  • APIを2回投げたくない。画像が取得できたのならそれをDataURIの形にしてしまおうと思う。

◆おことわり

以下の成分を含みます。

これから説明するんだけど、どっから説明したもんかわからんから適当に説明する。「わかんね」って人はコメントしてくれ。

typescript TS2688「 ‘node’ の型定義ファイルが見つかりません。」

Visual Studioで使用することができる「基本的な Vue.js Web アプリケーション」テンプレートでプロジェクトを作成した際に

TS2688 ‘node’ の型定義ファイルが見つかりません。

とか言われた。

typescript TS2304「名前 ‘Element’ が見つかりません。」とか「名前 ‘HTMLElement’ が見つかりません。」とか

Build:名前 ‘Element’ が見つかりません。

Build:名前 ‘HTMLElement’ が見つかりません。

TS2304 (TS) 名前 ‘Element’ が見つかりません。

TS2304 (TS) 名前 ‘HTMLElement’ が見つかりません。

TS2304 (TS) 名前 ‘Node’ が見つかりません。

ぅぅぅうううるせぇ!!!!!!111

Visual StudioでTypeScriptなWebサイトを作ってるんだけど、大量にエラーをはいた。

TS18003 tsconfig.json で入力が見つかりませんでした

Visual StudioでType Scriptのプロジェクト作って遊ぼうと思ってたんだけど

tsconfig.json で入力が見つかりませんでした。指定された ‘include’ パスは ‘[“**/*”]’ で、’exclude’ パスは ‘[“node_modules”]’ でした。

とか言われた。

結論から言うと俺には解決できず、解決しなくていいエラー(意味不明)だと思う。気付いたら消えてた。

①ググり方

なんか技術者っぽい感じに華麗にググれたから、回答に行きついた手順を書いておく。なんかに役立てればいいよ。要らない人は飛ばせ。

Powered by WordPress & Theme by Anders Norén