TypeScriptはvscodeを使用してコードのコンパイルプロセスを監視します

TypeScriptはvscodeを使用してコードのコンパイルプロセスを監視します

インストール

  • tsコマンドをグローバルにインストールする npm install -g typescript
  • インストールが完了したら、tsc -v コマンドを実行してバージョン番号を表示し、インストールが成功したことを確認します。
  • 次に、tsc ファイル名を使用して、tsc ファイルを js ファイルに変換します。js ファイルは、html ファイルに直接導入して使用できます。

tsファイルを見る

フォルダー内で tsc --init を実行して tsconfig.json ファイルを生成します。ファイルを開くと、次の内容が表示されます。

{
  "コンパイラオプション": {
    /* このファイルの詳細については、https://aka.ms/tsconfig.json を参照してください */

    /* プロジェクト */
    // "incremental": true, /* 増分コンパイルを有効にする */
    // "composite": true, /* TypeScript プロジェクトをプロジェクト参照で使用できるようにする制約を有効にします。 */
    // "tsBuildInfoFile": "./", /* .tsbuildinfo 増分コンパイル ファイルのフォルダーを指定します。 */
    // "disableSourceOfProjectReferenceRedirect": true, /* 複合プロジェクトを参照するときに宣言ファイルではなくソース ファイルを優先することを無効にします */
    // "disableSolutionSearching": true, /* 編集時にプロジェクトをマルチプロジェクト参照チェックから除外します。 */
    // "disableReferencedProjectLoad": true, /* TypeScript によって自動的にロードされるプロジェクトの数を減らします。 */

    /* 言語と環境 */
    "target": "es2016", /* 出力される JavaScript の JavaScript 言語バージョンを設定し、互換性のあるライブラリ宣言を含めます。 */
    // "lib": [], /* ターゲットのランタイム環境を記述するバンドルされたライブラリ宣言ファイルのセットを指定します。 */
    // "jsx": "preserve", /* 生成される JSX コードを指定します。 */
    // "experimentalDecorators": true, /* TC39 ステージ 2 ドラフト デコレータの実験的なサポートを有効にします。 */
    // "emitDecoratorMetadata": true, /* ソース ファイル内の装飾された宣言のデザイン タイプ メタデータを出力します。 */
    // "jsxFactory": "", /* React JSX エミットをターゲットにするときに使用する JSX ファクトリ関数を指定します (例: 'React.createElement' または 'h') */
    // "jsxFragmentFactory": "", /* React JSX エミットをターゲットにするときにフラグメントに使用される JSX フラグメント参照を指定します (例: 'React.Fragment' または 'Fragment')。 */
    // "jsxImportSource": "", /* `jsx: react-jsx*` を使用するときに JSX ファクトリ関数をインポートするために使用されるモジュール指定子を指定します。*/
    // "reactNamespace": "", /* `createElement` に呼び出されるオブジェクトを指定します。これは、`react` JSX エミットをターゲットとする場合にのみ適用されます。 */
    // "noLib": true, /* デフォルトの lib.d.ts を含むすべてのライブラリ ファイルのインクルードを無効にします。 */
    // "useDefineForClassFields": true, /* ECMAScript 標準に準拠したクラス フィールドを出力します。 */

    /* モジュール */
    "module": "commonjs", /* 生成されるモジュールコードを指定します。 */
    // "rootDir": "./", /* ソース ファイル内のルート フォルダーを指定します。 */
    // "moduleResolution": "node", /* TypeScript が指定されたモジュール指定子からファイルを検索する方法を指定します。 */
    // "baseUrl": "./", /* 非相対モジュール名を解決するためのベースディレクトリを指定します。 */
    // "paths": {}, /* インポートを追加の検索場所に再マップするエントリのセットを指定します。 */
    // "rootDirs": [], /* モジュールを解決するときに複数のフォルダーを 1 つとして扱うことができます。 */
    // "typeRoots": [], /* `./node_modules/@types` のように動作する複数のフォルダーを指定します。 */
    // "types": [], /* ソースファイルで参照されずに含まれる型パッケージ名を指定します。 */
    // "allowUmdGlobalAccess": true, /* モジュールから UMD グローバルへのアクセスを許可します。 */
    // "resolveJsonModule": true, /* .json ファイルのインポートを有効にする */
    // "noResolve": true, /* `import`、`require`、または `<reference>` によって、TypeScript がプロジェクトに追加するファイルの数が拡張されるのを禁止します。 */

    /* JavaScript サポート */
    // "allowJs": true, /* JavaScript ファイルをプログラムの一部として許可します。これらのファイルからエラーを取得するには、`checkJS` オプションを使用します。 */
    // "checkJs": true, /* 型チェックされた JavaScript ファイルでエラー報告を有効にします。 */
    // "maxNodeModuleJsDepth": 1, /* `node_modules` からの JavaScript ファイルをチェックするために使用されるフォルダーの最大深度を指定します。`allowJs` でのみ適用されます。 */

    /* 発行 */
    // "declaration": true, /* プロジェクト内の TypeScript および JavaScript ファイルから .d.ts ファイルを生成します。 */
    // "declarationMap": true, /* d.ts ファイルのソースマップを作成します。 */
    // "emitDeclarationOnly": true, /* d.ts ファイルのみを出力し、JavaScript ファイルは出力しません。 */
    // "sourceMap": true, /* 出力された JavaScript ファイルのソース マップ ファイルを作成します。 */
    // "outFile": "./", /* すべての出力を 1 つの JavaScript ファイルにまとめるファイルを指定します。`declaration` が true の場合は、すべての .d.ts 出力をまとめるファイルも指定します。 */
    // ここで出力 js ファイル ディレクトリを設定できます "outDir": "./js/", /* 出力されるすべてのファイルの出力フォルダーを指定します。 */
    // "removeComments": true, /* コメントの送信を無効にします。 */
    // "noEmit": true, /* コンパイルからのファイルの出力を無効にします。 */
    // "importHelpers": true, /* ファイルごとにヘルパー関数をインクルードするのではなく、プロジェクトごとに tslib から 1 回ヘルパー関数をインポートできるようにします。 */
    // "importsNotUsedAsValues": "remove", /* 型にのみ使用されるインポートの発行/チェック動作を指定します */
    // "downlevelIteration": true, /* 反復処理用に、より準拠しているが冗長でパフォーマンスの低い JavaScript を出力します。 */
    // "sourceRoot": "", /* デバッガーが参照ソースコードを見つけるためのルートパスを指定します。 */
    // "mapRoot": "", /* 生成された場所ではなく、デバッガーがマップ ファイルを検索する場所を指定します。 */
    // "inlineSourceMap": true, /* 出力された JavaScript 内にソースマップ ファイルを含めます。 */
    // "inlineSources": true, /* 出力された JavaScript 内のソースマップにソース コードを含めます。 */
    // "emitBOM": true, /* 出力ファイルの先頭に UTF-8 バイトオーダーマーク (BOM) を出力します。 */
    // "newLine": "crlf", /* ファイルを出力するための改行文字を設定します。 */
    // "stripInternal": true, /* JSDoc コメントに `@internal` が含まれる宣言の出力を無効にします。 */
    // "noEmitHelpers": true, /* コンパイルされた出力で `__extends` のようなカスタム ヘルパー関数の生成を無効にします。 */
    // "noEmitOnError": true, /* 型チェックエラーが報告された場合はファイルの出力を無効にします。 */
    // "preserveConstEnums": true, /* 生成されたコード内の `const enum` 宣言の消去を無効にします。 */
    // "declarationDir": "./", /* 生成された宣言ファイルの出力ディレクトリを指定します。 */
    // "preserveValueImports": true, /* 削除されるはずだった未使用のインポートされた値を JavaScript 出力に保持します。 */

    /* 相互運用制約 */
    // "isolatedModules": true, /* 他のインポートに依存せずに各ファイルを安全にトランスパイルできることを確認します。 */
    // "allowSyntheticDefaultImports": true, /* モジュールにデフォルトのエクスポートがない場合に 'import x from y' を許可します。 */
    "esModuleInterop": true, /* CommonJS モジュールのインポートのサポートを容易にするために追加の JavaScript を出力します。これにより、型の互換性のために `allowSyntheticDefaultImports` が有効になります。 */
    // "preserveSymlinks": true, /* シンボリックリンクを実際のパスに解決しないようにします。これは、ノード内の同じフラグと相関します。 */
    "forceConsistentCasingInFileNames": true, /* インポート時に大文字と小文字が正しいことを確認します。 */

    /* 型チェック */
    "strict": true, /* すべての厳密な型チェックオプションを有効にします。 */
    // "noImplicitAny": true, /* 暗黙の `any` 型を持つ式と宣言のエラー報告を有効にします。 */
    // "strictNullChecks": true, /* 型チェック時に、`null` と `undefined` を考慮します。 */
    // "strictFunctionTypes": true, /* 関数を割り当てるときは、パラメータと戻り値がサブタイプ互換であることを確認してください。 */
    // "strictBindCallApply": true, /* `bind`、`call`、および `apply` メソッドの引数が元の関数と一致することを確認します。 */
    // "strictPropertyInitialization": true, /* コンストラクターで宣言されているが設定されていないクラス プロパティをチェックします。 */
    // "noImplicitThis": true, /* `this` に `any` 型が指定された場合、エラー報告を有効にします。 */
    // "useUnknownInCatchVariables": true, /* catch 句の変数を 'any' ではなく 'unknown' と入力します。 */
    // "alwaysStrict": true, /* 'use strict' が常に出力されるようにします。 */
    // "noUnusedLocals": true, /* ローカル変数が読み取られない場合にエラー報告を有効にします。 */
    // "noUnusedParameters": true, /* 関数パラメータが読み込まれない場合はエラーを発生させます */
    // "exactOptionalPropertyTypes": true, /* 'undefined' を追加せずに、オプションのプロパティ タイプを記述どおりに解釈します。 */
    // "noImplicitReturns": true, /* 関数内で明示的に返されないコードパスのエラー報告を有効にします。 */
    // "noFallthroughCasesInSwitch": true, /* switch ステートメントのフォールスルー ケースのエラー報告を有効にします。 */
    // "noUncheckedIndexedAccess": true, /* インデックス署名の結果に 'undefined' を含める */
    // "noImplicitOverride": true, /* 派生クラス内のオーバーライドするメンバーが override 修飾子でマークされていることを確認します。 */
    // "noPropertyAccessFromIndexSignature": true, /* インデックス型を使用して宣言されたキーに対してインデックス付きアクセサの使用を強制します */
    // "allowUnusedLabels": true, /* 未使用のラベルのエラー報告を無効にします。 */
    // "allowUnreachableCode": true, /* 到達不能なコードのエラー報告を無効にします。 */

    /* 完全性 */
    // "skipDefaultLibCheck": true, /* TypeScript に含まれる .d.ts ファイルの型チェックをスキップします。 */
    "skipLibCheck": true /* すべての .d.ts ファイルの型チェックをスキップします。 */
  }
}

