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

问题描述

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

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

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

我当时以为我只需要安装打字稿，但后来打了我一下，为什么它可以在 .vue 组件中工作？如果我现在安装打字稿，我做错什么了吗？

为什么打字稿在vue模块（HelloWorld）中起作用，但是* .ts文件没有生成js？

解决方法

如何在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
  }
}

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

,

有一个名为 vue-ts 的打字稿模板。 因此，运行 npm init @vitejs/app my-vue-app -- --template vue-ts 会设置一个 typescript vite 项目。

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

,

现在有一些关于 Vue 3 docs 的文档可以帮助解决这个问题，但我会在这里完成整个过程。

文档的开头显示了一个推荐的 tsconfig.json 文件，但您不需要复制/粘贴该文件，您可以改为运行以下命令，该命令将自动构建 TypeScript 依赖项为您创建一个 tsconfig.json 文件：

vue add typescript

它会询问您希望如何配置您的项目。选择将所有 .js 文件移动到 .ts 以便它自动为您做事。

如果您使用的是 lang="ts" 文件扩展名，它还应该将 .vue 添加到您的文件中。

我需要自己将 main.js 文件中对 index.html 的引用更改为 main.ts，因此您可能也需要这样做。

可能存在一些对等依赖警告，因此请确保在 vue-typescript 插件依赖它们时添加它们。例如，我收到了一个关于缺少 @vue/cli-service 的警告，我最初忽略了该警告并且向项目添加 TypeScript 失败，因此我执行了 npm install --save-dev @vue/cli-service 来修复该问题并重新运行该过程。

如果 vue add typescript 命令成功，您应该使用 TypeScript 进行设置。

对我来说，我设置了一个默认的 Vue 3 Vite 项目，然后按照我的描述添加了 TypeScript，一切对我来说都运行良好。