React アプリケーションにおいて single source of truth と言った場合, 複数のコンポーネントで同じ値が必要なときは, それぞれのコンポーネントで独立に状態を管理して互いに同期をとるのではなく, ただ一つの場所で状態を管理し, 全てのコンポーネントは…
この記事の内容は typescript@4.5.4 で動作確認しています. TL; DR TypeScript において, オブジェクト型のプロパティは必要になるまで評価が遅延される 遅延されていたプロパティの評価が行われるときには, TypeScript 4.5 の末尾再帰の最適化が効かない 例…
この記事は Mackerel Advent Calendar 2021 の 15 日目の記事です. 昨日は id:kazeburo さんの mkr plugin install 時の403 API rate limit exceededエラーを回避する方法 でした. こんにちは id:susisu です. 普段は Mackerel 開発チームでアプリケーション…
こういう一連の記事を書きました. susisu.hatenablog.com susisu.hatenablog.com susisu.hatenablog.com TypeScript の型安全性 TypeScript の型システムは健全ではありません. TypeScript Design Goals にある通り, そもそも言語設計の段階で完璧な型安全性…
どんどんタイトルが長くなっている. 前回はこちらです. susisu.hatenablog.com 引き続き環境は以下を前提とします: TypeScript 4.4 (この記事を書いている 2021 年 11 月時点の最新版) strict: true # おさらい # Index signature オブジェクト型に index si…
前回はこちら. susisu.hatenablog.com 引き続き環境は以下を前提とします: TypeScript 4.4 (この記事を書いている 2021 年 11 月時点の最新版) strict: true # 原則: オブジェクトの具体的な形にアクセスするのを避ける ここで「オブジェクトの具体的な形に…
ふだん TypeScript のコードレビュー時に参考に貼ったりしている内部ドキュメントがあるのですが, 内部では何かと人目につきにくいので, 内容を整えて公開していきます. TypeScript の型システムは安全ではありません. つまり型検査を通過したコードであって…
mkr とは何ですか? Mackerel の CLI です. GitHub Actions 上で mkr をセットアップする setup-mkr アクションを作りました. github.com こういう感じで uses: susisu/setup-mkr@v1 と一行書くだけで mkr コマンドが使えるようになります. steps: - uses: su…
TypeScript 4.4 に exactOptionalPropertyTypes というオプショナルなプロパティに関するコンパイラオプションが追加されるのを受けて, そもそもオプショナルなプロパティとは何なのか, どういったときに使うと良いのか, exactOptionalPropertyTypes がどう…
お題 具体例として, ちょうど長さ 3 の文字列のみを引数として受け付ける関数を作ります. こんな関数を作って何がしたいのかは不明. 先出しパターン よくある手段としては「ちょうど長さ 3 の文字列」のような制約を満たす型をあらかじめ定義しておいて, 引…
自分の書いたコードのレビューを依頼するとき, 必ず先にセルフレビューするようにしていて, まあまあ上手くいっていると思っている. 元々のモチベーションとしてはコードの品質の向上と (本物の) レビュワーとのコミュニケーションのつもりだったけど, 本来…
主観です 規模はコード行数 (LOC) で考えています 体感的にわかりやすいため 言語・フレームワーク・対象とするドメインなどによって何倍もずれるはず あくまでアプリケーションについての話です ライブラリについてはまた事情が変わってくる コードについて…
状態間の同期は一般的な話題ではあるのですが, 例として React の制御コンポーネントの実装を題材にします. ここで非対称な状態とは, 各状態のとり得る値の集合の間に一対一の対応がないことを指しています. というか一対一に対応するのであればふつうは状態…
TL; DR コードの greppability のために文字列操作を禁止する目的で string literal type (の union) なら受け付けるが string は受け付けないという関数を作っていたのだけれど, どうにも TypeScript が賢くなりすぎてしまった— 塩水うに (@susisu2413) Jan…
私が個人的に作ったものはいくつかはこのブログで紹介したりしていますが, そのように個別に紹介するほどでもない有象無象たちにも出番を与えてみようという企画です. だいたい 2019 年末ぐらいからのものが入っています. tyde github.com 型安全で自分好み…
adventar.org 流れる水が好きなので川見てます。 なんか写真を貼ろうかと思ったんですが、あまり手元になかったのでストリートビューで代用します。 上流に滝があることでおなじみの箕面川です。これは西向きで、午後いっぱい日没まで見ているとよいです。こ…
TypeScript 4.1 で再帰的な conditional type の定義に制限がなくなり (ref), 今後ますます再帰的な型定義をする / 触れることが多くなろうかと思います. 一方で TypeScript が型をインスタンス化する際の再帰の上限はそこそこ厳しく, ちょっと複雑なことを…
※この記事に含まれる内容は TypeScript 4.1 のプレビュー版のものです. 今後仕様が変わり動かなくなる可能性もありますのでご注意ください. 話題の template string types で早速遊んでみます. ゴール .foo[1].bar といった形のパス文字列を型レベルで解析し…
キーワード: 型レベル整数, 幽霊型 前回の記事の予告通り, TypeScript 4.0 で次元つきの物理量の計算を安全に行うためのライブラリを作ってみました. ただし現状では PoC で, 実用に足るかまでは考慮していません. github.com 物理量についての計算を行う場…
つい先日 TypeScript 4.0 RC がリリースされました. めでたいですね. さて TS 4.0 の目玉機能といえばなんといっても variadic tuple types ですが, これが型レベルで自然数の計算をしたいナウなヤングにバカウケということで, 界隈では一時期のタピオカミル…
みなさんテストは書いていますよね. 書いていなければふりだしに戻る. 例えば関数 add に対して, 以下のようなテストコードがあるとします. describe("add", () => { it("正しく計算できる", () => { expect(add(1, 2)).toBe(3); }); }); よさそうですね? も…
型をそえて. TL; DR (実用には向かないものの) TypeScript で Algebraic Effects (たぶん) を扱うライブラリを作ってみました. github.com 背景と課題 コールバック地獄の解決 たとえば Haskell や Scala にあるような Either モナドを, TypeScript でも使い…
TypeScript で Haskell にあるような GADT (Generalized Algebraic Data Type) っぽいものをどう表現できるかという話. GADT を使いたくなる例 式をデータとして表現したいことありますよね. あると言ってくれ. 例えば数値と数値上の関数, そして関数適用が…
TypeScript の型システムはチューリング完全ということが知られていますが, 同じくチューリング完全な言語である Brainfuck のインタプリタを実装することで, その計算能力を確認することができます. この記事のコードは TypeScript 3.8.3 で動作確認してい…
こんなことがやりたかったんじゃないし, 誰もそんなこと望んじゃいない. でもやる. 動作確認している TypeScript のバージョンは 3.8.3 です. ゴール TypeScript で階乗を計算します. 型レベルで. type F = Factorial<3>; // F = 6 アイデア まずタプル型の …
遊びです. 真に受けないでください. 動作確認している TypeScript のバージョンは 3.8.3 です. ゴール タプル型 XS から, 要素の置換 (permutations) の union 型を作る Permutations<XS> を作ります. type P = Permutations<["A", "B", "C"]>; // P = ["A", "B"</xs>…
↓ に対するアンサーソングです. blog.3qe.us 例えばこういう感じの型 T があって, ネストされた内側にある baz の型を number から string に書き換えたいとしますね. type T = { foo: { bar: { baz: number, }, }, }; もしこれが, 書き換える対象のパスを […
この記事は はてなエンジニア Advent Calendar 2019 15 日目の記事です. 昨日は id:polamjag さんによる Next.js で Google Analytics を使う・2019年冬 - polamjaggy でした. qiita.com こんにちは, Mackerel 開発チームでアプリケーションエンジニアをして…
未来人のみなさまご機嫌いかがでしょうか. この記事が書かれた時点の TypeScript のバージョンは 3.6.4 です. お題 以下の JavaScript の関数に TypeScript で型をつけることを考えます1. function makeDict(prop, entries) { const dict = {}; for (const e…
助けて
