TypeScriptは強力な型システムが魅力です。 しかし、複雑な型定義は理解が難しいです。特にライブラリの型定義などはジェネリクスや交差型などがネストしていることも多く、すぐに把握するのが難しい場合があります。 Visual Studio Code（以下VSCode）でTypeScriptの開発をしている際、型にカーソルをホバーすると型情報が表示されます。 しかし、深いネストや複雑な型の場合、展開される情報が不十分で、定義を追う必要があります。 そんな時に役立つVSCodeの拡張機能がないかな〜と探していたら「Prettify TypeScript」というぴったりの拡張機能を発見しました！この拡張機能を使うと、ホバーした時に型が展開された状態で表示されるため、型情報を把握しやすくなります。 Prettify TypeScriptの概要 Prettify TypeScriptを使用すること
はじめに こんにちは、からころです。 今回は、VSCode でホバー時の TypeScript の型ヒントをすべて表示する方法について書いていこうと思います。 ※ 投稿日の 2024/10/17 から 2024/10/28 ごろに仕様が変わり、defaultMaximumTruncationLengthの書き換えだけでは、動作しなくなりましたので修正版を公開しています。 デフォルトの設定では型の情報量が増えると型が省略される VSCode では、TypeScript を利用して開発する際に、ホバーすると以下のように型ヒントを表示することができます。 しかし、デフォルトの設定のままでは、下記のようにプロパティ数が多くなると型ヒントが省略されてしまいます。 上記の解決方法を以下で説明していこうと思います。 tsconfig.json に noErrorTruncation:true を追加する
VSCode でホバーして型情報を見ようとすると、交差型はプロパティが展開されません プロパティの型を展開する Mapped Types を通すことで省略せずにプロパティを見ることができます。プロパティが交差型になっていることもあるので、再帰的にプロパティを Mapped Types に通すような型を定義しておいて、通すことでプロパティを全て確認できます type Expand<T> = T extends object ? T extends infer O ? { [K in keyof O]: Expand<O[K]> } : never : T type Temp = Expand<`確認したい型`> 厳密でなくとも簡単にどんなプロパティがあるか把握したいだけなら組み込みの Required や Partial を使うのが手軽です。ただし、あくまでデバッグ用途でそれぞれ省略可能プロ
はじめに おはようございます、加藤です。小ネタですがJetBrains系IDEおよびVSCodeでAWS CDKをデバッグする方法を説明します。 普通に書いている際はデバッグが必要になることはありませんが、高レベルコンストラクトに変更できないプロパティがある場合に、低レベルコンストラクトを抽出してプロパティを変更するといったような高度なことをする場合にはデバッグ機能で確認が出来ると便利です。 準備 CDKプロジェクトを生成します。 mkdir cdk-debug-demo && cd cdk-debug-demo cdk init sample-app --language typescript JetBrains系IDEの場合 Intellijを使ったデバッグの方法を説明します、最初にプロジェクトをIntellijで開きます。 Add Configuration...をクリックします。
TypeScript 3.9は「Visual Studio 2019」「Visual Studio 2017」の他、「Visual Studio Code」と「Sublime Text」でも利用できる。TypeScript 3.9の主な特徴は次の通り。 推論とPromise.allの改良 TypeScriptの最近のバージョン（3.7など）では、「Promise.all」や「Promise.race」のような関数の宣言が更新された。だが、これに伴って幾つかの副作用が生じた。特に、nullまたはundefinedの値を組み合わせた場合が顕著だった。 interface Lion { roar(): void } interface Seal { singKissFromARose(): void } async function visitZoo(lionExhibit: Promise<L
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
