Getting Started With Vue CLI 3 + TypeScript

  • 2019-04-06 01:28 AM
  • 129

Getting Started With Vue CLI 3 + TypeScript

Contents:

  • Creating a project
  • Project structure
  • Writing components

Creating a project

Note that the following steps can also be achieved on the Vue GUI — to open it type Vue ui into your command line.

Start off by creating a Vue CLI project as normal:

# Install Vue CLI if it isn't already installed
npm install --global @vue/cli

# Create a new project
vue create my-project-name

When prompted, choose ‘Manually select features’ and then select TypeScript. Select any other features that you would like.

Vue CLI 3 + TypeScript

Further options

After this, you’ll be asked to select additional options.

Use class-style component syntax? Vue TypeScript components can be written in either of two ways:

Answer Yes to install the libraries needed to write class-style components.

Pick a linter / formatter config: 
Choose TSLint for appropriate TypeScript syntax checking and analysis.

Wait for the project to be created, and then type npm run serve to see it live.

Vue CLI 3 + TypeScript

Project structure

Your folder structure will look similar to a typical Vue CLI project. Some files are specific to TypeScript projects:

Project:
|   babel.config.js
|   package-lock.json
|   package.json
|   postcss.config.js
|   README.md
|   tsconfig.json
|   tslint.json
|   .browserslistrc
|   .gitignore
|   
+---node_modules 
|
+---public
|   |   favicon.ico
|   |   index.html
|   |   manifest.json
|   |   robots.txt
|   |   
|   \---img
|       \---icons
|               
\---src
    |   App.vue
    |   main.ts
    |   registerServiceWorker.ts
    |   router.ts
    |   shims-tsx.d.ts
    |   shims-vue.d.ts
    |   store.ts
    |   
    +---assets
    |       logo.png
    |       
    +---components
    |       HelloWorld.vue
    |       
    \---views
            About.vue
            Home.vue

tsconfig.jsonDenotes a TypeScript project. Contains compiler options and specifies the location of root files.

tslint.jsonOptions and rules for Typescript linting, for TSlint.

main.ts The equivalent of main.js; the entry file for the project.

shims-tsx.d.ts Allows the use of .tsx files. Read more about this here.

shims-vue.d.ts Allows .vue single file components to be imported and used.

Writing components

We can now write TypeScript in .vue single file components, within the script tags.

<script lang="ts"></script>

Components are written using either Vue.extend() or the @Component decorator. Choose the way that is best suited to your needs.

Basic usage, with Vue.extend()

Similar to declaring a normal Vue component. Vue.extend() is used so that the code inside can be subject to type inference.

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
  name: 'HelloWorld',
  props: {
    msg: String,
  },
});
</script>

<style scoped lang="scss">
</style>

Class-style, with @Component decorator

Decorators, such as @Prop, @Watch, @Emit, are used to define the component. 
This is achieved using a combination of two libraries, vue-class-component and vue-property-decorator.

<template>
  <div>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator';
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}
</script>

<style scoped lang="scss">
</style>

IDE support for TypeScript

TypeScript support and features are available with these IDEs:

Learn More

Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex)
Nuxt.js - Vue.js on Steroids
Build Web Apps with Vue JS 2 & Firebase
Understanding TypeScript
Learn TypeScript From Scratch
Vue.js Tutorial for beginners
Unit vs E2E Testing for Vue.js
Vue.js and D3: A Chart Waiting To Happen
Vue CLI 3 Full-Stack App Structure
Writing better Reducers with React and Typescript 3.4
TypeScript and Babel, a match made in heaven

Thanks for reading!

Originally published by Karl Lee https://medium.com

Suggest