如何将typescript添加到Vue 3和Vite项目中

我的设置：我通过以下方式安装了 Vue 和 Vite创建 vite 应用程序模块，然后将“init vite-app”生成的所有包更新为 Vue 和 Vite 的最新 RC 版本。

现在我想对我的所有代码使用打字稿。首先我只是玩了一下，然后添加了郎=“ts”到标签中HelloWorld.vue。这似乎有效，尽管我不知道如何从 vue 文件中转换 typescript。

然后我尝试重命名main.js to main.ts。现在什么也没有发生。

我以为我只需要安装 typescript，但后来我突然意识到，为什么它可以在.vue那么组件呢？如果我现在安装 typescript 是不是做错了什么？

为什么 typescript 在 vue 模块（HelloWorld）中可以工作，但 *.ts 文件没有生成 js？

如何将typescript添加到Vue 3和Vite项目中

我将创建一个vite项目来逐步使用typescript：

• 首先，我们首先要创建一个vite项目

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install

• 其次，我们应该安装 typescript

$ npm install typescript

• 第三，我们应该创建一个tsconfig.json根文件夹中的文件，如下所示：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

你可以在这里检查，什么是 tsconfig.json https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

• 那么，我们应该创建一个shims-vue.d.ts文件在src文件夹，像这样：

declare module "*.vue" {
  import { defineComponent } from "vue";
  const Component: ReturnType<typeof defineComponent>;
  export default Component;
}

The shims-vue.d.tsfile 可以帮助您的 IDE 理解以什么结尾的文件.vue is.
现在，我们可以检查是否.ts文件运行良好。
就我而言，我重命名main.js文件到main.ts in the src folder,
并修改index.html，12行：

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

to

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

最后，运行

npm run dev

如果没有错误消息，您可以通过以下方式创建组件文件.ts
祝你好运！