const obj1 = { foo: 42, ...({ foo: undefined }), }; // {foo: undefined} const obj2 = { foo: 42, ...({}), }; // {foo: 42} ↑こんな感じで、undefinedが指定されているときとプロパティ自体がないときでは動作が異なります。 (実は上のコードはそのまま…

いっつも書き方を調べてるのでここにメモを残しておく。 import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App.tsx'; import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink, from, } fr…

使い方 使いたい箇所より上のコンポーネントに <ToastProvider> を追加して(↓こんな感じ)、コンポーネント内で const toast = useToast(); で使う感じです。 createRoot(document.getElementById('root')!).render( <ToastProvider> <App /> </ToastProvider> ); const App = () => { const toast = useToast(); re</toastprovider>…

発端: ApolloClient の useQuery の data と error をいい感じに扱うために getOrThrow(data, error, 'path.to.field') みたいなユーティリティ関数が欲しくなった 欲しい関数 const {loading, error, data} = useQuery(query); const fooBar = getOrThrow(d…

(ただし有用な場面はそんなにないです) infer に同じ名前を指定すると、ユニオン型になる 基本的に、infer に同じ名前を指定すると、それらをうまく満たすようなユニオン型になります。 以下の X1,X2,X3 はすべて number | string です。 type X1 = [number,…

以前pubsub パターンのベタープラクティスを考えたんですが、よく考えたらイベント名を設定する必要なかったです。 これでよさそう↓ class PubSub<Payload extends unknown[]> { private listeners: ((...payload: Payload) => void)[] = []; subscribe(callback: (...payload: Payload)</payload>…

In short: ES2017 が動く環境を対象にビルドするなら 例として ES2017 が動く環境を対象にビルドを考える。 tsconfig の target に es2017 を指定 tsconfig の lib に es2017 を指定 dom も必要であれば加える 他の機能、例えば Array.prototype.flat が欲し…

import { setupServer } from 'msw/lib/node'; import { rest } from 'msw'; type ArticleResponse = { title: string; id: string }; setupServer( rest.post('/article', (_req, res, ctx) => res( ctx.json({ title: 'mocked article', id: 'id' } satisf…

useRef<Readonly<HTMLElement>>(null) とすれば ref.current.innerHTML = '' などを禁止できる。つまり、setter として ref を使わないという意思表示になる。 まあ、setAttribute とか appendChild は防げないので完璧ではないですが</readonly<htmlelement>

短いコードのほうが読みやすい傾向はあります。しかしながら、 短くて誤読しやすいコードよりは、長いけど誤読しないコードのほうが可読性が高いです。 今回はその話をします。 「短ければ可読性が高い」というのは勘違い 短くても可読性が低いコードはあり…

JSON.stringify(undefined) は undefined です。 以上です。 JSON.stringify(undefined) の結果は？— panda noir (@le_panda_noir) 2022年1月20日 正答率10%。みんな undefined を渡したときの挙動を知らなかったっぽいですね(僕も知りませんでした) 補足 JS…

In short: 関数が reference を返す場合(useRef の返り値など)は返り値のみにジェネリクスを使っても問題ない fetch のような返り値が引数の内容によって決まるケースでも(型安全性は犠牲になるが)使うことがある。 ジェネリクスの一般的な用途 そもそもジェ…

https://github.com/Fieldscope/flux-hooks を参考にしつつ、型をつけたり型推論が効きやすいように調整したりしてます。 export const useFluxStore = < TStore extends ReduceStore<TState, unknown>, TState = ReturnType<TStore['getState']> >( store: TStore, reducer: (store: TStore) => T</tstore['getstate']></tstate,>…

苦節半年くらいしてようやく実現できてメッチャうれしいので記事も書くぞ！！！ Context のネストがつらい React の Context、いくつも書くとなるとネストがどんどん深くなっていってつらいですよね。 <ContextA.Provider> <ContextB.Provider> <ContextC.Provider> <ContextD.Provider> <ContextE.Provider> ... </ContextE.Provider> </ContextD.Provider> </ContextC.Provider> </ContextB.Provider> </contexta.provider>

TSX のなかでジェネリクスを書くとき、<T> の代わりに <T extends unknown> と書くテクニックは有名ですよね const f = <T>(n: T) => n; // <T> が JSX として認識されてコンパイルできない const g = <T extends unknown>(n: T) => n; // これは OK しかし、 @typescript-eslint/no-unnecessary-type-constr</t></t></t></t></t>…

React で遅延読み込み機構を作ってみました。 デモ github.com コード useShown と useUpdateHeight という2つのフックを使って実現します。useShown はスクロール状況から「読み込みを開始すべきか」を判定します。useUpdateHeight はコンポーネントの高さ…

なんらかの payload を渡したいとき、インターフェイスを定められない。これに尽きる。静的型付けとも相性が悪い。 payload と言ってるのは要するに window.addEventListener(eventName, event => {}) の event のことだ。TypeScript はかなり頑張って型付け…

こちらの論文を参考に書きました。 http://citeseerx.ist.psu.edu/viewdoc/download;jsessionid=D04E90C1CB92030C1B92452FB9E192A0?doi=10.1.1.22.8523&rep=rep1&type=pdf 実装 さくっと実装をまずお見せします。 const mergeSort = (arr: number[], L = 0, …

detailsを閉じているときに DOM を消しておきたいので作りました(作成時間5分) const Details: VFC<{ summary: ReactNode; detail: () => ReactNode }> = ({ summary, detail, }) => { const [showsDetail, setShowsDetail] = useState(false); return ( <details open={showsDetail} onToggle={() => se</details>…

touch イベントと mouse イベントの両方に対応したいとき、touchstart 内で preventDefault を呼び出すというテクニックがあります。こうすると、touchstart、touchend のみが発火してそのあとのmousedown、mouseup、click が発火しなくなり、touch イベント…

数値の Enum であればかんたんに重複なく生成できます。 // 0始まりの連番を生成 const [ITEM1, ITEM2, ITEM3] = Array(10).keys(); (この例では ITEM1 などが number になってしまっています。最後にいい感じに型付けする方法をおまけで紹介しています。) …

immer っぽい API だとうれしいなと思って書いてみました。 元となるコード (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.emulate(iPhone); await page.goto('https://example.com'); await…

名前から既にワクワクするこのAPIは、なんとPromiseを返すsetTimeout、setInterval関数を提供しています！最高です… というわけで今回はそれの紹介です。 基本的な使い方 await setTimeout(1000) ←これができるんです！素晴らしくないですか？？ top-level a…

TypeScript を使っていて、「この関数、他のディレクトリからはアクセスして欲しくないんだけどテストのために export しなきゃ行けないな…」みたいなケースありませんか?実は、ESLint でうまく設定してやると解決できます！今回はその方法を紹介します。 お…

ちょっとした小ネタ。 type Empty1 = {}; // これはLinterに怒られる type Empty2 = {[key in string | number | symbol]: never}; // こっちはOK 使用例 APIレスポンスの返り値の型など、JSON周りでの使用パターンが多そうです。 const json = fetch('https…

こんな感じの型です type Fuyu = Permutation<'あんたは' | 'ここで' | 'ふゆと' | '死ぬのよ'>; // ['あんたは', 'ここで', 'ふゆと', '死ぬのよ'] | ['あんたは', 'ここで', '死ぬのよ', 'ふゆと'] | ['あんたは', 'ふゆと', 'ここで', '死ぬのよ'] | ... …

github.com 概要 TypeScript で書かれています d.tsファイルを同梱しています テストカバレッジは99%です ルービックキューブの回転をシミュレートできます 回転記号の表記ゆれにも対応しています インストール npmで公開しています。 $ npm install @pandan…

esbuild はプラグインなしで JSX・TSXをコンパイルできるから、React のプレイグラウンドがすぐ作れる！！ $ npm init --yes $ npm i esbuild react react-dom $ esbuild src/main.tsx --bundle '--define:process.env.NODE_ENV="development"' --outfile=ou…

たとえば、以下のようなジェネリクスを使ったコンポーネントを考えます。 <Component<string> prop1="string" prop2="string" ref={ref} /> Component の prop1 と prop2 は同じ T 型とします(上の例では T は string)。 ref がなければカンタンに実装できる ref さえなければ</component<string>…

Vue2からVue3へ書き直す際に情報が不足していて困ったのでまとめておきます。 公式ドキュメント まだversion3の公式ドキュメントは揃っていません。マージされたPRかRFCを見るしかない状況です。 migrate from v2 to v3 ※「これだけ押さえれば7割くらいは移…