Implementation method of introducing Typescript to Vue-cli3 project

Preface

Suppose there is already a vue project built with vue-cli3 scaffolding

Command line installation Typescript

npm install --save-dev typescript
npm install --save-dev @vue/cli-plugin-typescript

Writing Typescript configuration

Create a new configuration instance in the root directory (Click to view all configuration items). It is worth noting that by default, ts is only responsible for static checking. Even if an error is encountered, it only reports an error during compilation and will not interrupt compilation. In the end, a js file will be generated. If you want to terminate the generation of the js file when an error is reported, you can configure noEmitOnError to true in .

{
 "compilerOptions": {
  "target": "esnext",
  "module": "esnext",
  "strict": true,
  "importHelpers": true,
  "moduleResolution": "node",
  "experimentalDecorators": true,
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "sourceMap": true,
  "baseUrl": ".",
  "allowJs": false,
  "noEmit": true,
  "types": [
   "webpack-env"
  ],
  "paths": {
   "@/*": [
    "src/*"
   ]
  },
  "lib": [
   "esnext",
   "dom",
   "",
   "scripthost"
  ]
 },
 "exclude": [
  "node_modules"
 ]
}

New

Create a new one in the root directory, let ts recognize the *.vue file, and the file content is as follows

declare module '*.vue' {
 import Vue from 'vue'
 export default Vue
}

Modify the entry file suffix

src/ => src/

Rebuild .vue files

Use ts instances in .vue

// Add lang=ts to let webpack recognize this code as typescript&lt;script lang="ts"&gt;
 import Vue from 'vue'
 export default ({
  // ...
 })
&lt;/script&gt;

Some useful plugins

vue-class-component: Strengthens Vue components and uses TypeScript decorator to enhance Vue components to make the components flatter.Click to see more

import Vue from 'vue'
import Component from 'vue-class-component'

// Indicates that this component accepts the propMessage parameter@Component({
  props: {
    propMessage: String
  }
})
export default class App extends Vue {
  // Equivalent to data() { return { msg: 'hello' } }  msg = 'hello';
  
  // Equivalent to computed: { computedMsg() {} }  get computedMsg() {
    return 'computed ' + 
  }
  
  // Equivalent to methods: { great() {} }  great() {
    (())
  }
}

vue-property-decorator: Enhance more decorations that combine Vue features on vue-class-component.Click to see more

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

@Component
export default class App extends Vue {
  @Prop(Number) readonly propA: Number | undefined
  @Prop({ type: String, default: ''}) readonly propB: String
  
  // Equivalent to watch: { propA(val, oldval) { ... } }  @Watch('propA')
  onPropAChanged(val: String, oldVal: String) {
    // ...
  }
  
  // Equivalent to resetCount() { ... this.$emit('reset') }  @Emit('reset')
  resetCount() {
     = 0
  }
  
  // Equivalent to returnValue() { this.$emit('return-value', 10, e) }  @Emit()
  returnValue(e) {
    return 10
  }
  
  // equivalent to promise() { ... (value => this.$emit('promise', value)) }  @Emit()
  promise() {
    return new Promise(resolve =&gt; {
      resolve(20)
    })
  }
}

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.