ウェブフロント
- 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 : neverIf
If<true, 'a', 'b'>のときaを返すような型を実装します。type If<C extends boolean, T, F> = C extends true ? T : FThanks you for reading.