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？

Answer 1

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

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

首先我们要先创建一个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
  }
}

你可以在这里查看，What is a 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
创建您的组件文件祝你好运！

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 的评论。

Answer 3

根据最新的 docs，您可以运行以下命令之一，您可以选择框架和打字稿选项：

npm init vite@latest

yarn create vite

pnpm dlx create-vite

Vue 3 和 Vite 项目如何添加 TypeScript

How to add typescript to Vue 3 and Vite project

typescript

vue.js

vite

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