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

10bace LOG

タグ: typescript Page 1 of 2

【TypeScript】declare globalな@typesはtsconfigのtypesに設定しろ

この記事は「恐怖!ねばねばオクラ納豆大好き人間アドベントカレンダー」という有りそうで無かった(今もない)アドベントカレンダーの25日目の記事です。メリークリスマス。

◆結論

タイトルオチなんだが、tsconfig.jsonのcompilerOpsions.types配列に指定しろ。

◆IKISATSU

Webフロント開発してて、.env使おうと思った。いつもはVue CLIくんが勝手にセットアップしてくれるんで何も考えずに使ってたんだけど、「process.env.NODE_ENV」を読もうとして起こられた。

名前 ‘process’ が見つかりません。ノードの型定義をインストールする必要がありますか? npm i –save-dev @types/node を試してから、お客様の tsconfig の型フィールドに node を追加してみてください。

「型フィールド?なんかつよそうだね。」「俺はお客様ではない。」と思って、とりあえず英語版のエラメを見てきた。

JavaScript、TypeScript、Vue、Vuetifyで要素描画時にアニメーションする

フェードインとか。

おまけもあるよ💖

◆おことわり

古いブラウザは知らない。帰れ。

…いや、帰れよ。何だよその目は。

…かーえーれっ!かーえーれっ!

ウェヒヒヒwww

あ!泣いてやんの!だっせ!だっせ!

◆Intersection Observer

まえに、画像の遅延読み込みについて書いたんです。そこで登場したIntersection Observerくんが活躍します。応援してあげてください。

【TypeScript】awaitした結果のtypeを取ってくるやつ

◆結論

declare global {
  type AwaitType<T> =
    T extends Promise<infer U> ? U :
    T extends (...args: Array<any>) => Promise<infer V> ? V :
    T;
}

◆お気持ち

ReturnTypeっていうビルトインのtypeを使えば、「関数の戻り値の型」を引っ張ってこれますよね。

const hoge = (arg: number) => 'ちばけんま!';
type t = ReturnType<typeof hoge>;
// t のtypeは、hogeの戻り値の型であるstringになる。

それと同じノリで、関数の戻り値がPromiseであったらそれawaitした結果の型が欲しすぎない?喉から胃液が出るほど欲しい。

ゆるくISO 8601のTime zoneをとってくるRegex

メモ。所詮メモ。

TypeScriptでなんとなく使う方法も書いておく。

◆結論

Z|[+-](0\d|1[012])(:?[012345]\d)?

▼注意

  1. フルのハイフン時刻表記に対してこの正規表現を通すと死ぬ。つまり、「2020-01-01」の「-01」が取れてくるわけだから、注意ですよね。
  2. 「-12:00」でも「-00:00」でもとれる。それが表記的に正しいかどうかはよくわからん。
  3. 「+09」でも「+0900」でも「Z」でも取れちゃうよ。ISO 8601がそういう仕様だからしゃあないね。

「Z」が取れちゃう問題点として、日付を表現してない文字列を処理したときに、その文字列に「Z」が混入してたらTime Zoneだと勘違いして引っ掛けちゃう可能性あるよね。

参考:ISO 8601 | Wikipedia

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使った方が良いような気がする。

◆要件

Page 1 of 2

Powered by WordPress & Theme by Anders Norén