ReSharper 2020.3 ヘルプ

TypeScript のコードインスペクションとクイックフィックス

ReSharper のコード解析の主な機能は、TypeScript でもサポートされています。これらの機能の詳細については、コード解析の該当するトピックを参照してください。このセクションのサブジェクトでは、フィーチャマトリックスを見つけて、TypeScript で正確にサポートされているものを確認することもできます。

このトピックでは、TypeScript でコード解析機能を使用する例をいくつか見てみましょう。

コードインスペクション

ReSharper のコードインスペクションは、TypeScript ファイル内のコンパイラーエラーやその他のコードの問題を検出します。デフォルトでは、TypeScript コードは設計時にインスペクションされます。必要に応じて、特定のスコープでコードインスペクションを実行することもできます。

ReSharper: Inspecting TypeScript issues in specific scope

Code inspection behavior as well as code generation results depend on the TypeScript project settings. In Visual Studio 2013 and later, you can configure the first two of this settings in the project property editor (right-click the project and choose Properties ). In Visual Studio 2012, you can only change these properties manually by editing the project file .csproj

  • ECMAScript のバージョン TargetEsVersion
    バージョンが 5 より低い場合、ReSharper は get および set の使用をエラーとして検出します。バージョンが 5 以上の場合、ReSharper は 8 進数リテラルをエラーとして検出し、16 進数または 10 進数リテラルで置き換えることを提案します。

  • 暗黙の any 型を許可する NotImplicitAny
    このプロパティに応じて、ReSharper は暗黙の「任意」のタイプ(たとえば var a; a = 5;)をエラーとして検出するかどうかを検出します。

  • TypeScriptNoResolve
    このオプションが「true」に設定されている場合、ReSharper は外部モジュールの使用をエラーとして検出します。

コードインスペクションの動作は、ReSharper オプションのコード編集 | TypeScript | 構文スタイルページで設定されたオプションによっても異なります。詳細は、TypeScript のコードスタイル支援を参照してください。

クイックフィックス

クイックフィックスを使用すると、コードインスペクションで見つかったコードの問題のほとんどを自動的に解決することができます。コードの問題に対して 1 つ以上のクイックフィックスが利用可能な場合は、キャレットがハイライトされたコード上にあるときに対応するアクションインジケータが表示されます。目的の修正を確認して適用するには、Alt+Enter を押します。

ReSharper は TypeScript に数十のクイックフィックスを提供します。ここではいくつかの例を示します。

不足しているインポートを追加する

ReSharper が現在のファイルにインポートされていないタイプを検出した場合は、そのファイルをハイライトし、欠落しているすべてのインポートを一度に追加することを提案します。詳細は、不足している名前空間をインポートするを参照してください。

Importing missing namespace in TypeScript

不足しているメンバーの実装

ReSharper は実装されていないメンバーを自動的に生成することを提案しています:

ReSharper: Implementing interface members in TypeScript

関数のオーバーロードの名前を正しく変更する

タイプミスのために関数のオーバーロードの名前が同じでない場合、ReSharper は不一致の名前をハイライトし、クイックフィックスを提案します。

ReSharper: 'Rename function overload properly' quick-fix in TypeScript

公開 / 非公開にする

デフォルトメンバーのアクセシビリティは public ですが、関数を private として明示的に指定した場合、そのすべてのオーバーロードは同じ修飾子を持つ必要があります。そうでない場合、ReSharper はそれをハイライトし、変更を提案します。

ReSharper: 'Make public/private' quick-fix in TypeScript

タイプアノテーションを追加する

type が指定されていない場合は、変数がハイライトされます。 Alt+Enter を押してクイックフィックスのリストを表示し、次のものを適用します。必要な型アノテーションが追加されます。

ReSharper: 'Add type annotation' quick-fix in TypeScript

疑問符を削除する

TypeScript では、オプションのパラメーターにデフォルト値を設定することはできません。それらが偶然持っていた場合は、疑問符を削除するか、初期化子を削除します。

ReSharper: 'Remove question mark' quick-fix in TypeScript

アンビエント関数本体を削除する

コード内に不要な構造を保持する必要はありません。コードを読めるようにするために、ReSharper は、たとえば、関数の本体を削除することを提案しています。

