前提として、型安全で引いてくるのは限度がある。
例えばあるオブジェクトの"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と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);
この記事は「恐怖！ねばねばオクラ納豆大好き人間アドベントカレンダー」という有りそうで無かった（今もない）アドベントカレンダーの25日目の記事です。メリークリスマス。
タイトルオチなんだが、tsconfig.jsonのcompilerOpsions.types配列に指定しろ。
Webフロント開発してて、.env使おうと思った。いつもはVue CLIくんが勝手にセットアップしてくれるんで何も考えずに使ってたんだけど、「process.env.NODE_ENV」を読もうとして起こられた。
名前 'process' が見つかりません。ノードの型定義をインストールする必要がありますか? npm i --save-dev @types/node を試してから、お客様の tsconfig の型フィールドに node を追加してみてください。
「型フィールド？なんかつよそうだね。」「俺はお客様ではない。」と思って、とりあえず英語版のエラメを見てきた。
フェードインとか。
おまけもあるよ💖
古いブラウザは知らない。帰れ。
…
…いや、帰れよ。何だよその目は。
…かーえーれっ！かーえーれっ！
ｳｪﾋﾋﾋｗｗｗ
あ！泣いてやんの！だっせ！だっせ！
まえに、画像の遅延読み込みについて書いたんです。そこで登場したIntersection Observerくんが活躍します。応援してあげてください。
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した結果の型が欲しすぎない？喉から胃液が出るほど欲しい。
メモ。所詮メモ。
TypeScriptでなんとなく使う方法も書いておく。
Z|[+-](0\d|1[012])(:?[012345]\d)?
「Z」が取れちゃう問題点として、日付を表現してない文字列を処理したときに、その文字列に「Z」が混入してたらTime Zoneだと勘違いして引っ掛けちゃう可能性あるよね。
誰が読むのかわからんからクッソ冗長に説明してみる。
例えば「hoge」というおなまえのオブジェクトがあって、それが「prop」というbooleanなプロパティを持っているときの操作について考える。
let hoge = { prop: true };
if (hoge.prop) console.log('ちばけんま！');
一行目でhogeを作成して、次の行のifにおいてhogeのpropを読みだした。その結果はtrueであるから、consoleに「ちばけんま！」とlogされた。
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.
※ほぼ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;
})
Powered by WordPress & Theme by Anders Norén