How to use TypeScript in Vue

introduction

In recent years, the call for TypeScript has become increasingly louder, and Typescript has become a necessary skill for the front-end. TypeScript is a superset of JS types and supports features such as generics, types, namespaces, enumerations, etc., making up for the shortcomings of JS in large-scale application development.

When learning TypeScript alone, you will feel that many concepts are relatively easy to understand, but there are still many pitfalls when using it in combination with some frameworks. For example, when using frameworks such as React and Vue, combining them with TypeScript will become a major obstacle. You need to check the definitions of some complex types in the .d.ts declaration files provided by the framework, and the writing methods of components, etc., and you need to make significant adjustments.

This article mainly combines my experience to talk with you about how to smoothly transition from js to ts in Vue . It is recommended to have a certain understanding of TypeScript when reading this article, because the article will not explain some basic knowledge of TypeScript in too much detail. (For details, please refer to the official document https://www.w3cschool.cn/typescript/typescript-tutorial.html , the official document is the best introductory manual)

Build

Install through the official scaffolding

# 1. If Vue CLI is not installed, install it first npm install --global @vue/cli

The latest Vue CLI tool allows developers to create new projects with a TypeScript integration.

Just run vue create my-app .

The command line will then ask you to select a preset. Use the arrow keys to select Manually select features.

Next, just make sure the TypeScript and Babel options are selected, as shown below:

Then configure the rest of the settings as shown below:

Once the setup is complete, vue cli will start installing dependencies and setting up the project.

Directory resolution

After the installation is complete, open the project and you will find that the project directory structure after integrating ts is like this:

|-- ts-vue
    |-- .browserslistrc # browserslistrc configuration file (used to support Autoprefixer)
    |-- .eslintrc.js # eslint configuration |-- .gitignore
    |-- babel.config.js # babel-loader configuration |-- package-lock.json
    |-- package.json # package.json dependencies|-- postcss.config.js # postcss configuration|-- README.md
    |-- tsconfig.json # typescript configuration |-- vue.config.js # vue-cli configuration |-- public # static resources (will be copied directly)
    | |-- favicon.ico # favicon icon| |-- index.html # html template|-- src
    | |-- App.vue # Entry page| |-- main.ts # Entry file loading component initialization, etc.| |-- shims-tsx.d.ts
    | |-- shims-vue.d.ts
    | |-- assets # Theme fonts and other static resources (loaded by webpack)
    | |-- components # Global components| |-- router # Routing| |-- store # Global vuex store
    | |-- styles # Global styles| |-- views # All pages|-- tests # Tests

In fact, roughly speaking, there is not much difference from the project directory built with js before. The main difference is that the suffix of js is now changed to ts, and there are more files such as tsconfig.json , shims-tsx.d.ts , and shims-vue.d.ts . What are these files for:

• tsconfig.json : Typescript configuration file, mainly used to specify files to be compiled and define compilation options
• shims-tsx.d.ts : allows files ending with .tsx to write jsx code in Vue projects
• shims-vue.d.ts : Mainly used for TypeScript to identify .vue files. Ts does not support importing vue files by default.

use

Before we start, let's take a look at some very useful libraries for using typescript in vue

vue-class-component : vue-class-component is a Class Decorator, which is a class decorator

vue-property-decorator : vue-property-decorator is an extension of vue-class-component in the vue organization

import { Vue, Component, Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'

vuex-module-decorators : A very useful library for writing vuex with typescript

import { Module, VuexModule, Mutation, Action, MutationAction, getModule } from 'vuex-module-decorators'

Component Declaration

The way to create a component becomes as follows

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

@Component
export default class Test extends Vue {

}

data object

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

@Component
export default class Test extends Vue {
  private name: string;
}

Prop Declaration

@Prop({ default: false }) private isCollapse!: boolean;
@Prop({ default: true }) private isFirstLevel!: boolean;
@Prop({ default: "" }) private basePath!: string;

!: means it must exist, ?: means it may not exist. These two are grammatically called assignment assertions

@Prop(options: (PropOptions | Constructor[] | Constructor) = {})

• PropOptions, you can use the following options: type, default, required, validator
• Constructor[], specifies the optional type of prop
• Constructor, such as String, Number, Boolean, etc., specifies the type of prop

method

In js, the method needs to be declared in the method object, which now becomes as follows

public clickFunc(): void {
  console.log(this.name)
  console.log(this.msg)
}

Watch monitoring properties

@Watch("$route", { immediate: true })
private onRouteChange(route: Route) {
  const query = route.query as Dictionary<string>;
  if (query) {
  this.redirect = query.redirect;
  this.otherQuery = this.getOtherQuery(query);
  }
}

@Watch(path: string, options: WatchOptions = {})

options contains two properties: immediate?:boolean: whether to call the callback function immediately after the listening starts / deep?:boolean: whether to call the callback function when the property of the monitored object is changed

@Watch('arr', { immediate: true, deep: true })
onArrChanged(newValue: number[], oldValue: number[]) {}

computed

public get allname() {
  return 'computed ' + this.name;
}

allname is the calculated value, name is the monitored value

Lifecycle Functions

public created(): void {
  console.log('created');
}

public mounted():void{
  console.log('mounted')
}

emit events

import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class MyComponent extends Vue {
  count = 0
  @Emit()
  addToCount(n: number) {
      this.count += n
  }
  @Emit('reset')
  resetCount() {
      this.count = 0
  }
  @Emit()
  returnValue() {
      return 10
  }
  @Emit()
  onInputChange(e) {
      return e.target.value
  }
  @Emit()
  promise() {
      return new Promise(resolve => {
      setTimeout(() => {
          resolve(20)
      }, 0)
      })
  }
}

Use js writing

export default {
  data() {
      return {
      count: 0
      }
  },
  methods: {
      addToCount(n) {
      this.count += n
      this.$emit('add-to-count', n)
      },
      resetCount() {
      this.count = 0
      this.$emit('reset')
      },
      returnValue() {
      this.$emit('return-value', 10)
      },
      onInputChange(e) {
      this.$emit('on-input-change', e.target.value, e)
      },
      promise() {
      const promise = new Promise(resolve => {
          setTimeout(() => {
          resolve(20)
          }, 0)
      })
      promise.then(value => {
          this.$emit('promise', value)
      })
      }
  }
 }

• @Emit(event?: string)
• The @Emit decorator accepts an optional parameter, which is the first argument to $Emit and serves as the event name. If this parameter is not provided, $Emit will convert the callback function name from camelCase to kebab-case and use that as the event name.
• @Emit takes the return value of the callback function as the second parameter. If the return value is a Promise object, $emit will be triggered after the Promise object is marked as resolved.
• The parameters of the callback function of @Emit will be placed after its return value and used as parameters by $emit together

vuex

Before using the store decorator, let's go over the traditional store usage.

export default {
    namespaced:true,
    state:{
        foo:""
    },
    getters:{
        getFoo(state) { return state.foo}
    },
    mutations:
        setFooSync(state, payload){
            state.foo = payload
        }
    },
    actions:{
        setFoo({commit},payload){
            commot("getFoo",payload)
        }
    }
}

Then start using vuex-module-decorators

import {
  VuexModule,
  Mutation,
  Action,
  getModule,
  Module
} from "vuex-module-decorators";

VuexModule for basic properties

export default class TestModule extends VuexModule { }

VuexModule provides some basic properties, including namespaced, state, getters, modules, mutations, actions, context

@Module marks the current module

@Module({ dynamic: true, store, name: "settings" })
class Settings extends VuexModule implements ISettingsState {

}

The module itself has several configurable properties:

• namespaced:boolean Enable/disable submodule
• stateFactory:boolean state factory
• dynamic:boolean After the store is created, it is added to the store. After turning on dynamic, the following properties must be provided
• name: string specifies the module name
• store: Vuex.Store entity provides the initial store

@Mutation is annotated as mutation

@Mutation
private SET_NAME(name: string) {
// Set the username this.name = name;
}

@Action is annotated as action

@Action
public async Login(userInfo: { username: string; password: string }) {
  // Login interface and get token
  let { username, password } = userInfo;
  username = username.trim();
  const { data } = await login({ username, password });
  setToken(data.accessToken);
  this.SET_TOKEN(data.accessToken);
}

getModule gets a type-safe store. The module must provide a name attribute.

export const UserModule = getModule(User);

This is the end of this article about how to use TypeScript in Vue. For more information about how to use TypeScript in Vue, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope you will support 123WORDPRESS.COM in the future!