ReSharper: 'Remove ambient function body' quick-fix in TypeScript

ReSharper に特定のコードを無視させる

ReSharper を使用すると、特定のファイル、フォルダー、ファイルマスクをさまざまな方法で無視できます。無視するファイルは、次のオプションページで設定できます。

  • コードインスペクション | 無視されたコードは、コードインスペクションからファイル、フォルダー、マスクを除外します。

  • コードインスペクション | 生成されたコードは、生成されたコードのコードインスペクションを部分的に無効にします

  • 環境 | 検索とナビゲーションを使用して、名前で検索コマンドで無視する必要があるファイルとフォルダーを指定します。

  • コード編集 | サードパーティコードは C++、JavaScript、TypeScript、CSS、HTML、JSON ファイル、フォルダー、ワイルドカードを追加して、「スキップ」または「ライブラリ」として扱います。ReSharper は「スキップされた」ファイルを完全に無視し、「ライブラリ」ファイルを読み取り専用として扱います。ナビゲーション用にインデックス付けされていますが、インスペクションクイックフィックスリファクタリングはありません。

関連ページ:

コード解析

ReSharper は、エディター内の単一のステートメントから、ソリューション全体のアーキテクチャまで、さまざまなレベルのコードを分析できます。コードの問題を見つける:ReSharper は、C#、VB.NET、XAML、XML、ASP.NET、ASP.NET MVC、Razor、JavaScript、TypeScript、HTML、CSS、ResX で 2500 を超えるコードインスペクションを適用することにより、静的コード分析(コードインスペクションとも呼ばれます)を提供します。スクリプト...

設計時にコードの問題を検出する

ReSharper は、エディターでコードファイルを開くとすぐに分析を開始し、最後まで編集を続けます。検出されたすべてのコードの問題は、重大度に従ってエディターでハイライトされます。問題のマップは、エディターウィンドウの右側のマーカーバーにも表示されます。ここでは、ファイルのステータスを即座に確認し、マークをクリックして特定のコードの問題に移動できます。また、JSLint、ESLint、TSLint から Javascript/ Typescript コードの検証と修正をエディターで使用することも...

特定の範囲でコードの問題を見つける

設計時コードインスペクションは、エディターでコーディングしたり、特定のファイルを見直したりするときに役立ちます。ただし、ReSharper を使用すると、ソリューション全体または狭い範囲でスタティックコード分析を実行し、結果をフレンドリーな視点で調べることもできます。必要に応じてインスペクション結果を共有することもできます。Visual Studio および ReSharper を起動せずに、コマンドラインから特定のスコープ内のコードをインスペクションすることもできます。開始コードインスペクショ...

TypeScript のコード生成

ReSharper は、定型コードを生成するさまざまな方法を提供します。例: 宣言されていないコードシンボルを使用し、これらのシンボルを用途に基づいて自動的に生成したり、型メンバーを生成したりすることができます。ReSharper は TypeScript に以下のコード生成機能を提供します: 設定に応じて、新しいメンバーのスタブをさまざまな方法で生成できます。例: 新しいをスローしたり、デフォルト値を返したり、コンパイルされないコードを含めることができます。ReSharper オプション(Alt...

アクションインジケータとアクションリスト

ReSharper が Visual Studio テキストエディターに追加する最も注目すべきものの中には、アクションインジケータとアクションリストがあります。これらは、ReSharper でサポートされているすべてのファイル(C#、VB.NET、XML、CSS、JavaScript、ASP.NET など)に表示され、使用可能なアクションについて通知し、適用できます。アクションインジケータ:アクションインジケータは、設定に応じて、アクションバーの左マージンやテキストエディターの本文に表示される...

不足している名前空間をインポートする

ファイルに名前空間がインポートされていない型を使用する場合、ReSharper はこれらの型を見つけて不足している名前空間インポートディレクティブを追加できます。たとえば、ファイルにコードのブロックを貼り付けた後など、未解決の型にいくつかの不足している名前空間がある場合、ReSharper はこれらすべての名前空間を 1 回の操作でインポートできます。ReSharper は、現在のプロジェクトで参照されているアセンブリ、ソリューション内の他のプロジェクトで参照されているアセンブリ、推移的に参照さ...