TypeScript is a powerful language and using it in both React and Angular makes it easier for developers to work. Let's learn how to integrate TypeScript into VueJS!
First we must install Vue's CLI globally. We will follow the recommendation to install global. To do this, run this command, in your terminal:
npm install -g @vue/cli @vue/cli-service-global
# or
yarn global add @vue/cli @vue/cli-service-global
If you're on Mac or Linux, remember to put sudo in front of the command line sudo npm install -g @vue/cli @vue/cli-service-global!
Now just wait for the packages to be installed. The next step is to create our first project, put the following command in your terminal:
vue create typescript-with-vuejs
See the commands for selecting options on the keyboard:
Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)
Now you will see in your VSCode terminal or your system's native command prompt, these options, check Manually select Features:
Since we want to use TypeScript, we must choose the option in blue, to navigate use the arrows on your keyboard and press enter, you will see these settings, :
You will notice that TypeScript option will not come selected. To do this, select down by the arrow keys and click on the space bar. Ready! We can continue, click on Enter:
Now select option 2.x in the image above ☝ , after clicking enter, another configuration will be shown:
and finally select what you want in separate files 👇 :
You will see that he will ask you to save these settings for future projects, feel free to choose. Another question appears on the console, if you prefer to use Yarn or NPM, choose your preference. Then he will create the Vuejs project. The folder structures should look exactly like this 👇:
To run the project, just enter the folder through the console and run the command that it suggests for you, in my case, as I installed using Yarn, it shows yarn serve 👇:
By default it will start at port 8080, see the image below of the local project:
In the next article we will discuss more about VueJS with TypeScript. Thank you and any questions contact me!
See you in the next post! 😉
References: cli.vuejs.org