Vite で TS をより効果的に使用する方法

TS は JS の型チェック ツールであり、コードに存在する可能性のある目に見えない問題をチェックすると同時に、コンパイラに構文プロンプト機能を持たせることができます。

create-vue (vue3 公式 scaffolding ツール) を使用してプロジェクトを作成すると、プロジェクトはViteベースで、TypeScript は直接 TS 開発の準備が整います。

この記事では、インストール プロジェクト (足場なし) での TS のサポートについて説明します。

Vite は自然に TS をサポートします

プロジェクトを作成して初期化し (yarn init -y)、vite をインストールします (yarn add Vite -D)。

次に、エントリ ファイルindex.htmlを作成し、カスタムのmain.tsファイルを導入します。

<script src="./main.ts" type="module"></script> 

main.ts ファイル

let tip:string = "这是一个vite项目,使用了ts语法"
console.log('tip: ', tip); 

ターミナルで vite コマンドを使用してプロジェクトを開始すると、出力した内容がコンソールに出力されることがわかります。

このデモでは、ts 関連のプラグインをインストールせずに、通常のプロジェクト用に vite のみをインストールしました。

このことから、vite は既に ts のサポートを内部で処理しており、それを直接使用できることがわかります。

プラグインを使用して機能を強化する

純粋な vite プロジェクトでは、vite は ts 構文エラーを表示せず、デフォルトでコンパイルをブロックします。

注: ここでは、足場を使用しないケースについて説明しています。

たとえば、文字タイプのヒントを main.ts の数字に割り当てます。

let tip:string = "这是一个vite项目,使用了ts语法"
tip = 2
console.log('tip: ', tip); 

このような TS 構文には問題がありますが、それでも正常にコンパイルされます。

自分たちに厳しく要求し、コード レベルを向上させるには、コンソールのエラー出力でコンパイルを妨げ、問題を解決するように強制する必要があります。

この機能はvite-plugin-checkerで実現できます

vite-plugin-checker は、ワーカー スレッドで TypeScript、VLS、vue-tsc、ESLint を実行できるプラグインで、構成に応じてコンパイルをブロックし、コンソールとブラウザーにエラー メッセージを表示できます。

依存関係のインストール

npm i vite-plugin-checker -D 

ルート ディレクトリにvite.config.js構成ファイルを作成し、 vite-plugin-checker を導入します。

// vite.config.js
import checker from "vite-plugin-checker";
import { defineConfig } from "vite";
export default defineConfig({plugins: [checker({typescript: true,}),],
}); 

現時点では、ts 構成ファイル tsconfig.json も必要であるため、プロジェクトを直接実行するとエラーが報告されます。コマンドラインを使用して生成します

npx tsc --init 

tsconfig.json 設定ファイルを作成後、vite サービスを再起動すると、TS の構文エラーが出力されていることがわかります。

コンソール出力

ブラウザ出力

さて、問題のある TS を書いている限り、vite はエラーを報告します。問題を見つけて時間内に対処しましょう! とてもいい匂いがします!

梱包前のTSチェック

Vite は .ts ファイルの変換のみ実行し、タイプ チェックは実行しません。これは、プロジェクトに Ts の文法エラーがあっても、パッケージングは​​正常に進行できることを意味します。

優秀な開発者として、どうしてこのような状況を許すことができるでしょうか?

次の構文を使用して、パッケージ化時にコード インスペクションを実行できます。

  • ビルド スクリプトでtsc --noEmitを実行します。
  • .vue ファイルの場合、vue-tsc をインストールしてvue-tsc --noEmit実行し、*.vue ファイルのタイプをチェックできます。

検証のために package.json で構成します。

// package.json"scripts": {"dev": "vite",// 如果ts检查不通过,vite build就不会执行"build": "tsc --noEmit && vite build",}, 

次に npm run build を実行してパッケージ化コマンドを実行します

案の定、コンパイルはこの時点でブロックされました。

tsc --noEmit の実行原理

これは ts の組み込み構文であり、vite とは関係ありません。When execution tsc --noEmit , TSC will read the configuration file to gets parameter values. --noEmit の機能は、チェックのみであり、コンパイルおよび出力は行いません。コードにエラーがない場合は直接終了し、それ以外の場合はエラーを報告します。

TypeScript の IntelliSense

環境変数については、juejin.cn/post/717201…を参照してください。

デフォルトでは、Viteはvite/client.d.tsでimport.meta.envの型定義を提供します。ただし、一部のカスタム .env[mode] ファイルには TypeScript インテリセンスがありません。

これを行うには、src ディレクトリにenv.d.tsファイルを作成し、次のように定義を追加します。

/// <reference types="vite/client" />

interface ImportMetaEnv {// 自定义内容...readonly VITE_APP_TITLE: stringreadonly VITE_APP_HAHA: stringreadonly VITE_APP_WOCAO: string// 自定义内容...
}

interface ImportMeta {readonly env: ImportMetaEnv
} 

注: 書き込むにはテンプレートをインストールする必要があります。この方法はすべてのプロジェクトに適用され、足場プロジェクトにも同じことが当てはまります。

例:

main.ts でテストする

図に示すように、スマート プロンプトが有効になっていることがわかります。

ここで、vscode でエラー レポートに遭遇しました。これは単なる ts のエラー レポートであり、変数の設定とは関係ありません。

エラーの問題も非常に単純で、ts はプロジェクトが commonjs に基づいていると認識しているため、import.meta 属性がありません。

モジュールの値を「es2022」に変更できます。

やっと

最近、VUE のさまざまな知識ポイントをまとめ、「Vue 開発が知っておくべき 36 のスキル」にまとめた VUE ドキュメントを見つけました。内容は比較的詳しく、各知識ポイントの解説も整っています。



困っている友達は、下のカードをクリックして無料で受け取り、共有できます

おすすめ

転載: blog.csdn.net/web22050702/article/details/128703487