ウェブフロント
- angular
- corewebvitals
- editorconfig
- gatsby
- hls
- html
- javascript
querySelectorAllで取得した要素は配列ではないらしい
JavaScript 配列内のオブジェクトの更新ってどうする?
デバッグ関数とかnullチェック関数をutil/index.tsにおいとけば楽なことに今頃気づいた。
ブラウザからジャイロセンサーを使ってみる
JS 画像のアップロード、プレビュー機能を実装
「数値から各桁の値を取り出す処理」って言われたら数学的な処理が一番に思い浮かぶけど、JSならそんなことなかった。
Callback時代の関数をPromise化する
個人的実装されてほしいECMA Script Proposal
JavaScriptのprototypeを使う
音声をなみなみさせる
AudioWorkletとAudioWorkletProcessorを使って音声のビジュアライゼーション
- next
- nuxt
- playwright
- prettier
- react
- reactnative
- tensorflowjs
- tools
- typescript
- wasm
- websocket
- ポエム
- 開発環境
サーバー
その他
TypeScript Challenges
TypeScript Challengesとは
TypeScriptを使ってさまざまな型を作る競技です。
https://github.com/type-challenges/type-challenges/blob/main/README.ja.md
このブログではTypeScript Challengesを日々精進していきます。
Pick
Pickの実装です。
K extends keyof T
でKをTのプロパティにしています。
例えばTが{a: string; b: string}
のときKはa | b
になります。
[P in K]
でKのUnionの数だけfor文みたいになります。T[P]
で実際にアクセスしています。type MyPick<T, K extends keyof T> = {
[P in K]: T[P]
}
Push
Array.pushをジェネリクスでする実装です。
スプレッド構文をつかって配列を合体させます。
type Push<T extends any[], U> = [...T, U]
Awaited
Promiseな型からPromise解決後の型を取り出す。
Promise<Promise<A>>
のような型に対応できるように再帰処理にしています。
また { then: (onfulfilled: (arg: number) => any) => any }
のようにPromiseなオブジェクトを自作しているものでも
判断できるようにPromiseLikeという型を使っています。三項演算子ってどこで改行すると見やすいのかな...
type MyAwaited<T extends PromiseLike<any>> =
T extends PromiseLike<infer U> ?
U extends PromiseLike<any> ?
MyAwaited<U>
: U
: never;
Omit
Omitはオブジェクトから任意のプロパティを削除した型です。
Exclude
を使ってオブジェクトのプロパティから削除しますtype MyOmit<T, K extends keyof T> = {
[P in Exclude<keyof T, K>]: T[P]
}
Parameters
関数の引数をタプル型で返す型を実装します。
const foo = (arg1: string, arg2: number): void => {}
が来たときに[string, number]
を返します。T extends (...args: [...infer U]) => any
で引数のタプルを取得できます。type MyParameters<T extends (...args: any[]) => any> = T extends (...args: [...infer U]) => any ? U : never
If
If<true, 'a', 'b'>
のときa
を返すような型を実装します。type If<C extends boolean, T, F> = C extends true ? T : F
Thanks you for reading.