Vue 3 和 Vite 项目如何添加 TypeScript

Question

我的设置：我通过 create-vite-app 模块安装了 Vue 和 Vite，然后将“init vite-app”生成的所有包更新为 Vue 和 Vite 的最新 RC 版本。

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

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

我在想我只需要安装打字稿，但后来它击中了我，为什么它在 .vue 组件中工作呢？如果我现在安装打字稿，我做错了吗？

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

原文由 Solsiden 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

Vue 3 和 Vite 项目如何添加 TypeScript

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

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

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

• 其次，我们应该安装打字稿

$ npm install typescript

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

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

你可以在这里查看 什么是 tsconfig.json

• 然后，我们应该在 src 文件夹中创建一个 shims-vue.d.ts 文件，如下所示：

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

shims-vue.d.ts 文件可帮助您的 IDE 了解以 .vue 结尾的文件是什么。

现在，我们可以检查 .ts 文件是否正常工作。

就我而言，我将 main.js 文件重命名为 main.ts 在 src 文件夹中，

并修改 index.html ，第 12 行：

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

至

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

最后，运行

npm run dev

如果没有错误消息，您可以通过 .ts 创建组件文件

祝你好运！

原文由 gg.jiang 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

有一个名为 vue-ts 的打字稿模板。所以运行 npm init vite@latest my-vue-app -- --template vue-ts 建立了一个typescript vite项目。

https://vitejs.dev/guide/#scaffolding-your-first-vite-project

更新：反映了 Olanrewaju 的评论。

原文由 kena0ki 发布，翻译遵循 CC BY-SA 4.0 许可协议