如何将打字稿添加到 Vue 3 和 Vite 项目中 [英] How to add typescript to Vue 3 and Vite project

问题描述

我的设置:我通过 create-vite-app 模块安装了 Vue 和 Vite，然后将init vite-app"生成的所有包更新到最新的 RC 版本Vue 和 Vite.

My setup: I installed Vue and Vite via the create-vite-app module, and then updated all the packages that was generated by 'init vite-app' to the very latest RC versions for Vue and Vite.

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

Now I want to use typescript for all my code. First I just played around a little bit, and added the lang="ts" to the tag in HelloWorld.vue. That seems to work, though I have no idea how typescript gets transpiled from the vue file though.

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

Then I tried to rename the main.js to main.ts. Now nothing happen.

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

I was thinking that I just need to install typescript, but then it hit me, why is it working in the .vue component then? Am I doing something wrong if I install typescript now?

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

Why does typescript work in the vue module (HelloWorld), but no js is generated from the *.ts file?

推荐答案

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

我将创建一个vite项目来逐步使用打字稿:

How to add typescript to Vue 3 and Vite project

I will create a vite project to use typescript step by step:

• 首先，我们应该首先创建一个vite项目

$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install

• 第二，我们应该安装 typescript

$ npm install typescript

• 第三，我们应该在根文件夹中创建一个 tsconfig.json 文件，如下所示:
• third, we should create a tsconfig.json file in the root folder, like this:

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "moduleResolution": "node",
    "importHelpers": true,
    "isolatedModules": true,
    "noEmit": true
  }
}

你可以在这里查看，什么是 tsconfig.json

• 然后，我们应该在 src 文件夹中创建一个 shims-vue.d.ts 文件，如下所示:
• then, we sholud create a shims-vue.d.tsfile in the src folder, like this:

declare module "*.vue" {
  import { defineComponent } from "vue";
  const Component: ReturnType<typeof defineComponent>;
  export default Component;
}

shims-vue.d.ts 文件可帮助您的 IDE 了解以 .vue 结尾的文件是什么.
现在，我们可以检查 .ts 文件是否运行良好.
就我而言，我在 src 文件夹中将 main.js 文件重命名为 main.ts，
并修改index.html，第12行:

The shims-vue.d.ts file helps your IDE to understand what a file ending in .vue is.
Now, we can check whether the .ts file works well.
In my case, i rename the main.js file to main.ts in the src folder,
and modify the index.html, 12 line:

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

到

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

最后，运行

npm run dev

如果没有报错信息，你可以通过.ts
创建你的组件文件祝你好运！

If there is no error message, you can create your component file by .ts
Good luck!

这篇关于如何将打字稿添加到 Vue 3 和 Vite 项目中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！