ホームページ > 開発ツール > VSCode > VSCode での TypeScript 自動コンパイルの構成

VSCode での TypeScript 自動コンパイルの構成

青灯夜游
リリース: 2021-11-02 09:31:29
転載
4358 人が閲覧しました

VSCode での TypeScript 自動コンパイルの構成

関連する推奨事項: 「vscode チュートリアル

TypeScript コンパイラーのインストール

Visual Studio Code には TypeScript 言語サポートが含まれていますが、 TypeScript コンパイラ tsc は含まれていません。 TypeScript ソース コードを JavaScript (tsc HelloWorld.ts) に変換するには、TypeScript コンパイラをグローバルまたはワークスペースにインストールする必要があります。

TypeScript をインストールする最も簡単な方法は、Node.js パッケージ マネージャーである npm を使用することです。-g はグローバル インストールを意味します。

インストール

npm install -g typescript
ログイン後にコピー

バージョンの確認 - インストールが成功するとバージョン情報が出力されます

tsc --version
ログイン後にコピー
xm@xm-Vostro-3670:~/project$ tsc --version
Version 3.3.3333
ログイン後にコピー

新しいHelloWorldフォルダとhello_worldを作成します.ts ファイル

mkdir HelloWorld
ログイン後にコピー
const text:string = 'hello world';
console.log(text);
ログイン後にコピー

VSCode での TypeScript 自動コンパイルの構成

##新しい Tsconfig.json

{
  "compilerOptions": {
      "target": "es5",
      "module": "commonjs",
      "outDir": "out",
      "sourceMap": true
  }
}
ログイン後にコピー

新しいタスク

Tenimal->タスクの実行

VSCode での TypeScript 自動コンパイルの構成

選択

tsc:build-tsconfig.json

VSCode での TypeScript 自動コンパイルの構成##設定完了

##を押してください# F5

は、ディレクトリ内に追加の out

フォルダーがあることを検出しました。構成は

"outDir": "out",DEBUG ですCONSOLE 出力 hello world

ModifyVSCode での TypeScript 自動コンパイルの構成text

Save press

F5

その他 プログラミング用関連知識については、VSCode での TypeScript 自動コンパイルの構成プログラミング ビデオ

をご覧ください。 !

以上がVSCode での TypeScript 自動コンパイルの構成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:juejin.im
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート