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

タグ: TypeScript Page 1 of 2

【JavaScript】ブラウザ標準APIでInflate/Deflate/gzipするのとStreamのはなし

◆結論

Compression Streams API – Web API | MDN (mozilla.org)

例えばdeflateの解凍だけを関数にしたら以下のとおり。

export const inflate = (data: ReadableStream): Body => {
  const decompressedStream = data.pipeThrough(new DecompressionStream('deflate'));
  return new Response(decompressedStream);
};

export const inflateBlob = (data: Blob): Body => {
  const decompressedStream = data.stream().pipeThrough(new DecompressionStream('deflate'));
  return new Response(decompressedStream);
};

export const inflateArrayBuffer = (data: ArrayBuffer): Body => {
  const resp = new Response(data);
  if (!resp.body) return resp;
  const decompressedStream = resp.body.pipeThrough(new DecompressionStream('deflate'));
  return new Response(decompressedStream);
};

‘deflate’を’gzip’にすればgzipだし、DecompressionStreamをCompressionStreamにすれば圧縮できるし。

上記はTypeScriptなんで、JavaScriptで使おうと思ったら「:」の型指定を消して差し上げろ。exportも不要なら消せ。

◆いきさつ

【TypeScript】nestしたオブジェクトのプロパティにインデックスでアクセスする

◆結

前提として、型安全で引いてくるのは限度がある。

例えばあるオブジェクトの”piyo.a”の値をとりたいときは以下の感じ。

const a = {
  hoge: "",
  piyo: {
    a: "text",
    b: 100,
  },
};

const getValue = (s: string, item: object) =>
  s.split(".").reduce<unknown>((p, c) => p?.[c as keyof typeof p], item);

const b = getValue("piyo.a", a);

この形を取らざるを得なくなったら設計を見直したほうがいい。何かおかしいことをやろうとすると、こういったおかしいコードを書かされるはめになる。

【JavaScript】BlobをCanvasに書き込んだりCanvasをBlobにしてダウンロードしたりPNGを合成したり

メリークリスマス🎅

JavaScriptとPythonは他の言語と比べたらググって出てくる情報がホントに劣悪だよねStackOverflowですラドベントカレンダー、1日目の記事です。(全一日)

◆結論

TypeScriptですが。

const b = new Blob();
const c = document.createElement("canvas");

const bitmap = await createImageBitmap(b);
c.width = bitmap.width;
c.height = bitmap.height;
c.getContext('2d')?.drawImage(bitmap, 0, 0);

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

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

◆理解のキモ

Page 1 of 2

Powered by WordPress & Theme by Anders Norén