Level Up your VueJS project with Typescript (Part 1): Installing Typescript
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.
- Clone this project on Github and checkout the
- yarn package manager.
- Vue CLI 3.
- Editor/IDE like VSCode or Webstorm.
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
foostore. 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:
- 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👇!
The first thing that you need to do is clone the repository mentioned above in your machine using git
$ git clone firstname.lastname@example.org: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:
.jsfile was renamed to use the
- Add the VueJS and TSX Shims to the project.
- The CLI Replaced the
App.vuewith the default ones (😱)
- The CLI Added the
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
App.vuefiles, we only need one git command:
$ git checkout HEAD -- src/App.vue src/views/Home.vue
- We can remove the
- Since our store started to use TS instead of JS, we need to type our store module. Go to
src/store/foo.tsand 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.
Binding helpers for Vuex and vue-class-component. Contribute to ktsn/vuex-class development by creating an account on…github.com
TypeScript/ES7 Decorators to create Vuex modules declaratively - championswimmer/vuex-module-decoratorsgithub.com
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 should look like this:
Let’s test our project! If we run…
$ yarn express
$ yarn serve
The Express API and the VueJS Site should work! 🎉