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
- Clone this project on Github and checkout the master branch.
- NodeJS
- 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 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
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
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 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
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! 🎉
Top comments (0)