How to use TypeScript related configuration in vue project

1. Why use typescript

TypeScript brief introduction:

It is a strongly typed version of JavaScript. Then remove the types and unique syntax during the compilation period to generate pure JavaScript code. Since JavaScript is still running in the browser in the end, TypeScript does not rely on browser support and does not cause compatibility issues.
TypeScript is a superset of JavaScript, which means it supports all JavaScript syntax. And on top of this, some extensions are added to JavaScript, such as class/interface/module, etc. This will greatly improve the readability of the code.

Summary of advantages:

Static type checking: Type checking can avoid many low-level code errors;
IDE intelligent tips: When using a method, you can clearly know the parameters, types and return value types defined by the method; when using an object, you only need to know which attributes and the types of attributes are there;
Code reconstruction: After constant demand iteration, code reconstruction cannot be avoided. During reconstruction, if there are clear and standardized interface definitions, class definitions, etc. in the early stage, it will be very helpful for reconstruction;
Normativeness and readability: Similar to a strongly typed language, with reasonable type definitions, interface definitions, etc., the standardization and readability of the code implementation are greatly improved. Otherwise, where to call the entire project, how to define it, etc. I personally think the most valuable point is: before writing code, I will first conceive the overall code structure of functional requirements.

2. Vue+TpyeScript project migration

Download the dependency package

npm install --save-dev typescript webpack webpack-cli ts-loader css-loader vue vue-loader vue-template-compiler

2. Create

Order:

tsc --init

{
    "compilerOptions": {
        "outDir": "./built/",
        "sourceMap": true,
        "strict": true,
        "module": "es2015",
        "moduleResolution": "node",
        "target": "es5",
        "skipLibCheck": true,
        "esModuleInterop": true,
        "experimentalDecorators": true
    },
    "include": [
        "./src/**/*"
    ]
}

Configuration in

resolve: {
      extensions: ['.js', '.vue', '.json', 'ts', 'tsx'], // Added 'ts', 'tsx'      alias: {
        'vue$': 'vue/dist/',
        '@': resolve('src'),
      }
    },
    module: {
      rules: [
        {
          test: /\.ts$/,  // Used to load ts files in the project          exclude: /node_modules/,
          enforce: 'pre',
          loader: 'tslint-loader'
        },
        {
          test: /\.tsx?$/, // Used to load tsx files in the project          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
          }
        }]

4. Configuration

"scripts": {
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },

5. Rename

Rename it to
Modify the file name of the entry in entry: {app: './src/'}

6. Add in the same level directory (if you don't use the tsx syntax) and

 // in vue/cli  // Function: The global namespace for JSX syntax  // This is because the value-based element will simply search by identifier in its scope  // Here is the method of stateless function component definition. When jsx syntax support is enabled in tsconfig, it will automatically recognize the corresponding .tsx-end file  import Vue, { VNode } from 'vue'
  declare global {
    namespace JSX {
      // tslint:disable no-empty-interface
      interface Element extends VNode {}
      // tslint:disable no-empty-interface
      interface ElementClass extends Vue {}
      interface IntrinsicElements {
        [elem: string]: any
      }
    }
  }

  // in vue/cli  // Function: Make module declarations for all vue files in the project. After all, ts only recognizes files with suffixes with ., .ts, and .tsx by default.  import Vue from "vue";
  import VueRouter, { Route } from "vue-router";

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

  declare module "vue/types/vue" {
    interface Vue {
      $router: VueRouter; // This means there is this thing under this      $route: Route;
      $https: any;
      $urls: any;
      $Message: any;
      $Modal: any;
    }
  }

7. Reform the .vue file and switch script in vue to <script lang="ts">;

8. Reform .js files, modify them to ts syntax, define types, etc.

Summarize

This is the article about how to use TypeScript related configuration in vue project. For more related configuration content related to using TS in vue, please search for my previous articles or continue browsing the following related articles. I hope everyone will support me in the future!