在當(dāng)今的軟件開發(fā)領(lǐng)域，TypeScript 已經(jīng)成為了前端開發(fā)的主流語言。Vite 作為一款高性能的構(gòu)建工具，也提供了對 TypeScript 的支持。介紹如何配置 Vite 以支持 TypeScript 項(xiàng)目。

一、安裝 Vite

你需要在你的項(xiàng)目中安裝 Vite。如果你還沒有安裝 Vite，可以通過以下命令進(jìn)行安裝：

npm install -g create-vite

或者

yarn global add create-vite

二、創(chuàng)建一個(gè)新的 Vite 項(xiàng)目

安裝完 Vite 后，你可以使用以下命令創(chuàng)建一個(gè)新的 Vite 項(xiàng)目：

create-vite my-typescript-project

這將會(huì)在當(dāng)前目錄下創(chuàng)建一個(gè)名為 my-typescript-project 的新文件夾，其中包含了你的 TypeScript 項(xiàng)目的所有文件。

三、配置 TypeScript

接下來，你需要在項(xiàng)目的根目錄下創(chuàng)建一個(gè) tsconfig.json 文件來配置 TypeScript。這個(gè)文件位于 src/ 目錄下，其內(nèi)容如下：

{
  "compilerOptions": {
    "target": "es6",
    "module": "commonjs",
    "outDir": "dist",
    "rootDir": "src",
    "strict": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "forceConsistentCasingInFileNames": true,
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "resolveJsonModule": true,
    "esModuleAssignment": true,
    "noEmitOnError": true,
    "importHelpers": true,
    "moduleResolution": "node",
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

在這個(gè)文件中，你需要根據(jù)你的項(xiàng)目需求來配置 TypeScript 的各種選項(xiàng)。例如，你可以選擇是否啟用 experimentalDecorators 和 importHelpers，以及是否禁用 esModuleAssignment。

四、配置 Vite

最后，你需要在項(xiàng)目的根目錄下創(chuàng)建一個(gè) vite.config.js 文件來配置 Vite。這個(gè)文件位于 src/ 目錄下，其內(nèi)容如下：

export default {
  // ...
};

在這個(gè)文件中，你需要根據(jù)你的項(xiàng)目需求來配置 Vite 的各種選項(xiàng)。例如，你可以選擇是否啟用 presetConfig，以及是否禁用 watch。

五、運(yùn)行項(xiàng)目

完成以上步驟后，你就可以運(yùn)行你的 Vite 項(xiàng)目了。在終端中輸入以下命令：

npm run dev

或者

yarn dev

如果一切設(shè)置正確，你應(yīng)該能看到一個(gè)運(yùn)行中的 Vite 項(xiàng)目。你可以在瀏覽器中打開 http://localhost:3000 來查看你的 TypeScript 項(xiàng)目。