TypeScript and Vue

You may have used TypeScript in the past, or you may be curious about how you can take advantage of the extra tooling TypeScript provides inside of your Vue projects. Why use TypeScript?A recent study by Gao et al found that TypeScript/static typing tools reduced committed bugs by 15% (https://goo.gl/XUTPf4).

If you've used Angular before, this syntax should make you feel right at home, as we'll be using decorators and ES2015 classes. Let's investigate how we can add TypeScript to a project built with the Vue CLI:

# Create a new Vue project
vue init webpack-simple typescript-vue

# Change directory
cd typescript-vue

# Install dependencies
npm install

You should get the following output on the Terminal:

If we navigate to our project directory and run npm install as per the instructions, we then need to install the TypeScript loader and edit our Webpack configuration. This allows us to load .ts files inside of the project, and because we've used the webpack-simple template...