TypeScript
デコレータの Proposal が Stage 3 になってから約 4 年, TypeScript がサポートしてから約 3 年経っているにも関わらず, 未だに普段使いしなさすぎて全く使い方を覚えられていません. ということで TypeScript での使い方を中心に覚える / 忘れたら読んで思…
先日の新春 LT 大会で, PixiJS と Vite を使って VJ するという話をしました. こういうやつです 実装や資料は以下のリポジトリにまとまっています. が操作説明などは一切用意していないのでご了承ください (大体キーボード操作で, keydown イベントのハンド…
この記事は はてなエンジニア Advent Calendar 2025 の 4 日目の記事です. id:susisu です. TypeScript の never 型がたいへん奥ゆかしいので見ていってください. 基礎編 まずは never 型がどういったものなのかを見てみましょう. 値のない型として 例えば n…
あの日見たパターンの名前を僕たちはまだ知らない. よくある一覧 + 詳細画面を作りたい 例えば TODO アプリで, /todo にアクセスしたらタスクの一覧を, /todo/42 にアクセスしたら一覧は表示したまま ID = 42 のタスクの詳細を表示する, というよくあるパタ…
必要もないのに querySelector や querySelectorAll の型引数を指定しないようにしましょう. (この記事は AI レビュワーに「型引数を指定した方が型安全だ」と提案されたのに対する反論として作成しています.) querySelector の型安全性 querySelector や qu…
JavaScript (TypeScript) のコードから HTTP リクエストを送る手段として, 最近では Web 標準の一つである Fetch Standard で定義された fetch() が使われることが多いですね. await fetch("https://example.com"); リクエストヘッダーには Host を設定でき…
TypeScript 使用ルートです. AI Coding Agent Enablement in TypeScript や TS特化Clineプログラミング で紹介されていたように独自の lint ルールを作りたいということがあるかと思いますが, それシュッとプロジェクト内に完結した形で作りたいといったとき…
登壇してきた 発表の内容については前の記事を読んでください. この規模のカンファレンスでの登壇は初めてだったのですが, 元々関連分野に興味があった人には刺さりつつ, そうでない人にも面白いと思ってもらえた様子も観測していて, だいたい目論見通りの発…
TSKaigi 2025 での登壇「君だけのオリジナル async / await を作ろう」のスピーカーノートと補足です. (TSKaigi 2025 自体の感想や面白かった発表の話なんかはまた別途書きます.) スピーカーノート & 補足 参考文献 スピーカーノート & 補足 「君だけのオリ…
Effective TypeScript (第2版) を読んだ なんらか他の人に読んでおくと良いよと紹介できる本があると良いなと思って読みました. 2020 年以降に TypeScript を書く上での常識が概ね網羅されていると思うので, そういった前提知識に自信をつけたいならおすすめ…
この記事は以下の記事の改訂版です. susisu.hatenablog.com ESLint v9 から Flat Config がデフォルトの設定ファイルの形式となり, 徐々に対応しているプラグインも増えて移行が進みつつありますが, 実際に移行したプロジェクトを見ているとしばしば勘違いな…
Promise と Thenable Promise が ECMAScript の言語仕様に追加されたのは ES2015 ですが, Promise ライクなオブジェクトはそれ以前からも広く使われてきました (jQuery の Deferred など). そういった Promise ライクなオブジェクトとの互換性のため, Promis…
ラベル付きタプル型とは TypeScript には配列型 (Array) のサブセットとしてタプル型がありますが, その各要素にはラベルをつけることができます (参考). // 通常のタプル型 type Tuple = [number, string]; // ラベル付きのタプル型 type LabeledTuple = [f…
「N 文字以上 / 以内」みたいなことを言われたときに考えること. 「文字」とは? 単に「文字」と言っても, それが指しているものが何かは自明ではない. 符号単位 (code unit) JavaScript の場合, 文字列は UTF-16 としてエンコードされている*1ので, そのエン…
N 行以上なら省略表示したい 所感: LGTM import { FC, ReactNode, CSSProperties } from "react"; import styles from "./LineClampingBox.module.scss"; /** 指定した行数以上なら省略表示する */ export const LineClampingBox: FC<{ /** 最大行数 */ maxL…
この記事は はてなエンジニア Advent Calendar 2024 の 4 日目の記事です. 昨日は id:onk さんの コミュニティ生活で大切な三つの袋 - id:onk のはてなブログ でした. ところで皆さん TypeScript は書いていますか書いていますよねそうですよね. そんな皆さ…
2025-03-30 追記: 改訂版を書きました. susisu.hatenablog.com ESLint v9 から Flat Config がデフォルトの設定ファイルの形式となり, 徐々に対応しているプラグインも増えて移行が進みつつありますが, 実際に移行したプロジェクトを見ているとしばしば勘違…
おさらい: prototype JavaScript のオブジェクトはみんな prototype というのを持っていて, この prototype からプロパティを継承, より正確には, プロパティアクセス時にそのプロパティがオブジェクトに存在しなければ prototype を辿って見つけにいくこと…
TypeScript でエフェクトを使う話の続き. あるいは DI 手法の話でエフェクトを使うのを半ば冗談として書いていたのを, より具体的な状況を想定してもう少し真面目に考えてみる. ドメイン層と永続化 ドメイン層においては永続化のための具体的な技術について…
2 年前に作って放置していたライブラリを最近ちょっと整理したのでその話. エフェクト プログラム中に登場する関数のことを考えてみましょう. 関数は引数を与えるとなんらかの計算を行い, 戻り値を返してくれます. もし関数が純粋な (数学的な意味での) 関数…
作りました. jsr.io リポジトリはこっち. github.com (2024-05-12 現在, 筆者は Mackerel を開発している株式会社はてなの社員ですが, これは個人プロジェクトで, API ドキュメントなどの公開されている情報に基づいて作成されています.) なぜ JSR になんか …
およそ 4 年前に「TypeScript で型レベル Brainfuck」という記事を書きました. susisu.hatenablog.com それから 4 年間の間に TypeScript も進化し, 型レベルプログラミングの技法にも大きな変化がありました. 特に顕著な影響があったものでは, TypeScript 4…
ESLint の設定に関する TypeScript の型情報を提供してくれる eslint-define-config (ESLint 非公式プロジェクト) のご紹介. github.com 使い方 eslintrc の場合は defineConfig, Flat Config の場合は defineFlatConfig で設定を囲むだけで VSCode などエデ…
TypeScript でライブラリ (npm パッケージ) を作るときに, ビルド用の tsconfig を用意することがあります. 例えば以下のような tsconfig.json を作成したとしましょう. { "compilerOptions": { "rootDir": "src", "outDir": "lib", "target": "esnext", "mo…
まえがき こんにちは, 人間 ESLint です. そんな人間 ESLint の私ですが, 私一人があらゆるコードに注意深く目を通して, さらに修正案まで提示するというのは大変です. 多くの問題は機械的に検知できるはずなので, そういった仕事を私の代わりにしてくれるメ…
TypeScript で Cake Pattern っぽい DI (依存性注入) をするためのライブラリを作ったので, そのご紹介です. この記事での解説や他の手法との比較は前回の記事を前提とするので, まずはこちらをお読みください. Scala における Cake Pattern Cake Pattern は…
TypeScript で DI (依存性注入) するためのライブラリを作ったんですが, それを紹介する前に既存手法をまとめておいた方が説明が楽だなと思ったのでまとめておきます. そもそも DI の目的とは, みたいなところは詳しく説明しないのであしからず. 手法の比較 …
以前にも同様の記事を書きましたが, 今回はその改訂 + α です. 動作は TypeScript 5.0.4 で確認しています. Playground で試しながら読むとわかりやすいかもしれません. おさらい まずは TypeScript において, 関数に渡される引数に制約をかけたいときに通常…
ちょっと前に話題になった hotscript の技法の紹介やら, ラムダ計算を TypeScript の型にコンパイルする話やらなんやら. 通常の型レベル関数 TypeScript の型エイリアスはパラメータを取れるので, これは型レベルの関数であるとみなせます. type IsNumber<X> = </x>…
イントロ TypeScript で Array#filter を使うとき, 型が期待通りに絞り込まれないというトラブルがよくあります. const xs: (number | undefined)[] = [1, undefined, 2]; const ys: number[] = xs.filter((x) => x !== undefined); // ~~ // Type '(number …
