DEV Community

Fernando Alvarez
Fernando Alvarez

Posted on • Originally published at Medium on

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

#vue #typescript #tutorial #frontend

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.

If you want to see the completed project, click down here👇!

jefer590/upgrade-vuejs-ts-series

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](mailto:git@github.com):jefer590/upgrade-vuejs-ts-series.git
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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)
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode
  • 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 andtype 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
Enter fullscreen mode Exit fullscreen mode

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']
Enter fullscreen mode Exit fullscreen mode

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

Let’s test our project! If we run…

$ yarn express
Enter fullscreen mode Exit fullscreen mode

and then…

$ yarn serve
Enter fullscreen mode Exit fullscreen mode

The Express API and the VueJS Site should work! 🎉

That all for the first part folks! Stay tuned for part two where we are going to translate some components to Typescript.

🙌 Thanks for reading! 🙌

Top comments (0)

Read next

turingvangisms profile image

Nextjs API Router

Turing -

herat_dhruv profile image

Respond to the interview question about React performance optimization. 🚀

Herat Dhruv -

ravikishan profile image

Building a High-Performance Full-Text Search Engine in Go

Ravi Kishan -

avoguga profile image

How to Build an Icon Library with TypeScript, Tsup, and SVGR

Gustavo Henrique -