How to use TypeScript in

AlthoughThe support for TypeScript is not very complete, but from the upcoming version 3.0 this year, the repository on GitHubvue-next Look, providing better official support for TS should also be an important feature. So, before we welcome 3.0, let’s take a look at the current version of the two to eat~

Create a project

Although there are various related Starters on GitHub, useVue CLIIt should be a relatively good way to use itvue createWhen creating a new project,presetchooseManually select featuresOptions, addTypeScript
If you want to fully use the class features provided in ES6 in vue applications, thenclass-style component syntaxSelect Y (this article mainly introduces the situation of selecting Y)
forBabelIn other words, generally speaking,linter / formatterThe specific choices can be determined according to the project requirements, and there will be no explanation here

Enter the project

After creation is completed, take a look, can be foundvue-class-componentandvue-property-decoratorAnd other ts-related modules have been added, where:vue-class-componentThis allows you to create components using class-style syntax, such as the following code:

<template>
 <div>
 <button @click="decrement">-</button>
 {{ count }}
 <button @click="increment">+</button>
 </div>
</template>

<script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'

 // Define the component in class-style
 @Component
 export default class Counter extends Vue {
 // Class properties will be component data
 count = 0

 // Methods will be component methods
 increment() {
  ++
 }

 decrement() {
  --
 }
 }
</script>

andvue-property-componentIt depends entirely on the former and provides@ComponentSeveral other decorators, such as@Prop

import { Vue, Component, Prop } from 'vue-property-decorator'

 @Component
 export default class YourComponent extends Vue {
 @Prop(Number) readonly propA: number | undefined
 @Prop({ default: 'default value' }) readonly propB!: string
 @Prop([String, Boolean]) readonly propC: string | boolean | undefined
}

Let’s take another simple example of combining the two:

<template>
 <div class="hello">
 <h1>{{ msg }}</h1>
 <h1>{{ fullName }}</h1>
 <button @click="reverseStr()">Reverse</button>
 </div>
</template>

<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';

@Component
export default class HelloWorld extends Vue {
 @Prop() private msg!: string;
 firstName = "rapt";
 lastName = "azure";

 mounted() {
 ('mounted');
 }

 // Computed property
 get fullName(): string {
 return  + ;
 }

 // Method
 reverseStr() {
  = ('').reverse().join('');
  = ('').reverse().join('');
 }

}
</script>

At this time, your vue project is already fully-typed, and of course there will be better automatic completion and error prompts.
To better determine the type, for exampleinterfacesSuch folders make full use of ts' interfaces and classes to make the project have better organizational structure, readability and maintenance.

Another option

In fact, of course, you can not use the class style. In this way, it will be more similar to the familiar vue, and of course it also fully supports the types.
Here is a simple example~<template>

<div class="hello">
  <h1>{{ msg }}</h1>
  <h1>{{ test }}</h1>
 </div>
</template>

<script lang="ts">
import Vue from 'vue';

export default ({
 name: 'HelloWorld',
 props: {
  msg: String,
 },
 data() {
  return {
   test: "Hello from TS" as string
  }
 },
 methods: {
  pressMe(): string {
   return  + 'br'
  }
 }
});
</script>

Other words

This article just briefly discusses the possibility of using TypeScript in it, and more related content isOfficial DocumentationYou can find it in, or you can go to the Vue area of Github and TS area to visit~
The emergence of TypeScript has brought new vitality to the JavaScript ecosystem. Whether it is the three front-end frameworks Vue, React, Angular, or Node-based back-end frameworks such as Nest and Express, they are actively embracing TS. I hope the entire ecosystem will develop better and better in the future~

Summarize

This is the end of this article about using TypeScript. For more related content on using TypeScript, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!