Vue and TypeScript integration configuration tutorial

This article mainly introduces the simplest tutorial (recommended) for the integration configuration of vue and TypeScript. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Preface

Vue’s official documentation does not give specific steps for integrating with TypeScript. Other tutorials on the Internet either have problems or are different from the projects created by vue-cli. , which makes people unable to start.

Below I will give the simplest configuration of integrating the project created by vue-cli with TypeScript.

Initialize the project

First use vue-cli to create the webpack project. For the convenience of demonstration, router and eslint are not opened here. You can open them according to your own situation.

# vue init webpack vue-typescript

? Project name vue-typescript
? Project description A Vue.js project
? Author
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

Install TypeScript related dependencies and other dependencies of the project, use npm or cnpm

# cd /vue-typescript
# npm install typescript ts-loader --save-dev
# npm install

Configuration

Modify the bulid/webpack.base.conf.js file in the directory and add the following rules to module>rules in the file

{
 test: /\.tsx?$/,
 loader: 'ts-loader',
 exclude: /node_modules/,
 options: {
  appendTsSuffixTo: [/\.vue$/],
 }
},

In the src directory Create a new file vue-shims.d.ts, which is used to identify the ts code in a single file vue

##

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

Create a TypeScript configuration file tsconfig.json in the project root directory

{
 "compilerOptions": {
  "strict": true,
  "module": "es2015",
  "moduleResolution": "node",
  "target": "es5",
  "allowSyntheticDefaultImports": true,
  "lib": [
   "es2017",
   "dom"
  ]
 }
}

Rename

main.js under src to main.ts

Modify

entry>app under webpack.base.conf.js is './src/main.ts'

Modify the App.vue file under src, in

<script lang="ts">

Test

You can test whether the integration is successful. Edit the src/components/Hello.vue file and modify

<script lang="ts">
 import Vue, {ComponentOptions} from 'vue'
 export default {
  name: 'hello',
  data() {
   return {
    msg: 'this is a typescript project now'
   }
  }
 } as ComponentOptions

Run the project

# npm run dev

The test was successful and it is now a TypeScipt project

Advanced

Configure the officially recommended vue-class-component, https://cn.vuejs.org/v2/guide/typescript.html

Installation Development dependencies

# npm install --save-dev vue-class-component

Modify the ts configuration file and add the following two configurations

"allowSyntheticDefaultImports": true,
"experimentalDecorators": true,

Rewrite our Hello component

<script lang="ts">
 import Vue from 'vue'
 import Component from 'vue-class-component'
 @Component
 export default class Hello extends Vue {
  msg: string = 'this is a typescript project now'  
 }

After using vue-class-component, the initial data can be directly declared as attributes of the instance without putting it in data() {return{}}, component method You can also directly declare it as an instance method, such as an official instance. For more usage methods, please refer to its official documentation

https://github.com/vuejs/vue-class-component#vue-class-component

import Vue from 'vue'
import Component from 'vue-class-component'
// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
 // 所有的组件选项都可以放在这里
 template: &#39;<button @click="onClick">Click!</button>&#39;
})
export default class MyComponent extends Vue {
 // 初始数据可以直接声明为实例的属性
 message: string = &#39;Hello!&#39;
 // 组件方法也可以直接声明为实例的方法
 onClick (): void {
  window.alert(this.message)
 }
}

Related recommendations:

Improvements in TypeScript in Vue 2.5

Introduction to JavaScript Sharing some tips on TypeScript with TypeScript’s declared types

The above is the detailed content of Vue and TypeScript integration configuration tutorial. For more information, please follow other related articles on the PHP Chinese website!