uniappx+utx学习

都是散记一些坑和注意点,建议先过一遍ts再来看这个容易理解

定义类型的方式:

let a:string|null =5
if(a!=null)

const datas: Date = new Date()

map类型:

const map1:Map = new Map()
map1.set(‘key1′,’abc’)

普通定义对象


type ops = {
count: number
result:string

}

const datt = JSON.parse(‘{“result”:’呜呜呜’,”count”:42}’) as ops

// JSON.parse转换后的对象是没有类型的,直接用报错,要用as类型断言去定义他的类型

datt.count // 调用方法,推荐使用 datt[‘count’],注意这里哪怕你只需要count但是result的值你还要定义

你可能注意到,上面定义对象都要先定义一个type,很是麻烦,所以出来了UTSJSONObject类型

UTSJSONObject类型

const datt = JSON.parse(‘{“result”:’呜呜呜’,”count”:42}’) as UTSJSONObject

获取值用getXXXX方法来,如:getBoolean(‘属性名’)

const oll = datt.getString(‘result’)
const oll2 = datt.getNumber(‘count’)

// 上面含义是获取 某某 值,同时声明为 某某 类型

类型转换

都是用toXXX方法来转换,如:toInt()

let a:number = 3

a.toInt() // 转换为 Int 类型。注意和parseInt、Math.floor的区别。

a.toFloat() // 转换为 Float 类型,后续也将支持 new Float(a) 方式转换

a.toDouble() // 转换为 Double 类型,后续也将支持 new Double(a) 方式转换

// 转换为 Byte 类型,超出-128至+127会溢出,结果为:-31

let b = (225 as Number).toByte()

//平台专有类型之间,也可以使用to方法转换

let i:Int = 1 ;

i.toDouble() // 转换为 Double 类型

专有数字类型,转换为number,使用Number.from()方法

let a: Int = 1

let a1 = Number.from(a) // Int转number

let b: Float = 3.14.toFloat()

let b1 = Number.from(b)

let c: Double = 3.1414926

let c1 = Number.from(c)

let e: Long = 2147483649

let e1 = Number.from(e)

空值合并

空值合并运算符(??)是一个逻辑运算符,当左侧的操作数为 null 时,返回其右侧操作数,否则返回左侧操作数。

const foo = null ?? ‘default string’;

console.log(foo);

// Expected output: “default string”

const baz = 0 ?? 42;

console.log(baz);

// Expected output: 0

定义数组(注意)

方法1:

const a1: string[] = [‘a’, ‘b’, ‘c’]; //表示数组内容都是string

方法2:

const a1:Array<string> = [“uni-app”, “uniCloud”, “HBuilder”] //表示数组内容都是string。如不能确定可以写Array<any>

let a2:Array<number> = []; //定义一个数字类型的空数组

方法3:

let a1 = new Array(1,2,3);//支持

let a2 = new Array(1,’2′,3);//安卓平台支持, iOS 平台不支持,在 iOS 中创建 Any[] 数组请直接使用数组字面量,如 let a2 = [1. ‘2’, 3]

let a3 = Array(1,2,3);//支持

let a4 = Array(1,’2′,’3′);//安卓平台支持, iOS 平台不支持,在 iOS 中创建 Any[] 数组请直接使用数组字面量,如 let a4 = [1,’2′,’3′]

uvue的data定义数组

export default {
	data() {
		return {
			listdata: [] as Array<UTSJSONObject>,
		}
	}
}

一些写法参考:

let jo: UTSJSONObject[] = [{
	"x": 1,
	"y": 2
}] //正确,数组赋值给数组



let jo: Array<UTSJSONObject> = [{
	"x": 1,
	"y": 2
}] //正确,数组赋值给数组


let jo = [{
	"x": 1,
	"y": 2
}] //正确,自动推断为 UTSJSONObject 数组

下面是一些注意点,杂记:

官方将backgroundColor 改为 backgroundColorContent

如果编译器不知道你的类型,请手动as进行类型断言

泛型<T>,相当于一个占位替代

当你真用这个方法时再决定要传什么参数类型

(void标识表示没返回)

function ops<T>(arg: T):void{

Console.log(arg)

}

ops<number>(55)   // 注意 它也支持自动类型推断

ops(55)

//上面是一样的效果

泛型约束(限制泛型范围,用extends)

Function test<T extends Array<any>>(arg: T):T{

Return arg

}

Const oo = test([1,2,3])

list-item上不能用v-if(好像修复了)

uni.getStorageSync同步获取数据,会阻塞应用

uni.getStorage异步获取数据

uni.getStorage({
					key: key,
					success: (res: GetStorageSuccess) => {
					
						const list = JSON.parseArray<Item>(res.data as string)
						if (list != null) {
							this.list = list
						}
					}
				})

现在获取JSON.parseArray(res.data as string)这样就行 以前的写法是:JSON.parseArray<Item>(JSON.stringify(res.data))

定义带类型的 emits

const emits = defineEmits<{  (event: ‘reply’, obj: ReplyEmit): void}>()

const emits = defineEmits<{ (event: 'reply', obj: ReplyEmit): void }>();

function reply() {
  const data: ReplyEmit = { id: '123', message: 'Hello, World!' };
  emits('reply', data);
}
//下面是父组件
<MyComponent @reply="handleReply" />
methods: {
  handleReply(obj) {
    console.log(obj.id);       // '123'
    console.log(obj.message);  // 'Hello, World!'
  }
}
注意:
类型声明 { (event: 'reply', obj: ReplyEmit): void }
这里使用了 TypeScript 的函数类型定义,描述了这个组件可以触发的事件及其参数类型。

event: 'reply':指定该组件可以发射一个名为 'reply' 的事件。这个事件名称是字符串类型 'reply',表示在使用组件时,父组件可以监听 reply 事件。

obj: ReplyEmit:reply 事件的第二个参数是 obj,类型为 ReplyEmit。这意味着触发 reply 事件时,会传递一个类型为 ReplyEmit 的对象。这个对象类型 ReplyEmit 需要在你的代码中定义好,可以包含你需要传递的具体数据。

void:表示这个函数没有返回值,即触发事件后不会有返回值给调用者。

onLoad 必须有参数 没有的话会报错,还要放在script最下面,不然容易找不到某些方法

箭头函数必须有大括号