Using Typescript with Vue.JS Single File Components
Update from the future: Vue 2.5 introduced large changes to Typescript support. There’s some really great stuff, but this article is no longer correct.
For now, three tips:
- There’s a recommended configuration on the typescript support article in the vue documentation. Use it, but I had to add
noImplicitThis: false
. I’ll get into why in the article. - The doc mentions using Vue.extend on component objects. Since single file components export component objects, do what it says.
...
<script>
import Vue from 'vue';
export default Vue.extend({
...your component object
});
</script>
...
3. You still need sfc.d.ts
which is still not mentioned anywhere in the Vue documentation.
Below is the unedited original article.
Typescript is officially supported, but you need to add a few things to your webpack config. To use single.vue
file components, you need to do a bit more. This took me forever to figure out for some reason. When I was looking around for instructions, I found a few outdated blog posts full of code that didn’t work, a bunch of vue-cli templates that didn’t work with single file components, and an official Github repo and companion library that contained all the code I needed but I had to wade through the issues to figure it out. So here it is, how to use webpack, typescript, and vue single file components together in harmony.
- I started with the webpack-simple template from vue-cli. Check the template repo for installation instructions.
- Install ts-loader for typescript support and link typescript if you have it installed globally. Instructions are also on the repo. Don’t forget to
npm link typescript
! - Modify your webpack.config.js. I’ve marked the necessary changes with a capital
TK
. Note that I chose to use SCSS, so vue-cli inserted the scss rules you see on lines 33 through 39:
4. This is the key. The secret sauce to making it all work. Add a small file to src/ so that typescript knows your .vue files are modules and allows you to import them.
5. tsconfig.json. I know for a fact that it has to exist for this to work, but I don’t entirely know what parts of it are necessary. I know that this one works and I didn’t take the time to figure out why.
6. Any script tag you want to be interpreted as typescript needs to be <script lang="ts">
.
In the end, all the code I needed was within the depths of The vue class component decorator library, but the official typescript support page doesn’t mention usage of single file components and I couldn’t find an up to date write up on the internet, so here we go.
Huzzah!