小ネタ

ビルド用の tsconfig を用意するよりもバンドラに任せた方が楽かもしれない

TypeScript でライブラリ (npm パッケージ) を作るときに, ビルド用の tsconfig を用意することがあります. 例えば以下のような tsconfig.json を作成したとしましょう. { "compilerOptions": { "rootDir": "src", "outDir": "lib", "target": "esnext", "mo…

CloudFront Functions で Next.js のパス解決の真似をする

Next.js から static export した HTML を S3 に配置して CloudFront から配信する, というのはそこそこよくある構成なんじゃないかと思います. 知らんけど. ところで素朴に CloudFront の origin に S3 を指定するだけでは, ページのパスの解決がうまくいき…

Node.js の perf_hooks で雑に関数のパフォーマンス計測

イントロ TypeScript で Array#filter を使うとき, 型が期待通りに絞り込まれないというトラブルがよくあります. const xs: (number | undefined)[] = [1, undefined, 2]; const ys: number[] = xs.filter((x) => x !== undefined); // ~~ // Type '(number …

TypeScript 4.8 でやることといえば: negate にていねいに型をつける

TypeScript 4.8 がリリースされました. これでやることといえば? そう, 数値リテラル型の符号を入れ替えることですね. type Negate<N extends number> = N extends 0 ? 0 : `${N}` extends `-${infer X extends number}` ? X : `-${N}` extends `${infer X extends number}` ? </n>…

TypeScript で実行時の入力を含む文字列を型で弾く

TypeScript (4.7 時点) において, 文字列に付けられる型には以下の 3 つ (とそのユニオン型) があります. 文字列型 string 文字列リテラル型 ("foo" など) テンプレートリテラル型 (`data-${string}` など) これらのうち, 実行時の入力, 特に事前にパターン…

Optional Variance Annotations の挙動メモ

TypeScript 4.7 の optional variance annotations の挙動を若干勘違いしていたのでメモ. 例 1 (Playground): type Extends<A, B> = A extends B ? true : false; type Bivariant<T> = {}; type Bivariant_A0 = Extends<Bivariant<"foo">, Bivariant<"foo" | "bar">>; // true type Biv</bivariant<"foo"></t></a,>…

引数の型を推論してから受け付けるかどうかを決める後出しパターン

2023-05-24 追記 改訂 + α 版を書きました. お題 具体例として, ちょうど長さ 3 の文字列のみを引数として受け付ける関数を作ります. こんな関数を作って何がしたいのかは不明. 先出しパターン よくある手段としては「ちょうど長さ 3 の文字列」のような制約…

TypeScript の型の再帰上限を突破する裏技

TypeScript 4.1 で再帰的な conditional type の定義に制限がなくなり (ref), 今後ますます再帰的な型定義をする / 触れることが多くなろうかと思います. 一方で TypeScript が型をインスタンス化する際の再帰の上限はそこそこ厳しく, ちょっと複雑なことを…

Template String Types でパス文字列を解析してクエリする

※この記事に含まれる内容は TypeScript 4.1 のプレビュー版のものです. 今後仕様が変わり動かなくなる可能性もありますのでご注意ください. 話題の template string types で早速遊んでみます. ゴール .foo[1].bar といった形のパス文字列を型レベルで解析し…

Variadic Tuple Types を使った型レベル自然数演算

つい先日 TypeScript 4.0 RC がリリースされました. めでたいですね. さて TS 4.0 の目玉機能といえばなんといっても variadic tuple types ですが, これが型レベルで自然数の計算をしたいナウなヤングにバカウケということで, 界隈では一時期のタピオカミル…

TypeScript で GADT っぽいの

TypeScript で Haskell にあるような GADT (Generalized Algebraic Data Type) っぽいものをどう表現できるかという話. GADT を使いたくなる例 式をデータとして表現したいことありますよね. あると言ってくれ. 例えば数値と数値上の関数, そして関数適用が…

TypeScript で型レベル Brainfuck

2024-04-15 追記: 内容をアップデートした記事を書きました. susisu.hatenablog.com TypeScript の型システムはチューリング完全ということが知られていますが, 同じくチューリング完全な言語である Brainfuck のインタプリタを実装することで, その計算能力…

TypeScript で型レベル階乗

こんなことがやりたかったんじゃないし, 誰もそんなこと望んじゃいない. でもやる. 動作確認している TypeScript のバージョンは 3.8.3 です. ゴール TypeScript で階乗を計算します. 型レベルで. type F = Factorial<3>; // F = 6 アイデア まずタプル型の …

TypeScript で型レベル Permutations

遊びです. 真に受けないでください. 動作確認している TypeScript のバージョンは 3.8.3 です. ゴール タプル型 XS から, 要素の置換 (permutations) の union 型を作る Permutations<XS> を作ります. type P = Permutations<["A", "B", "C"]>; // P = ["A", "B"</xs>…

TypeScript でネストされたオブジェクト型の書き換え

↓ に対するアンサーソングです. blog.3qe.us 例えばこういう感じの型 T があって, ネストされた内側にある baz の型を number から string に書き換えたいとしますね. type T = { foo: { bar: { baz: number, }, }, }; もしこれが, 書き換える対象のパスを […

Tagged Templates でたのしい Router & Reverse Router

この記事は はてなエンジニア Advent Calendar 2019 15 日目の記事です. 昨日は id:polamjag さんによる Next.js で Google Analytics を使う・2019年冬 - polamjaggy でした. qiita.com こんにちは, Mackerel 開発チームでアプリケーションエンジニアをして…

辞書を作る関数に TypeScript で執拗に型をつける

未来人のみなさまご機嫌いかがでしょうか. この記事が書かれた時点の TypeScript のバージョンは 3.6.4 です. お題 以下の JavaScript の関数に TypeScript で型をつけることを考えます1. function makeDict(prop, entries) { const dict = {}; for (const e…

パターンマッチの構文が前置か後置か覚えられない人がやりがちなこと

突然思い出して随分前のネタを引っ張り出してきました. OCaml と Scala のパターンマッチ構文は共に match というキーワードを使いますが, 前置 / 後置が異なるため, 交互に書いていると混乱して結構な頻度で間違えます. let y = match x with | Some n -> n…

コマンドの出力を HTML に変換して貼り付ける

みなさんも生きていればコマンドの出力をブログに貼り付けたいということがあるでしょう. というわけでコマンド出力をなんとか HTML にして貼り付ける方法のご紹介です. TL; DR: script -q /dev/null <command> | ansi2html -i | pbcopy まず HTML は基本的には以下の</command>…

【下書き】 ドラッグ&ドロップ UI をテストしたい時

気が向いたらそのうちサンプルコードとか付けてちゃんと書きます. 向かなければそのままです. ドラッグ&ドロップには色々な要素が絡んでくる バグが入り込みやすい どうテストしたら良いか? / どうバグを再現したら良いか? 「なんかある操作をしたらバグった…

Mackerel で Cookie Clicker を監視してみた

ステマ記事です. みなさん Cookie Clicker を覚えていますか これです. 昔一瞬流行ったなあ, という感想が出てくることを予想してますが (ついこの前言われた), まだまだ続けている人はいて, 私もその一人です. 過去の記事: Mackerel とは はてなが開発して…

ソースコードをダブルクリックで全選択するやつ

コピペしやすくて便利. 右上に言語名を表示するやつ とくっつけてもいいけど, 多分別々に書いても動くことには動くはず. <script type="text/javascript"> window.addEventListener("load", function onLoad() { window.removeEventListener("load", onLoad); var codes = document.querySel…

ソースコードの右上に言語名を表示するやつ

こういう感じのスタイルシートを当てておいて, pre.code { position: relative; } pre.code[data-lang-label]::before { content: attr(data-lang-label); font-family: 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Kaku Gothic Pro', 'Meiryo', 'MS…

型無しラムダ計算での不動点オペレータの導出

公式は覚えるものではなく, 必要に応じて導出するものだよ (?) 不動点オペレータ 不動点オペレータ (大抵 fix という名前, コンビネータ計算の文脈では Y とも) は Haskell では以下のように定義される関数である. fix f = f (fix f) つまり, fix f は関数 f…

Atom 1.17 でもタブを消す

開いているファイルの管理は tree-view-panes で行っていて, そのためのタブは必要ない とはいえ Dock のタブまで消えてしまうと移動ができなくて困る というわけで以下のようにしている. .tab-bar { display: none; } atom-dock .tab-bar { display: flex; }

npm script の実行順のメモ

2019-02-12 追記 この情報は古くなっている / 間違っている可能性があるので参照しないでください. 最新の情報は https://docs.npmjs.com/misc/scripts とかからどうぞ. npm@4.5 時点. 適当に書いていると (主に prepublish/prepare/prepublishOnly あたりで…

Atom 1.17 beta の Dock のメモ

詳しくはこちらのブログ記事を参考にしてください (1.16 のリリース記事ですが, 下の方に 1.17 beta についても書いてあります). blog.atom.io 1.16 以前のイメージ Workspace Left Panel(Tree View) Pane 1 Text Editor 1 Text Editor 2 Pane 2 Settings Te…

株式会社はてなに入社しました

株式会社はてなに入社しました 株式会社はてなに入社しました - hitode909の日記

Node.js で V8 のプロファイラを使う

余談 どうでもいいようなことを投稿するための「小ネタ」カテゴリを作った. 誰もお前に聞いてないとか, そういう感想歓迎です. 本編 node foobar.js の代わりに, node --prof foobar.js みたいにすると isolate-0x***-v8.log みたいなファイルができる. これ…