使用TypeScript开发Uni-App项目

使用TypeScript开发Uni-App项目

通过HbuiderX创建uni-app项目

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

<script lang="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项目。有兴趣的可以去捣鼓捣鼓。