インストール
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監視を選択します。エラーが報告され、エラー内容はおおよそ次のようになります
このとき、別のウィンドウ PowerShell ise を開いて、コマンド Set-ExecutionPolicy RemoteSigned を入力する必要があります。[すべて] をクリックし、監視タスクを再度実行して、正常に監視します。
これで、TypeScript でのコード コンパイルを監視するために vscode を使用する方法に関するこの記事は終了です。ts vscode によるコード コンパイルの監視に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: CSSスプライト技術は複数の背景を1つのPNG画像に統合しますCSSポジショニング
>>: HTML のセルパディングとセルスペース属性を図で説明します
Linux では、アプリケーションをダウンロードしてインストールすると、起動時にアプリケーション名...
優れた HTML コードは美しい Web サイトの基礎となります。私が CSS を教えるときは、まず...
この記事では、MySQL のトランザクション管理操作について説明します。ご参考までに、詳細は以下の通...
Springboot プロジェクトを開始するには、次の 3 つの方法があります。 1. メインメソッ...
目次1. MySQLイメージを取得する2. ダウンロードが完了したか確認する3. MySQLはローカ...
問題 1: Baidu Map はタイル画像 (地図が写真で構成されている) を使用しています。ht...
この記事では、JSカルーセル効果の具体的なコードを実現するための3つの方法を紹介します。具体的な内容...
目次1. 例: これはデータとメソッドを直接取得できます2. 環境を準備し、ソースコードをデバッグし...
製品デザインのプロセスにおいて、デザイナーは常に写真を非常に美しくすることを好みます。仮想ページのコ...
早朝に MySQL 5.7.19 のインストールを終えたばかりですが、午前中に MySQL が最新バ...
IE9 は Microsoft の第二の革命だと言う人もいます。これは誇張ではないと思います。IE6...
前書き: 以前、公式の nginx proxy_cache を CDN 静的キャッシュとして使用して...
目次マルチ環境構成とは何ですか? また、なぜそれが必要なのですか? .env ファイルはどこで設定さ...
ドラッグ機能は主に、ドラッグによる並べ替え、ポップアップ ボックスのドラッグと移動など、ユーザーがカ...
これまでは、拡張子が .msi のファイル、つまり、完全なインストールが使用されていました。しかし、...