web-dev-qa-db-ja.com

Visual Studio 2017のタイプスクリプトサポート

私は最近TypeScriptを学ぼうとしており、.tsファイルビジュアルスタジオで作業しているときに「Web Essentials」拡張機能をインストールした後に見たビデオのいくつかで、JavaScriptを次のように見ることができるプレビューパネルを提供しています入力します。

これらのビデオはVS 2012を使用しているようです。

しかし、VS 2017にWeb Essentialsをインストールすることはこのオプションを持たないようです、VS 2017でこれをどのように機能させることができるか知っていますか？ TypeScriptのサポートは同じですか？

visual-studiotypescriptvisual-studio-2012visual-studio-2017
19
Ayo Adesina

そのため、VS2017ではTypeScriptがデフォルトでインストールされます（Update 2は2.3の最新バージョンを提供し、サイドバイサイドインストールを許可します）。お持ちでない場合は、Visual Studioインストーラーで追加できます。インストーラーからバーガーメニューをクリックして[変更]を選択し、[個別コンポーネント]をクリックします。SDK、ライブラリ、フレームワークでTypeScriptを追加できます。

インストールしたら、tsconfig.jsonファイルを追加して、TypeScriptコンパイラーに動作方法を伝えることができます。例：

{
    "compileOnSave": true,
    "compilerOptions":
    {
        "noImplicitAny": false,
        "noEmitOnError": true,
        "removeComments": false,
        "sourceMap": true,
        "target": "es5"
    },
    "exclude":
    [
        "node_modules"
    ]
}

重要な設定は、tsを保存するときにjsファイルをコンパイルするようにVSに指示するcompileOnSaveです。

これで、TypeScriptファイル内にネストされたJavascriptファイルがあることがわかります。

Nested TypeScript

両方のファイルを並べて開くだけで、tsを保存するとjsが自動的に更新されます（VSが変更されたファイルをディスクにロードするように求める場合は、常に更新オプションにチェックを入れると役立ちます）。

22
Matt

あなたの質問はVS 2017に関するものであり、VS 2017に戻って追加されたかどうかを確認するためのドキュメントはありません。ただし、VS 2015でこれが削除されたことがわかりました。 Github でこのリンクを参照してください。

TSプレビューペインは、新しいバージョンがリリースされたときにTSコンパイラと継続的に競合するため、Web Essentials 2015から削除されました。 TSチームはそれを認識しており、将来的にTSツールに機能を追加することを望んでいます。この機能は、新しいWebコンパイラ拡張機能（ https://visualstudiogallery.msdn.Microsoft.com/3b329021-cd7a-4a01-86fc-714c2d05bb6c に含まれる可能性があります）プレビューペインが実装されたとき

7
HappyTown

私は回避策を持っています、それは少し作業ですが、出力を確認したい奇妙な機会に役立ちます。

私はvs2017を実行していますが、Web Essentialsがインストールされており、Webコンパイラがありますが、15.4の時点ではまだtsをサポートしていないようで、tsconfig.jsonを動作させることができませんでした。

プロジェクトの非表示ファイルを簡単に表示し、対応するjsファイルを選択してから、タブを右にドラッグして、分割画面を表示します enter image description here

Tsファイルを変更して保存すると、「ファイルが変更されました」などのポップアップが表示される場合があります。「変更が検出されない場合は自動復元」というチェックボックスがオンになっています。言い換えると、スクリーンショットを取得するためにリセットできるようにオプションを見つけようとしましたが、それを見つけることができません！）、それをチェックしてから「はい」を選択すると、jsファイルが更新されます。 tsファイルを次に変更すると、jsファイルが更新されます。

素晴らしいものではないことはわかっていますが、コースを受講したときに表示される内容の類似物を取得でき、JavaScriptのプレビューを表示し続けることができるため、非常に便利であることがわかりました。

1
Luke Duddridge

Web Essentials 2017をインストールしましたが、それが必須かどうかはわかりません。問題は、VS 2017で2つのファイルを並べて開く方法です。具体的には、TypeScriptとそれに対応するjsファイル。

次の手順を実行すると、任意の2つのファイルを並べて開くことができます。

最初に、問題の2つのファイルをソリューションエクスプローラーからダブルクリックして開きます。

Visual Studio 2017 Split Window Step 1

次に、上の強調表示された赤いボックスにカーソルを置き、Car.jsファイルのタブを下にドラッグします。

Visual Studio 2017 Split Window Step 2

これで、赤い四角のボックスで強調表示された5つの小さな正方形が表示されます。 4つの外側の小さな正方形のいずれかにカーソルを移動します。以下に示すように、カーソルを右側のカーソルの上に置きます。

Visual Studio 2017 Split Window Step 2

行くぞ.

これはWeb Essentialsなしでも機能し、vs。の機能だと思います。WebEssentialsをインストールせずにこれを実行できるかどうか教えてください。

0
VivekDev

Visual Studio 2017では、インストールプロセス中に「Node.js開発」ワークロードをインストールするか、「探しているものが見つからない場合はVisual Studioインストーラーを開く」リンクをクリックして、新規プロジェクトダイアログで既存のインストールを変更する必要があります。

次に、[ファイル]> [新規]> [プロジェクト...]の[インストール済み]カテゴリにJavascriptおよびTypeScriptプロジェクトテンプレートが含まれます。

0
Tom