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 のセルパディングとセルスペース属性を図で説明します

推薦する

Linuxのwhichコマンドの具体的な使い方

Linux でファイルを見つけたいのに、その場所がわからないことがよくあります。次のコマンドを使用し...

Nginx の realip モジュールの使い方の基礎学習

序文nginx モジュールには、公式とサードパーティの 2 種類があります。nginx のインストー...

コード例を通してページ置換アルゴリズムの原理を理解する

ページ置換アルゴリズム: 本質は、限られたメモリをワイヤレス プロセスに対応できるようにすることです...

太字の <b> と <strong> の違いの分析

私たちウェブマスターは皆、ウェブサイトを最適化する際に記事内のキーワードを太字にすることが最適化に非...

プライベートレジストリ内の画像を照会または取得する方法

Dockerはプライベートレジストリ内のイメージを照会または取得するために、 docker 検索 1...

トランザクションとロックを表示するための MySQL の一般的なステートメント

データベース内のトランザクションとロックを表示するための一般的なステートメントトランザクションの待機...

Nginx を使用してクロスドメイン Vue 開発環境を処理する方法

1. 需要正しい Cookie 配信と SSO テストを確実に実行できるように、ローカル テスト ド...

mysqlのデータディレクトリ内のファイルを直接コピーしてデータを復元する実装

mysqlはデータディレクトリ内のファイルをコピーしてデータを復元します背景: MySQL がクラッ...

マルチコア CPU を使用して Linux コマンドを高速化する方法 (GNU Parallel)

非常に大量のデータ(数百 GB)を計算する必要があったことはありますか?または、その内部を検索したり...

js でシンプルなタブを実装する

タブ選択カードは、実際の Web ページで非常に頻繁に使用されます。基本的に、すべての Web ペー...

Navicat For MySQL の使い方に関する簡単なチュートリアル

推薦する: Navicat for MySQL 15 登録とアクティベーションの詳細なチュートリアル...

vueはel-tableの列幅の適応を完璧に実現します

目次背景技術的ソリューション具体的な実装要約する背景Element UI は、PC で人気の Vue...

Kali Linux システムのバージョンを確認する方法

1. Kali Linuxシステムのバージョンを確認するコマンド: cat /etc/issue 2...

JS はランダム点呼システムを実装します

参考までに、JSを使用してランダム点呼システムを実装します。具体的な内容は次のとおりです。毎回の授業...

JavaScript の基本オブジェクト

目次1. オブジェクト1.1 オブジェクトとは何ですか? 1.2 なぜオブジェクトが必要なのか? 2...