We’ll start with how typescript is used in VUE 3
1. Class + decorator mode
<template> <div class="hello"> <h1>{{ msg }}</h1> <! Input type="text" @keydown.enter="addFeature"></p> <div> {{count}}</div> </div> </template> <script lang="ts"> import { Component, Prop, Vue, Emit, Provide, Inject Watch} from 'vue-property-decorator' @component ({// Register Component components: {YouComponent}}) export default class HelloWorld extends Vue {// props true, default: 'hello' }) private msg! : string; // data directly declares,! For assertion, tell TS that values will be passed in the future, and let ts not worry about features: string[] = ['html', 'css', Create () {console.log(' console.log ')} get count() {return this.features.length} // add feature @emit () // add feature @emit (); // add feature @emit (); // Add feature @emit (); KeyboardEvent) {// assert: The user determines the type of the variable, You can use the assertion const inp = e.target as HTMLInputElement this.featues.push (inp.value) inp.value = "return feature} // Watch monitor features @watch ('features', {deep: true, immediate: true}) onFeaturesChange (val: any, old: Any) {console.log('features changed ', val, Old)} @provide () foo = 'foo' // Provide foo in the parent component // Inject @inject () foo! : string } </script>Copy the code
2. Vue. The extend mode
<script lang="ts"> import Vue from 'vue' export default Vue.extend({ created () {}, data () { return { title: 'use the extend of ts method 1}}, the methods: {}, watch: {}, computed: {},}) < / script >Copy the code

This mode has the same ts hint as the original one

3. The benchmark model
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class HelloWorld extends Vue {
  xianyu = 'TSX way'
  add () {
    console.log(1)
  }

  render () {
    return (
      <div>
        <span>{this.xianyu}</span>
      </div>)}}Copy the code

This mode works better for react students. Templates are located in class, and there are hints for writing templates

Attach the official link to unlock more usage

Here’s how typescript vuex is used

Vuex-module-decorators take advantage of ts’s type system by providing a modular way to declare VUex modules through decorators.

The installation

npm i vuex-module-decorators -D
Copy the code

Add the store root file store/index.ts

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)

// Vuex.store does not need to be configured
// It does not need to be introduced in main.ts
export default new Vuex.Store({
})
Copy the code

Define counter module and create store/counter.ts

import { Module, VuexModule, Mutation, Action, getModule } from 'vuex-module-decorators'
import store from './index'
// Dynamic registration module
@Module({ dynamic: true.store: store, name: 'counter'.namespaced: true })
class CounterModule extends VuexModule {
  count = 1

  @Mutation
  add () {
    // Access count directly through this
    this.count++
  }

  / / define getters
  get doubleCount () {
    return this.count * 2
  }

  @Action
  asyncAdd () {
    setTimeout(() = > {
      // Access add directly through this
      // this.context.com MIT ('add') equivalent to the following
      this.add()
    }, 1000)}}// Export modules should be the result of getModule
export default getModule(CounterModule)
Copy the code

How to use app.vue

<template> <div> < h1@click ="add">mutation: {{count}}</h1> < h1@click ="asyncAdd"> Action: {{count}}</h1> <h1> Getter: {{doubleCount}}</h1> </div> </template> <script lang="ts"> import { Component, Vue } from 'vue-property-decorator' import Counter from '@/store/counter' @Component export default class extends Vue { get count () { return Counter.count } get doubleCount () { return Counter.doubleCount } add () { Counter.add() } asyncAdd () { Counter.asyncAdd() } } </script>Copy the code

Vuex module decorates the organ side link