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

Question

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

现在我想使用typescript编写所有的代码。起初我只是尝试了一下，在HelloWorld.vue标签中添加了lang="ts"。这个似乎有效，但我不知道typescript如何从vue文件中转换。

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

我原本认为我只需要安装typescript，但我突然想到，为什么它在.vue组件中可以工作呢？如果现在安装typescript，我是否做错了什么？

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

- Solsiden

---

我会选择使用 git clone https://github.com/ktsn/vite-typescript-starter.git，而不是 create-vite-app。这个仓库使用了最新版本的 Vue 3 和 Vite。 - tony19

谢谢，这非常有帮助。同时也证实了主要问题的简短答案是肯定的，只需安装Typscript并在编码时运行tsc -w即可。 - Solsiden

Answer 1

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

我将逐步创建一个使用 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

• 然后，在 src 文件夹中创建一个叫做 shims-vue.d.ts 的文件，像这样：

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行：

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

到

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

最后，运行

npm run dev

如果没有错误提示，你可以通过.ts创建你的组件文件。
祝你好运！

- gg.jiang

---

我按照你说的做了一切，但为了使其工作，我不得不在compilerOptions对象中添加"strict": true。 - DannyFeliz

应该是 npm install typescript --save-dev 吧？ - Roel

Answer 2

有一个名为vue-ts的typescript模板。

因此，运行npm init vite@latest my-vue-app -- --template vue-ts将设置一个typescript的vite项目。

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

更新：反映了Olanrewaju的评论。

- kena0ki

---

@vitejs/create-app已被弃用，请使用npm init vite代替。 - AbdulAzeez Olanrewaju

Answer 3

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

npm init vite@latest

yarn create vite pnpm dlx create-vite

- Riza Khan