Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use typescript in the vue project". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Now let the editor take you to learn how to use typescript in vue projects.

1. Introduce Typescriptnpm install vue-class-component vue-property-decorator-- savenpm install ts-loader typescript tslint tslint-loader tslint-config-standard-- save-dev

Vue-class-component: extend vue to support typescript, and declare the original vue syntax to support ts

Vue-property-decorator: extending more decorators based on vue-class-component

Ts-loader: enable webpack to recognize ts files

Tslint-loader:tslint is used to constrain file encoding

Tslint-config-standard: tslint configuration standard style constraint

2. Configuration file webpack configuration

Depending on the configuration of the project, the project created by vue cli 3.0 needs to be configured in vue.config.js, and if it is below version 3.0, it needs to be configured in webpack.base.conf. (the following instructions are changed in the webpack.base.conf file)

Add .ts to resolve.extensions in order to introduce ts files into the code without having to write the .ts suffix.

Resolve: {extensions: ['.js', '.vue', '.json', '.ts'], alias: {}}

Add rules of ts to module.rules

Module: {rules: [{test: /\ .ts $/, exclude: / node_modules/, enforce: 'pre', loader:' tslint-loader'}, {test: /\ .tsx? $/, loader: 'ts-loader', exclude: / node_modules/ Options: {appendTsSuffixTo: [/\ .vue $/]}}]}

Tsconfig.json configuration

Ts-loader retrieves the tsconfig.json in the file. Parse the ts file according to the rules. For detailed configuration, please refer to https://www.tslang.cn/docs/handbook/tsconfig-json.html

Paste the test project tsconfig.json file

{/ / compilation option "compilerOptions": {/ / output directory "outDir": ". / output", / / whether it contains sourceMap "sourceMap": true that can be used for debug, / / parse "strict": false, / / the module system "module": "esnext", / / how to handle the module "moduleResolution": "node" in strict mode. / / compile and output target ES version "target": "es5", / / allow "allowSyntheticDefaultImports": true to be imported by default from modules that do not have default export set, / / use each file as a separate module "isolatedModules": false, / / enable decorator "experimentalDecorators": true, / / enable design type metadata (for reflection) "emitDecoratorMetadata": true / / implied any types in expressions and declarations Times error "noImplicitAny": false, / / not all return paths of a function have a return value error. "noImplicitReturns": true, / / Import external help libraries from tslib: such as _ _ extends _ _ rest et al. "importHelpers": true, / / print file name "listFiles": true, / / remove comments "removeComments": true, "suppressImplicitAnyIndexErrors": true, / / allow compilation of javascript files "allowJs": true, / / parse the reference directory "baseUrl": ". /" with non-relative module names / / specify the path of the special module "paths": {"jquery": ["node_modules/jquery/dist/jquery"]}, / / list of library files to be introduced during compilation "lib": ["dom", "es2015", "es2015.promise"]}}

Tslint.json configuration

Add the tslint.json file to the directory. Since we installed tslint-config-standard earlier, we can directly use the rules in tslint-config-standard, as shown below:

{"extends": "tslint-config-standard", "globals": {"require": true}} 3, let the project identify .ts

Since TypeScript does not support files with the * .vue suffix by default, when introduced in a vue project, you need to create a vue-shim.d.ts file and put it in the root directory

Declare module'* .vue'{import Vue from 'vue'; export default Vue;} 4, the programming of vue components

Most methods in vue components are changed to use @ xxx (decorator) to indicate why data is currently defined, similar to injection in ng. And the part of the business logic js can be written in ts directly.

Basic writing method

The writing method of template template and style style remains unchanged, but the module of script has been changed, which is basically written as follows:

Import {Component, Vue} from "vue-property-decorator"; @ Componentexport default class Test extends Vue {}

Lang= "ts": script Zhang declares that the current language is ts

@ Component: indicate that this class is a vue component

Export default class Test extends Vue: export's current component class inherits from vue

Define data in data ()

The data in data is changed from the original data () method to defined directly in the object.

Export default class Test extends Vue {public message1: string = "heimayu"; public message2: string = "really pretty";} props

Props is not as comfortable as data, because he needs to use a decorator, written as follows

@ Prop () propA:string@Prop () propB:number

$emit pass value

Without parameters

/ / originally written: this.$emit ('bindSend') / / now write this.bindSend () / / multiple definitions @ Emit () bindSend (): string {return this.message}

Method with parameters

/ / originally written: this.$emit ('bindSend', msg) / / now directly write: this.bindSend (msg) / / multiple definitions @ Emit () bindSend (msg:string) {/ / to do something}

Emit band parameters

/ / the test here is the @ event name that changes the component reference. Write @ test instead of @ bindSend2 @ Emit ('test) private bindSend2 () {}

Watch observation data

/ / the original watch: {} @ Watch ('propA', {deep:true}) test (newValue:string,oldValue:string) {console.log (' propa value changed'+ newValue);}

Computed calculation Properties

Public get computedMsg () {return 'here is the calculation attribute' + this.message;} public set computedMsg (message:string) {} complete code case {{message}} import {Component, Prop, Vue, Watch, Emit} from "vue-property-decorator"; import Hello from ". / HelloWorld.vue" / / indicate that this class is a vue component @ Component ({components: {Hello}}) export default class Test extends Vue {/ / data in the original data. Expand and write public message: string = "asd" here. / / write @ Prop ({type: Number, default: 1, required: false}) propA?: number @ Prop () propB:string / / original computed public get computedMsg () {return 'this is the calculation attribute' + this.message } public set computedMsg (message:string) {} / / original watch attribute @ Watch ('propA', {deep:true}) public test (newValue:string,oldValue:string) {console.log (' propa value changed'+ newValue) } / / in the past, when you need to pass a value to the parent, just use emit in the direct method. Now you need to use emit to process @ Emit () private bindSend (): string {return this.message} @ Emit () private bindSend1 (msg:string,love:string) {/ / if you don't have to write the following, the parameter will be automatically passed back / / msg + = 'love'; / / return msg } / / the original method placed in methods is tiled out public handleSend (): void {this.bindSend1 (this.message,'love');} / the parameter in the emit here is to indicate what the parent accepts, similar to the previous $emit ('parent defined method') @ Emit ('test') private bindSend2 () {return' which can be accepted with test' }} at this point, I believe you have a deeper understanding of "how to use typescript in vue projects". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.