本篇内容主要讲解“vue项目中如何使用typescript”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue项目中如何使用typescript”吧!
npm install vue-class-component vue-property-decorator --save npm install ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev
vue-class-component
:扩展vue支持typescript,将原有的vue语法通过声明的方式来支持ts
vue-property-decorator
:基于vue-class-component扩展更多装饰器
ts-loader
:让webpack能够识别ts文件
tslint-loader
:tslint用来约束文件编码
tslint-config-standard
: tslint 配置 standard风格的约束
根据项目的不同配置的地方不同,如果是vue cli 3.0创建的项目需要在vue.config.js中配置,如果是3.0以下版本的话,需要webpack.base.conf中配置。(以下说明是在webpack.base.conf文件中更改)
在resolve.extensions中增加.ts,目的是在代码中引入ts文件不用写.ts后缀
resolve: { extensions: ['.js', '.vue', '.json', '.ts'], alias: {} }
在module.rules中增加ts的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配置
ts-loader会检索文件中的tsconfig.json.以其中的规则来解析ts文件,详细的配置可以参考https://www.tslang.cn/docs/handbook/tsconfig-json.html
贴上测试项目tsconfig.json文件
{ // 编译选项 "compilerOptions": { // 输出目录 "outDir": "./output", // 是否包含可以用于 debug 的 sourceMap "sourceMap": true, // 以严格模式解析 "strict": false, // 采用的模块系统 "module": "esnext", // 如何处理模块 "moduleResolution": "node", // 编译输出目标 ES 版本 "target": "es5", // 允许从没有设置默认导出的模块中默认导入 "allowSyntheticDefaultImports": true, // 将每个文件作为单独的模块 "isolatedModules": false, // 启用装饰器 "experimentalDecorators": true, // 启用设计类型元数据(用于反射) "emitDecoratorMetadata": true, // 在表达式和声明上有隐含的any类型时报错 "noImplicitAny": false, // 不是函数的所有返回路径都有返回值时报错。 "noImplicitReturns": true, // 从 tslib 导入外部帮助库: 比如__extends,__rest等 "importHelpers": true, // 编译过程中打印文件名 "listFiles": true, // 移除注释 "removeComments": true, "suppressImplicitAnyIndexErrors": true, // 允许编译javascript文件 "allowJs": true, // 解析非相对模块名的基准目录 "baseUrl": "./", // 指定特殊模块的路径 "paths": { "jquery": [ "node_modules/jquery/dist/jquery" ] }, // 编译过程中需要引入的库文件的列表 "lib": [ "dom", "es2015", "es2015.promise" ] } }
tslint.json配置
在目录中新增tslint.json文件,由于我们前面安装了tslint-config-standard,所以可以直接用tslint-config-standard中规则,文件如下:
{ "extends": "tslint-config-standard", "globals": { "require": true } }
由于 TypeScript 默认并不支持 *.vue 后缀的文件,所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件,放在根目录下
declare module '*.vue' { import Vue from 'vue'; export default Vue; }
vue组件里大多数的方法改成通过@xxx(装饰器)来表明当前定义的为什么数据,类似ng中的注入。而业务逻辑js的部分就可以直接采用ts的写法了。
基本写法
模板template
和样式style
的写法不变,script
的模块进行了改变,基本写法如下:
<script lang="ts"> import { Component, Vue } from "vue-property-decorator"; @Component export default class Test extends Vue { }; </script>
lang="ts"
:script
张声明下当前的语言是ts
@Component
:注明此类为一个vue组件
export default class Test extends Vue
: export当前组件类是继承vue的
data中的数据由原来的data()
方法改成直接在对象中定义
export default class Test extends Vue { public message1: string = "heimayu"; public message2: string = "真好看"; }
props的话就没有data那么舒服了,因为他需要使用装饰器了,写法如下
@Prop() propA:string @Prop() propB:number
$emit传值
不带参数
// 原来写法:this.$emit('bindSend') // 现在直接写 this.bindSend() // 多个定义 @Emit() bindSend():string{ return this.message }
方法带参数
// 原来写法:this.$emit('bindSend', msg) // 现在直接写: this.bindSend(msg) // 多个下面的定义 @Emit() bindSend(msg:string){ // to do something }
emit带参数
// 这里的test是改变组件引用的@事件名称这时候要写@test 而不是@bindSend2 @Emit('test) private bindSend2(){ }
watch观察数据
// 原来的写法 watch:{} @Watch('propA',{ deep:true }) test(newValue:string,oldValue:string){ console.log('propA值改变了' + newValue); }
computed计算属性
public get computedMsg(){ return '这里是计算属性' + this.message; } public set computedMsg(message:string){ }
<template> <div class="test-container"> {{message}} <input type="button" value="点击触发父级方法" @click="bindSend"/> <input type="button" value="点击触发父级方法" @click="handleSend"/> <input type="button" value="点击触发父级方法" @click="bindSend2"/> <!-- <Hello></Hello> --> </div> </template> <script lang="ts"> import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator"; import Hello from "./HelloWorld.vue"; // 注明此类为一个vue组件 @Component({ components: { Hello } }) export default class Test extends Vue { // 原有data中的数据在这里展开编写 public message: string = "asd"; //原有props中的数据展开编写 @Prop({ type: Number, default: 1, required: false }) propA?: number @Prop() propB:string //原有computed public get computedMsg(){ return '这里是计算属性' + this.message; } public set computedMsg(message:string){ } //原有的watch属性 @Watch('propA',{ deep:true }) public test(newValue:string,oldValue:string){ console.log('propA值改变了' + newValue); } // 以前需要给父级传值的时候直接方法中使用emit就行了,当前需要通过emit来处理 @Emit() private bindSend():string{ return this.message } @Emit() private bindSend1(msg:string,love:string){ // 如果不处理可以不写下面的,会自动将参数回传 // msg += 'love'; // return msg; } //原有放在methods中的方法平铺出来 public handleSend():void { this.bindSend1(this.message,'love'); } // 这里的emit中的参数是表明父级通过什么接受,类似以前的$emit('父级定义的方法') @Emit('test') private bindSend2(){ return '这个可以用test接受'; } } </script>
到此,相信大家对“vue项目中如何使用typescript”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。