終了後、vscodeのターミナルをクリックし、構成タスクをクリックし、tsc監視を選択します。エラーが報告され、エラー内容はおおよそ次のようになります

このシステムではスクリプトの実行が禁止されているため、ファイル C:\Users\Administrator\AppData\Roaming\npm\tsc.ps1 を読み込むことができません

このとき、別のウィンドウ PowerShell ise を開いて、コマンド Set-ExecutionPolicy RemoteSigned を入力する必要があります。[すべて] をクリックし、監視タスクを再度実行して、正常に監視します。

ターミナルをもう一度クリックし、「タスクの実行」をクリックして、tsc モニタリングを選択すると、ts ファイルの変更がリアルタイムで監視され、対応する js ファイルが自分で生成されます。

これで、TypeScript でのコード コンパイルを監視するために vscode を使用する方法に関するこの記事は終了です。ts vscode によるコード コンパイルの監視に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • TypeScript 環境を構築して VSCode にデプロイする詳細な手順
  • VsCodeでTypeScriptを編集する方法
  • VSCode開発TypeScript実装手順

<<:  CSSスプライト技術は複数の背景を1つのPNG画像に統合しますCSSポジショニング

>>:  HTML のセルパディングとセルスペース属性を図で説明します

推薦する

MySQL はデータベースを動的に更新します スクリプト例の説明

