30

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.

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.

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

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?

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

2
  • 1
    Instead of create-vite-app, I would do git clone https://github.com/ktsn/vite-typescript-starter.git, which uses the latest version of Vue 3 and Vite.
    – tony19
    Sep 3, 2020 at 16:48
  • 1
    Thank you, this helps a lot. Also it kind of confirms that the short answer to the main question is, yes, one just installs typscript and then run tsc -w while coding.
    – Solsiden
    Sep 3, 2020 at 17:53

3 Answers 3

67

How to add typescript to Vue 3 and Vite project

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

  • first, we should create a vite project at first
$ npm init vite-app <project-name>
$ cd <project-name>
$ npm install
  • second, we should install typescript
$ npm install typescript
  • 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
  }
}

And you can check here, What is a tsconfig.json

  • 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;
}

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> 

to

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

At last, run

npm run dev

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

2
12

There is a template for typescript named vue-ts. So running npm init vite@latest my-vue-app -- --template vue-ts sets up a typescript vite project.

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

UPDATE: reflected Olanrewaju's comment.

1
  • 1
    @vitejs/create-app is deprecated, use npm init vite instead Jul 13, 2021 at 9:26
0

Per the latest docs, you can run one of the following commands which will give you the choice of framework and typescript options:

npm init vite@latest

yarn create vite

pnpm dlx create-vite

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.