preface

Suppose you already have a VUE project built with vuE-CLI3 scaffolding

Command line installationTypescript

npm install --save-dev typescript
npm install --save-dev @vue/cli-plugin-typescript
Copy the code

writeTypescriptconfiguration

Create tsconfig.json in the root directory. Below is a configuration example (click to see all configuration items). It is worth noting that by default, TS is only responsible for static checking, and even if an error is encountered, it will only report the error at compile time, not interrupt the compile, and eventually produce a JS file. If you want to terminate js file generation when an error is reported, you can set noEmitOnError to true in tsconfig.json.

{
  "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"."dom.iterable"."scripthost"]},"exclude": [
    "node_modules"]}Copy the code

newshims-vue.d.ts

Create a new shims-vue.d.ts file under the root directory and let ts identify the *. Vue file

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

Modify the suffix of the import file

src/main.js => src/main.ts
Copy the code

transform.vuefile

.vue uses ts instances

// Add lang=ts to make Webpack recognize this code as typescript <script lang="ts">
  import Vue from 'vue'
  export default Vue.extend({
    // ...
  })
</script>
Copy the code

Some good plugins

Vue-class-component: Enhances VUE components by flattening them with TypeScript decorators. Click to see more

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

// Indicates that this component accepts the propMessage argument
@Component({
    props: {
        propMessage: String}})export default class App extends Vue {
    Data () {return {MSG: 'hello'}}
    msg = 'hello';
    
    // Computed: {computedMsg() {}}
    get computedMsg() {
        return 'computed ' + this.msg
    }
    
    // equivalent to methods: {great() {}}
    great() {
        console.log(this.computedMsg())
    }
}
Copy the code

Vue-property-decorator: Enhance more vUe-specific decorators 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() {
        this.count = 0
    }
    
    Return value () {this.$emit(' returnValue ', 10, e)}
    @Emit()
    returnValue(e) {
        return 10
    }
    
    // Equivalent to promise() {... promise.then(value => this.$emit('promise', value)) }
    @Emit()
    promise() {
        return new Promise(resolve= > {
            resolve(20)}}}Copy the code