发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

Vue-cli3中使用TS语法示例代码

一朵倔强的向日葵

5

主题

5

帖子

15

积分

新手上路

Rank: 1

积分
15
显示全部楼层
ts有什么用？
  1. 类型检查、直接编译到原生js、引入新的语法糖
复制代码
为什么用ts？
  1. TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。
复制代码
  1. typescript不仅可以约束我们的编码习惯，还能起到注释的作用，当我们看到一函数后我们立马就能知道这个函数的用法，需要传什么值，返回值是什么类型一目了然，对大型项目的维护性有很大的提升。也不至于使开发者搬起石头砸自己的脚。
复制代码
1、引入Typescript包
  1. npm install vue-class-component vue-property-decorator --save
  2. npm install ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev
复制代码

    1. vue-class-component
    复制代码
    ：扩展vue支持typescript，将原有的vue语法通过声明的方式来支持ts
    1. vue-property-decorator
    复制代码
    ：基于vue-class-component扩展更多装饰器
    1. ts-loader
    复制代码
    ：让webpack能够识别ts文件
    1. tslint-loader
    复制代码
    ：tslint用来约束文件编码
    1. tslint-config-standard
    复制代码
    ： tslint 配置 standard风格的约束

2、配置

webpack配置
根据项目的不同配置的地方不同，如果是
  1. vue cli 3.0
复制代码
创建的项目需要在vue.config.js中配置，如果是3.0以下版本的话，需要webpack.base.conf中配置。(以下说明是在webpack.base.conf文件中更改)
2.1 在webpack.base.conf文件中更改
2.1.1. 在resolve.extensions中增加.ts，目的是在代码中引入ts文件不用写.ts后缀
  1.   resolve: {
  2.     extensions: ['.js', '.vue', '.json', '.ts'],
  3.     alias: {}
  4.   }
复制代码
2.2.2. 在module.rules中增加ts的rules
  1. module: {
  2.     rules: [
  3.       {
  4.         test: /\.ts$/,
  5.         exclude: /node_modules/,
  6.         enforce: 'pre',
  7.         loader: 'tslint-loader'
  8.       },
  9.       {
  10.         test: /\.tsx?$/,
  11.         loader: 'ts-loader',
  12.         exclude: /node_modules/,
  13.         options: {
  14.           appendTsSuffixTo: [/\.vue$/]
  15.         }
  16.       }
  17.     ]
  18.   }
复制代码
2.2.3. tsconfig.json配置
ts-loader会检索文件中的tsconfig.json.以其中的规则来解析ts文件，详细的配置可以参考https://www.tslang.cn/docs/handbook/tsconfig-json.html
我项目的tsconfig.json文件
  1. {
  2.   // 编译选项
  3.   "compilerOptions": {
  4.     // 输出目录
  5.     "outDir": "./output",
  6.     // 是否包含可以用于 debug 的 sourceMap
  7.     "sourceMap": true,
  8.     // 以严格模式解析
  9.     "strict": false,
  10.     // 采用的模块系统
  11.     "module": "esnext",
  12.     // 如何处理模块
  13.     "moduleResolution": "node",
  14.     // 编译输出目标 ES 版本
  15.     "target": "es5",
  16.     // 允许从没有设置默认导出的模块中默认导入
  17.     "allowSyntheticDefaultImports": true,
  18.     // 将每个文件作为单独的模块
  19.     "isolatedModules": false,
  20.     // 启用装饰器
  21.     "experimentalDecorators": true,
  22.     // 启用设计类型元数据（用于反射）
  23.     "emitDecoratorMetadata": true,
  24.     // 在表达式和声明上有隐含的any类型时报错
  25.     "noImplicitAny": false,
  26.     // 不是函数的所有返回路径都有返回值时报错。
  27.     "noImplicitReturns": true,
  28.     // 从 tslib 导入外部帮助库: 比如__extends，__rest等
  29.     "importHelpers": true,
  30.     // 编译过程中打印文件名
  31.     "listFiles": true,
  32.     // 移除注释
  33.     "removeComments": true,
  34.     "suppressImplicitAnyIndexErrors": true,
  35.     // 允许编译javascript文件
  36.     "allowJs": true,
  37.     // 解析非相对模块名的基准目录
  38.     "baseUrl": "./",
  39.     // 指定特殊模块的路径
  40.     "paths": {
  41.       "jquery": [
  42.         "node_modules/jquery/dist/jquery"
  43.       ]
  44.     },
  45.     // 编译过程中需要引入的库文件的列表
  46.     "lib": [
  47.       "dom",
  48.       "es2015",
  49.       "es2015.promise"
  50.     ]
  51.   }
  52. }
复制代码
2.2.4. tslint.json配置
在目录中新增tslint.json文件，由于我们前面安装了tslint-config-standard，所以可以直接用tslint-config-standard中规则，文件如下:
  1.   {
  2.     "extends": "tslint-config-standard",
  3.     "globals": {
  4.       "require": true
  5.     }
  6.   }
复制代码
2.2 在vue.config.js文件中更改以下代码即可
  1. configureWebpack: {
  2.   resolve: {
  3.     extensions: [".ts", ".tsx", ".js", ".json"],  
  4.      alias: {}
  5.   },
  6.   module: {        
  7.     rules: [   
  8.       {   
  9.         test: /\.tsx?$/,   
  10.         loader: 'ts-loader',   
  11.         exclude: /node_modules/,   
  12.         options: {
  13.           appendTsSuffixTo: [/\.vue$/],   
  14.         }   
  15.       }        
  16.     ]   
  17.   }   
  18. },
