如何向Vue 3和Vite项目添加typescript

Question

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

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

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

我以为我只需要安装 typescript，但后来我突然意识到，为什么它在 .vue 组件中工作？如果我现在安装 typescript 是不是做错了什么？

为什么 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
  }
}

您可以在这里查看，什么是 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

会设置一个 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

Answer 4

你可以尝试：

vue add typescript