This article introduces the simple use of TypeScript in Vue, where Html templates and CSS styles remain unchanged and javascript parts are mostly converted to class form.

  1. The basic template

Here are some basic ways to write props, data, computed, watch, periodic functions, methods, mix, filters, and more in TS templates.

<template>
  <div class="test">
    <h1>This is an about page</h1>
    <ts-child title="Subcomponent" @publish="handlePublish"></ts-child>
  </div>
</template>
Copy the code
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import TsChild from './ts-child.vue'
import * as filters from '@/filters/filters'

// Pass an object to @Component, set Component name, custom properties, mixin, child components, etc
@Component({
  / / component name
  name: 'TSComponent'.// Custom attributes
  componentName: 'TSComponent'./ / with
  mixins: []./ / child component
  components: {
    TsChild
  },
  / / filter
  filters: filters
})
export default class extends Vue { // Use the class structure, class after the name can be written, can also be omitted
  /********************* props *********************/
  // The props property needs to be written separately, in the @ form of the interpreter. () is the prop property, passed in as an object
  / /! And? ", learn about typescript@Prop() value! : string// Mandatory prop example
  @Prop({ required: true}) title! : string// prop default value example
  @Prop({ default: () = >({}) }) options? : object/********************* data *********************/
  // Change the variables defined in data to attributes of the class by adding private, public, protected, and other keywords
  private inputValue = this.value
  private list = []

  /********************* computed *********************/
  // The method is preceded by get and set to indicate a computed property, get to obtain the computed property value, and set to indicate Settings
  get showTitle () {
    return this.title
  }
  set showTitle (val) {
    this.title = val
  }

  /********************* watch *********************/
  // use the interpreter @watch to define it separately
  @Watch('value')
  private onValueChange(value: string, oldValue: string) {
    this.inputValue = value
  }
  // Watch needs to write the property
  @Watch('options', { immediate: true.deep: true })
  private onOptionsChange(value: string, oldValue: string) {
    // doSomething...
  }

  / * * * * * * * * * * * * * * * * * * * * * life cycle function * * * * * * * * * * * * * * * * * * * * * /
  created () {
    // doSomething...
  }
  mounted () {
    // doSomething...
  }
  beforeDestroy () {
    // doSomething...
  }

  /********************* methods *********************/
  handlePublish () {
    // doSomething...
  }
}
</script>
Copy the code
  1. Filter writing

Filters can be defined directly in @Component:

@Component({
  filters: {
    filterOne: () = > {},
    filterTwo: () = >{}}})Copy the code

Of course, for the sake of simple code and easy management, it is recommended to extract the filter, write it in a SEPARATE TS file, import use:

// @/filters/filters.ts
export const uppercaseFirstChar = (str: string) = > {
  return str.charAt(0).toUpperCase() + str.slice(1)}export const formatMoney = (str: string) = > {
  return ` RMB${str}`
}
Copy the code

You can import all or on demand:

// Import form 1
import * as filters from '@/filters/filters'
@Component({
  filters: filters
})

// Import form 2
import { uppercaseFirstChar, formatMoney } from '.. /filters/filters'
@Component({
  filters: {
    uppercaseFirstChar,
    formatMoney
  }
})
Copy the code
  1. Custom attributes

If you’re familiar with the Element UI code, you’ll notice that it makes a lot of use of the custom attribute componentName. If you want to define a property for yourself, see the following:

declare module 'vue/types/options' {
  interface ComponentOptions<V extendsVue> { componentName? : string } }Copy the code

When you want to use custom attributes in multiple places, it is recommended that you extract the declaration into a separate TS file and import it where you use it.

The above content, only for reference, if there is help, we are honored!