使用TypeScript开发Uni-App项目

红太狼 2021-07-26 16:07 629阅读 0赞

### 使用TypeScript开发Uni-App项目 ###

*  使用TypeScript开发Uni-App项目
 *   *  通过HbuiderX创建uni-app项目
     *  常见装饰器的使用
     *  简单的Demo页面
     *  几个注意问题

# 使用TypeScript开发Uni-App项目 #

## 通过HbuiderX创建uni-app项目 ##

在新项目的vue文件中使用内联ts

按需引入vue装饰器

import {  Component,Vue ,Watch} from "vue-property-decorator";

不管干啥先把下面这句话加上。

@Component({ })  //必须

## 常见装饰器的使用 ##

export default class Idnex extends Vue{ 
    		private　title:String  = 'myTitle'; //响应式属性
    		private num:Number = 123;           //对标之前的data函数返回的对象
    		get age():Number{                    //计算属性
    			return this.num;
    		}
    		onLoad(){ 
    			this.printTitle();
    			let a:string = '123'; 
    		}
    		@Watch('title')                    //watch，此处是监听title的变化
    		titleChange(newVal:Number,oldVal:Number){ 
    			console.log(newVal,oldVal);
    		}
    		printTitle():void{                 //methods
    			console.log('hahahhhaha')
    		}
    		
    	}

## 简单的Demo页面 ##

<template>
    	<view class="content" @click.self="printTitle">
    		<image class="logo" src="/static/logo.png" @click.stop="title = 'ggg'"></image>
    		<view class="text-area">
    			<text class="title">{ { title}}</text>
    			<view>{ { age}}</view>
    		</view>
    	</view>
    </template>
    
    <script lang="ts">
    	import {  Component,Vue ,Watch} from "vue-property-decorator";
    	@Component({ })
    	export default class Idnex extends Vue{ 
    		private　title:String  = 'myTitle'; //响应式属性
    		private num:Number = 123;           //对标之前的data函数返回的对象
    		get age():Number{                    //计算属性
    			return this.num;
    		}
    		onLoad(){ 
    			this.printTitle();
    			let a:string = '123'; 
    		}
    		@Watch('title')                    //watch，此处是监听title的变化
    		titleChange(newVal:Number,oldVal:Number){ 
    			console.log(newVal,oldVal);
    		}
    		printTitle():void{                 //methods
    			console.log('hahahhhaha')
    		}
    		
    	}
    </script>
    
    <style>
    	.content { 
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	.logo { 
    		height: 200rpx;
    		width: 200rpx;
    		margin-top: 200rpx;
    		margin-left: auto;
    		margin-right: auto;
    		margin-bottom: 50rpx;
    	}
    
    	.text-area { 
    		display: flex;
    		justify-content: center;
    	}
    
    	.title { 
    		font-size: 36rpx;
    		color: #8f8f94;
    	}
    </style>

## 几个注意问题 ##

1.  首先要在Hbuiderx里安装有关typeScript的几个插件，具体就两个一次性都装上。
2.  如果是直接在HbuiderX里面开发编辑无需再额外安装Vue,vue-property-decorator等
3.  如果是通过VSCode等编辑器则需要额外安装vue-property-decorator和vue-class-decorator
4.  @Component(\{\})是必须要的，如果缺失在H5 端不会产生什么问题但是如果编译为微信小程序则会报错’mp-weixin’未定义，其它端未做验证。
5.  看了一些介绍和Demo也可以通过vue-cli和uni-app结合的方式使用ts开发uni-app项目。有兴趣的可以去捣鼓捣鼓。