具体的なupgradeスクリプトは次のとおりです。インデックスを動的に削除する アップグレードが存在...

Sparkの紹介とHadoopとの比較

目次1. SparkとHadoopの比較1.1 Haoopの欠点1.2 Hadoop MR に対する...

初心者がHTMLタグを学ぶ(2)

関連記事:初心者が学ぶ HTML タグ (1)初心者は、いくつかの HTML タグを理解することで ...

JSで実施された機雷掃海プロジェクトの概要

この記事では、JS掃海プロジェクトの概要を参考までに紹介します。具体的な内容は次のとおりです。プロジ...

MySQLでデータテーブルを作成するときにエンジンMyISAM/InnoDBを設定する

mysql を構成するときに、構成ファイル内のデフォルトのストレージ エンジンを InnoDB に設...

JavaScript の構成と継承の説明

目次1. はじめに2. プロトタイプチェーン継承3. コンストラクタの継承4. 組み合わせ継承1. ...

Robots.txtの詳細な紹介

robots.txt の基本的な紹介Robots.txt はプレーンテキスト ファイルであり、Web...

Intelli Idea で Tomcat 設定が見つからない問題の解決方法

2日前に新しい会社に入社しました。その会社ではIntelli Ideaを使っています。Eclipse...

Linux netfilter/iptables の知識ポイントの詳細な説明

ネットフィルターNetfilter は、パケット フィルタリング、転送、およびアドレス変換 NAT ...

Linux は suid vim.basic ファイルを使用して権限昇格を実現します。

カリで再現まず、必要なvim.basicファイルにsuid権限を設定します。 chmod u+s /...

Linux deb パッケージの解凍、変更、その他の操作方法のコード例

さまざまな理由により、debパッケージ内のさまざまなファイルの内容を直接変更する必要がある場合があり...

Docker で hyperf を開発する完全な使用例の詳細な説明

ハイパーフ公式サイトHyperf 公式ドキュメントのインストール1. Dockerの使用docker...

レイアウトサイズを変更するために左右にドラッグする純粋なCSS

ブラウザの非overflow:auto要素resize伸縮機能を利用して、JavaScript を使...

HTML の div と span の違い (共通点と相違点)

共通点: DIV タグと SPAN タグは、コンテンツ全体を非表示にしたり、コンテンツ全体を移動した...

Nginx セッション損失問題の解決策

nginx をリバース プロキシ tomcat として使用する場合、セッション損失が発生する可能性が...