都是散记一些坑和注意点,建议先过一遍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:表示这个函数没有返回值,即触发事件后不会有返回值给调用者。