21

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

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

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

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

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

4

3 回答 3

45

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

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

  • 首先，我们应该首先创建一个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并 修改第12 行：src
index.html

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

至

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

最后，运行

npm run dev

如果没有错误信息，您可以通过.ts
Goodluck 来创建您的组件文件！

于 2020-10-20T05:16:57.857 回答
10

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

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

更新：反映了 Olanrewaju 的评论。

于 2021-02-27T07:59:08.700 回答
0

根据最新的文档，您可以运行以下命令之一，这些命令将为您提供框架和打字稿选项的选择：

npm init vite@latest

yarn create vite

pnpm dlx create-vite

于 2021-09-27T01:49:02.343 回答