TypeScriptの Conditional Type はJavaScriptでいう三項演算子のような使い方ができるのは理解していてそのように使っているが、それ以上の理解（例えばinferの利用など）は以前調べているにもかかわらず理解が曖昧だった uga-box.hatenablog.com なので改め…

Object.keys を使う時、その戻り値の型が string[] になっているので、keyを使って何か処理をしたいときに string型として値を使わなければならない そのため、これまで以下のようにasを使って値を他の型に強制していたが、全ての使用箇所で付けなければなら…

TypeScirptのプロジェクトでpathにaliasを設定して、/srcディレクトリを@としてimportしたい まずはtsconfig.jsonでpathsを設定する { "compilerOptions": { ~~~ "baseUrl": "./", "paths": { "@/*": ["src/*"] }, ~~~ } } 次にwebpack.config.jsでaliasを設…

TypeScript First なバリデーションライブラリのZodというのを知ったので調べた github.com Zodは「スキーマ」を定義しそれに基づいてバリデーションを行うライブラリ 特徴 依存関係ゼロ Node.jsとすべての最新のブラウザで動作する サイズが8kbでミニマイズ…

Typescript4.7の新機能をいくつかみてみた devblogs.microsoft.com ECMAScript Module Support in Node.js TypscriptにおけるNode.jsのECMAScript Moduleをサポート これにより .mts/.ctsという拡張子が増えた ESM / CJS ごとに型定義を読み分けられるように…

TypeScriptで元はstringだが型定義したIDを作りたいとき type AreaId = string; のように定義していたが、TypeScriptは構造的な部分一致により同一の型かどうかを判断しているので、これではどんなstringの文字列も通してしまう そこで厳密に区別される仕組…

下の本を読んでテンプレートリテラル型を知らなかったのでメモ プロを目指す人のためのTypeScript入門 安全なコードの書き方から高度な型の使い方まで Software Design plus作者:鈴木 僚太技術評論社Amazon あったらいいのにと思っていた構文だが、v4.1（約2…

TypeScriptで判別プロパティをもつUnionの絞り込みに関する部分が4.6で改善されるという話 devblogs.microsoft.com Unionで定義された型同士が共通してもつ判別プロパティ（タグプロパティ）を使って、ランタイムで処理を判別するということがある 例えば以…

ReactとTypeScriptにStyledComponentを使って見出し用のコンポーネントをつくりasにh1〜h6までの要素を渡せるようにしたい <Title as={props.sectionLevel || "h2"}>{props.title}</Title> このとき、sectionLevelをstringにしていたら、型チェックエラーがでた TS2769: No overload matches this call. Over…

jestで書いていたテストをtypescript化しようと思うが、あるエラーが発生しておりできずにいた ただ、さすがに不便になってきたので調べてみる 事象はエディタ（IntelliJ IDEA）で次のようなエラーメッセージが表示される Cannot find name 'test'. Do you n…

Next.jsでtypescriptを導入したい はじめ方 nextjs.org 空のtsconfig.jsonをプロジェクトのルートに用意し、npm run devを実行するとNext.jsが検知してくれる # You'll see instructions like these: # # Please install typescript, @types/react, and @typ…

TypeScriptを導入して、select要素のonChangeにどういう型を定義するべきかわからなかったので調査した Takepepeさんのこちらの記事が参考になった qiita.com 型推論により、こう定義するのがよいみたいだが type Props = { onClick: (event: React.MouseEve…

TypeScriptのReadonlyの使い所を調べてみた typescript-jp.gitbook.io function foo(config: { readonly bar: number, readonly bas: number }) { // .. } let config = { bar: 123, bas: 123 }; foo(config); // You can be sure that `config` isn't chang…

TypeScriptで書かれたコードをみるとやたらkeyofを使っているので、keyofについて調べた js.studio-kingdom.com keyof T でオブジェクトプロパティの名称を直和型で取得できる プロパティ名称のどれかという型定義ができる type User { firstName: string; l…

下の型定義をみたときに、extendsはわかるが、inferがよくわかっていなかったので調べた type Unpacked<T> = T extends (infer U)[] ? U : T extends (...args: any[]) => infer U ? U : T extends Promise<infer U> ? U : T; こちらの記事が参考になった qiita.com infe</infer></t>…

TypeScriptで書かれたソースコードを読んでいて、as constの使い方がわからなかったので調べた qiita.com const assertionはTypeScript 3.4で搭載されたシグネチャ 宣言時にハードコードされた値がLiteral Typesとして適用される const tuple1 = [false, 1, …

TypeSript 2.8で追加された Conditional Typesの基本的な使い方を調べた 型定義における条件分岐で、型が互換性を満たす場合に任意の型を返却できる JSの三項演算子のようにT extends X ? X : Zという構文で表される Mapped Typesでの利用 interface Propert…