复制代码
3、让项目识别.ts

由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在根目录下
  1. declare module '*.vue' {
  2.   import Vue from 'vue';
  3.   export default Vue;
  4. }
复制代码
4、vue组件的编写

vue组件里大多数的方法改成通过@xxx（装饰器）来表明当前定义的为什么数据。业务逻辑js的部分就可以直接采用ts的写法了。
基本写法
模板
  1. template
复制代码
和样式
  1. style
复制代码
的写法不变，
  1. script
复制代码
的模块进行了改变，写法如下：
  1. <script lang="ts">
  2. import { Component, Vue } from "vue-property-decorator";
  3. @Component
  4. export default class Test extends Vue {

  6. };
  7. </script>
复制代码

    1. lang="ts"
    复制代码
    ：
    1. script
    复制代码
    声明当前语言是
    1. ts
    复制代码
    1. @Component
    复制代码
    ：注明此类为一个vue组件
    1. export default class Test extends Vue
    复制代码
    ： export当前组件类是继承vue的
data()中定义数据
data中的数据由原来的
  1. data()
复制代码
方法改成直接在对象中定义
  1. export default class Test extends Vue {
  2. public message1: string = "heimayu";
  3. public message2: string = "真好看";
  4. }
复制代码
生命周期
  1. // 生命周期
  2.     private created(){
  3.         this.init();
  4.     }
复制代码
方法
  1. private init(){
  2.     console.log('halo');
  3. }
复制代码
props传值
props的话就没有data那么舒服了，因为他需要使用装饰器了，写法如下
  1. @Prop()
  2. propA:string

  4. @Prop()
  5. propB:number
复制代码
$emit传值
不带参数
  1.   // 原来写法：this.$emit('bindSend')
  2.   // 现在直接写 this.bindSend()
  3.   // 多个定义
  4.   @Emit()
  5.   bindSend():string{
  6.       return this.message
  7.   }
复制代码
方法带参数
  1.   // 原来写法：this.$emit('bindSend', msg)
  2.   // 现在直接写： this.bindSend(msg)
  3.   // 多个下面的定义
  4.   @Emit()
  5.   bindSend(msg:string){
  6.       // to do something
  7.   }
复制代码
emit带参数
  1.   // 这里的test是改变组件引用的@事件名称这时候要写@test 而不是@bindSend2
  2.    @Emit('test')
  3.   private bindSend2(){
  4.       return '这个可以用test接受';
  5.   }
复制代码
watch观察数据
  1.   // 原来的写法 watch:{}
  2.   @Watch('propA',{
  3.       deep:true
  4.   })
  5.   test(newValue:string,oldValue:string){
  6.       console.log('propA值改变了' + newValue);
  7.   }
复制代码
computed计算属性
  1. public get computedMsg(){
  2.       return '这里是计算属性' + this.message;
  3. }
  4. public set computedMsg(message:string){
  5. }
复制代码
完整代码案例
  1. <template>
  2.   <div class="test-container">
  3.     {{message}}
  4.     <input type="button" value="点击触发父级方法" @click="bindSend"/>
  5.     <input type="button" value="点击触发父级方法" @click="handleSend"/>
  6.     <input type="button" value="点击触发父级方法" @click="bindSend2"/>
  7.     <!-- <Hello></Hello> -->
  8.   </div>
  9. </template>
  10. <script lang="ts">
  11. import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
  12. import Hello from "./HelloWorld.vue";
  13. // 注明此类为一个vue组件
  14. @Component({
  15.   components: {
  16.     Hello
  17.   }
  18. })
  19. export default class Test extends Vue {
  20.   // 原有data中的数据在这里展开编写
  21. public message: string = "asd";
  22.   //原有props中的数据展开编写
  23.   @Prop({
  24.     type: Number,
  25.     default: 1,
  26.     required: false
  27.   })
  28.   propA?: number
  29.   @Prop()
  30.   propB:string
  31.   //原有computed
  32.   public get computedMsg(){
  33.       return '这里是计算属性' + this.message;
  34.   }
  35.   public set computedMsg(message:string){
  36.   }
  37.   //原有的watch属性
  38.   @Watch('propA',{
  39.       deep:true
  40.   })
  41.   public test(newValue:string,oldValue:string){
  42.       console.log('propA值改变了' + newValue);
  43.   }
  44.   // 以前需要给父级传值的时候直接方法中使用emit就行了，当前需要通过emit来处理
  45.   @Emit()
  46.   private bindSend():string{
  47.       return this.message
  48.   }
  49.   @Emit()
  50.   private bindSend1(msg:string,love:string){
  51.       // 如果不处理可以不写下面的，会自动将参数回传
  52.     //   msg += 'love';
  53.     //   return msg;
  54.   }
  55.   //原有放在methods中的方法平铺出来
  56.   public handleSend():void {
  57.       this.bindSend1(this.message,'love');
  58.   }
  59.   // 这里的emit中的参数是表明父级通过什么接受，类似以前的$emit('父级定义的方法')
  60.   @Emit('test')
  61.   private bindSend2(){
  62.       return '这个可以用test接受';
  63.   }
  64. }
  65. </script>
复制代码
到此这篇关于Vue-cli3中使用TS语法示例代码的文章就介绍到这了,更多相关Vue-cli3使用TS语法内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/article/276271.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

上一篇: Vue2 中的数据劫持简写示例

下一篇: Vue 事件处理函数的绑定示例详解

发表于 2023-2-25 16:36:43

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4