如何将打字稿添加到 Vue 3 和 Vite 项目中

Question

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

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

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

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

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

Answer 1

如何将打字稿添加到 Vue 3 和 Vite 项目中

我将创建一个 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

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

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设置了一个打字稿vite项目。

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

更新：反映了 Olanrewaju 的评论。