uniappx uts自学(2024/10/14)

ops/2024/10/22 0:45:44/

uts需要类型

uts声明变量 let 或 const
let相当于 TypeScript 中的 let、kotlin 中的 var、swift 中的 var。
cosnt相当于 TypeScript 中的 const、kotlin 中的 val、swift 中的 let。

let [变量名] : [类型] = 值;

let str :string = "hello"; // 声明一个字符串变量
str = "hello world"; // 重新赋值
UTS 的类型有:
  • 基础类型:boolean、number、string、any、null,都是小写。前3个typeof返回类型名称,null的typeof是object,any的typeof是运行时值的类型。
  • 对象类型:Date、Array、Map、Set、UTSJSONObject,首字母大写。typeof返回"object",判断准确类型需使用 instanceof
  • 使用 type 来自定义类型
  • 特殊类型:function、class、error。
  • 平台专有类型:BigInt、Int、Float、Double、NSString、kotlin.Array...
方法参数及返回值类型定义
function test(score: number): boolean {return (score>=60)
}
test(61) // 返回true
//无返回值得时候
function add(x :string, y :string) :void {let z :string = x + " " + yconsole.log(z)// 不需要return
}
vue data类型定义
<script lang="uts">export default {data() {const date = new Date()return {s1 : "abc", // 根据字面量推导为stringn1 : 0 as number, // 这里其实可以根据字面量自动推导,as number写不写都行n2, // 不合法,必须指定类型n3 as number, // 不合法,uts不支持undefined,必须通过冒号初始化赋值,哪怕赋值为null,见下n4 : null as number | null // 合法。定义为可为null的数字,初始值是null,但在使用n4前必须为其赋值数字。(number | null)是一个或的写法,前后顺序没有关系。uts的联合类型只支持 |null 。year: date.getFullYear() as number, // 在data里,目前无法通过变量类型推导data项的类型,需使用 as 显式声明类型为number}}}
</script>
类型判断
判断类型,有好几种方案:typeof、instanceof、isArray。
typeof(true) == "boolean"
typeof("abc") == "string"let n1 : number = 1
typeof(n1) == "number"const a1 = ["uni-app", "uniCloud", "HBuilder"]
console.log(Array.isArray(a1)) // 返回true
console.log(a1 instanceof Array) // 返回truelet myDate = new Date();
console.log(myDate instanceof Date) // 返回trueuni.request({url: 'https://abc',success: (data) => {if (data.statusCode == 200) {const result = data.data as UTSJSONObjectconsole.log(result instanceof UTSJSONObject) //返回true}},fail: () => {console.log('fail');}
});

安全调用 js没有类型检查,ust和ts都有严格的类型检查

//对于可为null的类型,调用时需要加问号,否则编译器会报错。
const s: string | null = null // s为一个可为null的字符串
console.log(s?.length) //除非前面已经给s赋值,否则调用s的方法和属性必须加?
除了变量,类型的属性也可以为null。此时可以和变量一样使用 | null,还可以用?:来代表可选
type obj = {id : number,name : string,age : number | null,sex ?: boolean
}
1. 代码中判空后再使用
if (b != null) {console.log(b.length) //返回3
}
2. 不判空,使用?.进行安全调用
const a = "uts"
const b: string | null = null
console.log(a.length) // a是明确的string类型,它的属性可以直接调用,无需安全调用
console.log(b?.length) // b可能为null,null没有length属性,在没有判空时,.操作符前面必须加?标记
空值合并
//空值合并运算符(??)是一个逻辑运算符,当左侧的操作数为 null 时,返回其右侧操作数,否则返回左侧操作数。
const foo = null ?? 'default string';
console.log(foo);
// Expected output: "default string"const baz = 0 ?? 42;
console.log(baz);
// Expected output: 0
非空断言
非空断言运算符(!)将任何值转换为非空类型。可以写 b! ,这会返回一个非空的 b 值(例如:在我们示例中的 string)或者如果 b 为 null,就会抛出一个异常。
//
const l = b!.length

vue data中null的用法

//很多时候,data的数据需要通过script获取,而 uts 编译为非js时不支持 undefined,初始化时就只能赋null。一旦定义可为null后,调用时就需要用?.操作可选属性。
<script lang=uts>type PersonType = {id: number,name: string,age: number}export default {data() {return {person: null as PersonType | null,}},onLoad() {this.person = JSON.parse<PersonType>(`{"id": 1,"name": "zhangsan","age": 18}`)console.log(this.person?.name);}}
</script>

非常重要-数组(Array)

jsswift的Array,是可变长的泛型Array。

而在kotlin中,其自带的Array是不可变长的,即数组的length是固定的。只有ArrayList是可变长的。

为了拉齐实现,UTS补充了新的Array,替代kotlin的Array。它继承自kotlin的ArrayList,所以可以变长。

定义数组

  1. 字面量创建
let a1 = [1,2,3];//支持
let a2 = [1,'2',3];//支持// 需要注意的是,字面量创建的数组,不支持出现空的缺省元素
let a3 = [1,,2,3];//不支持
如果想定义一个空数组,则不能依赖编译器的自动推导,需显式声明空数组的类型。见下
2.使用:Array<>定义数组项的类型
const a1:Array<string> = ["uni-app", "uniCloud", "HBuilder"] //表示数组内容都是string。如不能确定可以写Array<any>
let a2:Array<number> = []; //定义一个数字类型的空数组
 3.使用[]定义数组项的类型
const a1: string[] = ['a', 'b', 'c']; //表示数组内容都是string
4.创建数组对象
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']
5 uvue的data定义数组
export default {data() {return {listdata: [] as Array<UTSJSONObject>,}}
}

字面量创建的数组,在uts的老版本上,kotlin自动推导数组类型时,可能会推导成intArray,而不是uts的array。建议显式声明类型。

typeof 一个 array 得到的是 object。需使用 Array.isArray 或 instanceof 来判断数组类型。

let a1 = [1,2,3]
console.log(Array.isArray(a1)) // 返回true
console.log(a1 instanceof Array) // 返回true

遍历数组对象

const array1: string[] = ['a', 'b', 'c'];
array1.forEach((element:string, index:number) => {console.log(element)console.log(array1[index]) //与上一行代码等价
});
// 打印结果是 a a b b c c

平台专有数组类型

#kotlin专有数组类型
  • 专有数组类型清单

    • kotlin.collections.List
    • kotlin.Array
    • kotlin.IntArray
    • kotlin.FloatArray
    • kotlin.ByteArray
    • kotlin.LongArray
    • kotlin.CharArray
    • ...
  • 专有数组类型定义方式

// kotlin.collections.List
let kotlinList= mutableListOf("hello","world")
// kotlin.Array
let kotlinArray = arrayOf("hello","world")
  • 专有数组类型 转 Array
// kotlin.collections.List 转换 Arraylet kotlinList = mutableListOf("hello","world")let utsArr1 = Array.fromNative(kotlinList)// kotlin.Array 转换 Arraylet kotlinArray = arrayOf("hello","world")let utsArr2 = Array.fromNative(kotlinArray)//ByteArray 即 java 中的 byte[]   需要HBuilderX 3.9.0 之后版本let b1 = byteArrayOf(-1,2,0,3,4,5)let c1 = Array.fromNative(b1)//LongArray 即 java 中的 long[]  需要HBuilderX 3.9.0 之后版本let b2 = longArrayOf(-1,2,0,3,4,5)let c2 = Array.fromNative(b2)//ShortArray 即 java 中的 short[] 需要HBuilderX 3.9.0 之后版本let b3 = shortArrayOf(-1,2,0,3,4,5)let c3 = Array.fromNative(b3)//IntArray 即 java 中的 int[]let b4 = intArrayOf(-1,2,0,3,4,5)let c4 = Array.fromNative(b4)// kotlin.CharArray 即 java 中的 char[]let b5 = charArrayOf(Char(66),Char(66),Char(81))let c5 = Array.fromNative(b5)

下一节为

  • Array 转 专有数组类型

http://www.ppmy.cn/ops/127423.html

相关文章

【MySQL】事务

目录 事务的概念 CURD不加控制会导致什么问题 什么是事务 为什么需要事务 事务的操作 事务的版本支持 事务的提交方式 事务常见操作方式 事务的隔离级别 如何理解隔离性 四个隔离级别 查看与设置隔离级别 隔离级别的使用 进一步探究读写隔离 了解MVCC 事务的概念…

从0到1构建webpack多页面多环境应用

Webpack凭借强大的功能&#xff0c;成为最流行和最活跃的打包工具&#xff0c;也是面试时高级程序员必须掌握的“软技能”&#xff1b;笔者结合在项目中的使用经验&#xff0c;介绍webpack的使用&#xff1b;本文是入门篇&#xff0c;主要介绍webpack的入口、输出和各种loader、…

vue后台管理系统从0到1(5)

文章目录 vue后台管理系统从0到1&#xff08;5&#xff09;完善侧边栏修改bug渲染header导航栏 vue后台管理系统从0到1&#xff08;5&#xff09; 接上一期&#xff0c;我们需要完善我们的侧边狼 完善侧边栏 我们在 element 组件中可以看见&#xff0c;这一个侧边栏是符合我们…

element-ui table 前端分页

直接上代码吧。 <el-tableref"customerListTable"border:data"dataSource2"v-loading"loading":row-style"{ height: 55px }"header-cell-class-name"table-header"row-class-name"table-row"style"widt…

架构设计笔记-17-通信系统架构设计理论及实践

目录 知识要点 案例分析 1.数据中心架构的技术 论文 1.论网络安全体系设计 知识要点 开放系统的存储方式主要有&#xff1a; 1. 直连式存储&#xff08;Direct-Attached Storage&#xff0c;DAS&#xff09;&#xff1a;在服务器上外挂一组大容量硬盘&#xff0c;存储设…

Spring Boot 核心理解-嵌入式服务器

在 Spring Boot 中&#xff0c;嵌入式服务器&#xff08;如 Tomcat、Jetty 等&#xff09;是应用的一个重要特性。它允许 Spring Boot 应用以自包含的方式运行&#xff0c;而无需依赖外部的应用服务器。了解嵌入式服务器的原理、如何定制它们&#xff0c;以及在需要时如何替换服…

在 ASP.NET Core 6/NET 8.0 如何添加 Startup.cs

目录 如何添加Startup.cs文件 我们还能做什么&#xff1f; 我的项目做法参考 如何添加Startup.cs文件 使用 ASP.NET Core 6.0项目&#xff0c;您将找不到Startup.cs文件。默认情况下&#xff0c;此文件将被删除&#xff0c;并且是将注册依赖项和中间件放到了Program.cs中。但…

Element Ui el-table列表中的tooltip内容过长超出屏幕换行显示

elementui-table组件列表中的tooltip内容过长超出屏幕换行显示内容,虽然el-table列属性中带的有show-overflow-tooltip&#xff0c;可以设置内容超出列宽度显示为…&#xff0c;且有tooltip提示全部内容&#xff0c;但是内容过多时&#xff0c;提示会超出屏幕&#xff1a; 只有…