Menu
I'm not very experienced in either TypeScript, Vue, or the Node ecosystem.
I have a working setup created using Vue CLI, with Vue 3 and TypeScript, pretty much unchanged from how vue create produced the project and configuration. If I understand it correctly, Babel will refer to the "browserslist" configuration in my package.json and add polyfills / rewrite code to work with legacy browsers. The TypeScript compiler has --target and --lib options as well, which appear to do something similar.
Is the TypeScript code I write in my Vue project transpiled twice, first by the TypeScript compiler and then by Babel? If so, is there a way to avoid this redundancy?
Editing to add: I just created a new blank project with the above settings, and was asked if I wanted to "Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)". I don't use JSX in Vue, but who could say no to "modern mode," whatever that is.
268
Vue is written in TypeScript itself and provides first-class TypeScript support. All official Vue packages come with bundled type declarations that should work out-of-the-box.
Actually, you can also implement TypeScript one file at the time with Vue (if you add it to an existing project). You take one of your Vue files and add the lang="ts" inside the script tag. Then you modify your component to use the Class API and fix the potential errors TypeScript found. It's really easy!
If you're not using the Vue CLI or do not have a build process, using TypeScript can be a bit too much. But these cases are very few, especially when building apps, like with Ionic Vue. So if you're working with Vue 3, try it out with TypeScript enabled.
This version will be available as a LTS (long-term support) version for 18 months, which means that it will still get security updates and is absolutely safe to keep using. There's a a migration guide, and a https://v3-migration.vuejs.org/migration-build.html.
All official Vue packages come with bundled type declarations that should work out-of-the-box. create-vue, the official project scaffolding tool, offers the options to scaffold a Vite -powered, TypeScript-ready Vue project. With a Vite-based setup, the dev server and the bundler are transpilation-only and do not perform any type-checking.
One of the big issues when adding TypeScript to your project is that you are adding a layer of indirection between the code you write and the code that actually runs in production (since .ts is transpiled to .js in run time). For example, imagine the following TypeScript program:
If you have Vetur currently installed, make sure to disable it in Vue 3 projects. TypeScript Vue Plugin is also needed to get type support for *.vue imports in TS files. WebStorm also provides out-of-the-box support for both TypeScript and Vue. Other JetBrains IDEs support them too, either out of the box or via a free plugin.
Visual Studio Code (VSCode) is strongly recommended for its great out-of-the-box support for TypeScript. Volar is the official VSCode extension that provides TypeScript support inside Vue SFCs, along with many other great features. Volar replaces Vetur, our previous official VSCode extension for Vue 2.
I know this is quite old, but for anyone finding this,
TypeScript can be transpiled by babel or by the typescript compiler, usually projects that use babel will also transpile typescript with babel. In that case the typescript compiler will only handle types files (.d.ts)
Even if you are using the typescript compiler to transpile your ts code and use babel to transpile again, which is not the usual setup, it's still perfectly fine
So most likely you code is not transpiled twice
91
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
