preface

Recently, I reconstructed my previous project QQ Music mobile terminal, using vue, vuex, VUe-Router, and typescript. During this period, I encountered a lot of problems. I will list the problems I encountered and the solutions to avoid forgetting them.

Refactoring completed project ===> VUE-QQ-music

The following two articles (thanks to both authors) can be used to configure TypeScript and Vue family buckets:

  1. New vue + typescript projects start

  2. Vue2.5+ Typescript introduces a comprehensive guide to Typescript – the Vuex chapter

TypeScript

Why should I integrate TypeScript with Vue? Because TypeScript has several advantages:

  • Readability. TypeScript is a superset of JavaScript, which means it supports all JavaScript syntax. And on top of this to add some JavaScript extensions, such as interface. This greatly improves the readability of the code
  • Static type checking. Static type checking can save you a lot of unnecessary errors that you don’t have to discover during debugging.
  • Code prompt. Ts with vscode, the code prompt is very friendly
  • Code refactoring. For example, changing a variable name across a project (which can also be the class name, method name, or even filename [renaming a file automatically changes the import of the entire project]) is not possible in JS, whereas TS can easily do it. See what amazing things happen below 😁⬇️

Problems encountered and solutions

Problem a

Ts cannot recognize $ref

$refs. XXX = this.$refs. XXX

this.$refs.lyricsLines as HTMLDivElement;Copy the code

$ref extends Vue; $ref extends Vue; $ref extends Vue

$refs: {
    audio: HTMLAudioElement,
    lyricsLines: HTMLDivElement
}Copy the code

Question 2

Ts cannot identify require

The solution

Installation declaration file

yarn add @types/webpack-env -DCopy the code

Question 3

runnpm run buildappear

The solution

You can fix this by using the most recent beta version of uglifyjs-webpack-plugin. Our team is working to remove completely the UglifyJsPlugin from within webpack, and instead have it as a standalone plugin.

If you do yarn add uglifyjs-webpack-plugin@beta --dev or npm install uglifyjs-webpack-plugin@beta --save-devyou should receive the latest beta which does successfully minify es6 syntax. We are hoping to have this released from beta extremely soon, however it should save you from errors for now!

Upgrade your version of uglifyjs-webpack-plugin: yarn add uglifyjs-webpack-plugin@beta –dev

Problem four

vue-property-decoratorThe decorator is not written correctly. I was going to inject mixins into a component, and I said:



Ts indicates that mixin cannot be found. Decorator () : 😂

The solution

Write mixins inside @Component… , like this:

Pay attention to the point

  1. If you reference third-party libraries with no type declarations, you will need to write x.d.ts files yourself
  2. If the UI component is referenced, if the console appearsProperty '$xxx' does not exist on type 'App'If so, then you canvue-shim.d.tsincrease
declare module 'vue/types/vue' {
  interface Vue {
    $xxx: any,
  }
}Copy the code

The last

After a few days of refactoring, I think it’s much more efficient to add TypeScript, but Vue+TypeScript is still not as complete as Angular support. I believe that Vue will integrate ts even better in the future!