UGA Boxxx

つぶやきの延長のつもりで、知ったこと思ったこと書いてます

TypeScript

【TypeScript】TypeScript 4.7の新機能の気になったやつだけ

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

【TypeScript】SymbolでIDを公称型にする

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

【TypeScript】テンプレートリテラル型

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

【TypeScript】TypeScript 4.6で判別プロパティをもつUnionの絞り込みが改善される

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

【StyledComponent】asの型

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

【Jest】testをtypescriptで書いたらCannot find name 'test'. と言われる

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

【Next.js】typescriptの導入

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】EventCallbackの型ってどうするのか

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

【TypeScript】Readonly

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キーワード

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

【TypeScript】infer

下の型定義をみたときに、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 ( const assertion )

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

【TypeScript】Conditional Types

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