Level Up your VueJS project with Typescript (Part 1): Installing Typescript

Fernando Alvarez
Jan 2 · 4 min read

Welcome to this new series/course! The goal of this series is that we’re going to take a simple VueJS project and upgrade it to use Typescript! You may wonder, “why to use typescript in my VueJS project if I’m fine with the good old fashioned way?” The answer is simple. There are sometimes that our project can get bigger than we expected and creating new features or a simple refactor could scare us. This is because, most of the time, we don’t have any idea if something else gets broken or how many files need to change to put our feature/refactor in place.

Requirements

How is the project currently working?

The project is quite simple:

  • We have a view with two components that basically do the same but one is done with the Single File Component Pattern (SFC for short) and the other one is using JSX.
  • The other view is just a component linked to a state and a getter in the foo store. It have a textbox that let us mutate the state in “real time” and see the changes right away.

We will add another view in a later part but for now this is a pretty good example.

What is the goal at the end of this series?

At the end of this series:

The Project:

  • Should have all their components migrated to Typescript.
  • Vuex Store should be also migrated to Typescript.
  • Typescript in Express should be in place also.
  • Dependency Injection / IoC Container implemented.

And you will learn:

  • Little bit of TS.
  • How to implement a VueJS Component using TS.
  • How to install TS in your current VueJS project.
  • How to use Express with TS.
  • How to implement Dependency Injection / IoC Containers.
  • How to create a vuex store with TS.
  • How to use Vuex within a component in the TS way.


Mulan by Disney

Installing Typescript

The first thing that you need to do is clone the repository mentioned above in your machine using git

$ git clone git@github.com:jefer590/upgrade-vuejs-ts-series.git

After that, we just install the project packages using yarn and then we check if our project is working as intended

$ yarn install
$ yarn serve

Now it comes the tricky part. To install Typescript into this project, we will use the “magic” of Vue CLI 3 by just typing the next command inside the project’s folder:

$ vue add @vue/typescript

It’s going start to install some dependencies and then it will ask:

? Use class-style component syntax? (Y/n)
? Use Babel alongside TypeScript for auto-detected polyfills? (Y/n)

We say yes (Y)!

And after everything is installed, that’s about it! You already have Typescript on the project! but you may noticed some weird stuff happened. Let me list:

  • Every .js file was renamed to use the .ts extension.
  • Add the VueJS and TSX Shims to the project.
  • The CLI Replaced the Home.vue and App.vue with the default ones (😱)
  • The CLI Added the HelloWorld.vue component

and if you try to run the project is not going to work because the TS compiler is failing. Let’s fix all these problems!

Stabilizing the project

  • To recover the Home.vue and App.vue files, we only need one git command:
$ git checkout HEAD -- src/App.vue src/views/Home.vue
  • We can remove the HelloWorld.vue component
  • Since our store started to use TS instead of JS, we need to type our store module. Go to src/store/foo.ts and type your function params in the next way:

After all of this, if we serve again our project should work fine without any compilation errors.

Installing Extra Packages

For this series we will install a couple of tools that I, personally, love for my day by day TS development in VueJS. I’ll explain both packages in the future so don’t worry about it for now.

we only need one command with yarn to install both packages.

$ yarn add vuex-class vuex-module-decorators

and to support the vuex modules decorators we only need to add the next config almost at the end of the vue.config.js

transpileDependencies: ['vuex-module-decorators']

so, our vue.config.js should look like this:

Let’s test our project! If we run…

$ yarn express

and then…

$ yarn serve

The Express API and the VueJS Site should work! 🎉


That all for the first part folks!



🙌 Thanks for reading! 🙌

Fernando Alvarez

Written by

Software Engineer @ Wizeline

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade