HarmonyOS入门-ArkTS学习(一)

1. 什么是ArkTS语言

学习之前,我们先初步了解下什么是ArkTS

官方指南这样介绍:

ArkTS是TS的超集,ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力,再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。

起初看这个,“ArkTs是TS超集,且它配合ArkUI框架等共同构成UI开发主体。”简单的我会认为ArkTS+ArkUI就类似于Android中的Kotlin+Compose,一个是语言负责逻辑部分,一个是绘制UI的,是单独的两部分,但是实际发现并不是这样的。

因为它又介绍了一张图,如下所示,并介绍说这是ArkTS的基本组成,看到这我就懵了,按照Android的理解,这个不是类似Compose的UI框架绘制的页面么,转换为鸿蒙这边不是应该叫ArkUI吗,怎么说是ArkTS的基本组成,难道是他写错了?

请添加图片描述

但是打开一个项目后,发现并不是这样。这个Column位于ArkTS依赖包中的component文件夹内,而另一个api文件夹,包含的内容有类似Android的通知、Activity等这些东西。

image-20240327101629285

api文件夹展开如下

image-20240327101629285

官方将ArkTS的划分如下图所示

image-20240327101629285

综合上面的介绍,我们将这张图可以简单地画为下面这张,就很好理解了。

image-20240327101629285

那这样,我们对于ArkTS的学习就分为这几部分TypeScript+UI+(通知、媒体、动画、网络等)

2. ArkTS中的TypeScript

虽然我也没接触过前端,没接触过TypeScript,但是你学过Kotlin的话,会发现这两种语言还是挺像的。语言只是工具,大多数语言只是换了种说法或者单词,别因为害怕接触新的语言而停在了接触新事物的第一步。废话不多想,接下来我们学习点TypeScript基础知识,足够鸿蒙开发入门,高阶的可以日后学习。

注意: 虽然ArkTS是TypeScript的超集,但是出于性能考虑,TypeScript的部分内容ArkTS是不被支持的。

2.1 变量/基本数据类型

2.1.1 变量

Kotlin和TypeScript一样有类型推导机制

Kotlin

Kotlin声明变量用varvalvar声明的变量值可变,val声明的值不可变。

var a:Int= 1 	
a=2val b=1		//Kotlin可以推导出b为Int类型
b=2  ×

TypeScript

TypeScript声明变量用varletconstvarlet声明的变量值可变,const声明的值不可变。

但是var在ArkTS中被禁止了,看下面这个例子,了解下varlet的不同点

  • var关键字声明的变量是函数作用域的
    let声明的变量是块级作用域的。let声明的变量只在其包含的块(如函数、if else块或循环块)中可见。

    // 使用 var 声明变量
    for(var i = 0; i < 5; i++){console.log(i);
    }
    console.log(i); // 输出: 5
    
    // 使用 let 声明变量
    for(let j = 0; j < 5; j++){console.log(j);
    }
    console.log(j); // 编译错误: 无法找到名称 'j'    
    

    如果你学过Java、kotlin等语言的话,对于第一个循环,你可能会疑惑这个var定义的i不应该只在这个for循环内生效可以使用,怎么在外面还能访问,但是因为var变量是函数作用域,所以在外面也能访问到

    使用let声明的j就和java等语言的作用域一样。

  • var可以重复声明变量,let不可以

    var nun=1
    var num=2
    console.log(num) //输出2let s=1
    let s=1
    console.log(s) // 编译错误:不能重复声明变量s
    

综上,TypeScript中的let就相当于Kotlin中的var,而const就相当于Kotlin中的val,这个TypeScript中的var记不住也没关系,我们不用记那么多,因为它在ArkTS中被禁止了。

2.1.2 基本数据类型

TypeScript说明Kotlin说明
number数字,支持整型还浮点型Int整型
Long长整型
Short短整型
Float单精度浮点型
Double浮点型
boolean布尔类型Boolean布尔类型
string字符串类型,用单引号 ' 或双引号 " 括起来String字符串类型
any任意类型Any
void空类型,代表函数不返回值void空类型
symbol符号类型,表示唯一的符号值,通常用于创建对象的唯一键

2.2 数组集合

TypeScript创建数组

1、使用类型推断创建

let arr=[1,2,3]

2、指定数组元素类型创建

let arr:number[]=[1,2,3]

3、用 constructor 创建数组

let arr=new Array(1,2,3)

4、从已有数组创建

let otherArray=new Array(1,2,3)
let arr=[...otherArray]		//...相当于将otherArray展开
console.log(arr)			//输出:[1, 2, 3] 

而Kotlin是使用如下方式来创建数组的

val arr = arrayOf(1,2,3)
val arr2 = intArrayOf(1,2,3)
val arr3 = arrayListOf<String>()
val arr4 = arrayOfNulls<Int>(3)

2.3函数

Kotlin使用fun修饰,TypeScript使用function修饰

//kotlin
fun add(x:Number,y:Number){}
//TypeScript
function add(x:number,y:number){}

2.3.1可选参数

//kotlin 
fun add(a:Number,b:Number?)
//TypeScript
function add(a:number,b?:number)

kotlin在类型后面加?而TS在前加?

2.3.2剩余参数

//kotiln
fun test(a:String,vararg params:String,c:Int){for (param in params ){Log.i("test", "test: $i")}
}

Kotlin,使用vararg来修饰,这个params为多个参数,所以可以进行循环输出。

//typescript
//数组类型的剩余参数
function test(...params:string[]){
}
//元组类型的剩余参数
function test(...args: [boolean, number]) {}

TypeScript中的剩余参数,string后面使用数组类型

2.3.3返回值类型

//kotlin
fun add(a:Number,b:Number):Number{return a.toDouble()+b.toDouble()
}
//typescript
function add(a:number,b:number):number{return a+b
}
//或者
function add(a:number,b:number){return a+b
}

在大多数情况下,TypeScript能根据return语句等自动推断出返回值类型,因此也可以省略返回值类型。

2.3.4箭头函数(类似kotlin中用lambda表示的匿名函数)

匿名函数的语法与常规函数相似,但没有函数名。它可以具有参数列表、返回类型和函数体,并且可以按需求进行定义

//kotlin 匿名函数
val sum = fun(a: Int, b: Int): Int {return a + b
}
val result = sum(5, 10)
//kotlin用Lambda表达式实现类似功能
val sum:(Int,Int)->Int={a,b->a+b}
//typescript 匿名函数
const sum = function(a:number,b:number):number{return a+b
}
//箭头函数
const sum = (a:number,b:number):number=>a+b

2.4条件语句

2.4.1 if else

TypeScript和Kotlin的用于一致

//kotlin
var num:Int = 12
if (num % 2==0) {Log.i(TAG, "偶数")
} else {Log.i(TAG, "奇数")
}
//typescript
var num:number = 12
if (num % 2==0) {console.log('偶数')
} else {console.log('奇数')
}

2.4.2 switch…case

TypeScript和Java用法一致,Kotlin中没有switch…case语句

//typescript
var grade = "A"
switch (grade) {case "A": {console.log('A')}case "B": {console.log('B')}default: {console.log('不合格')}
}
//kotlin
val grade="A"
when(grade){"A"->{Log.i(TAG, "优")}"B"->{Log.i(TAG, "B")}else->{Log.i(TAG, "不及格")}
}

2.5 循环语句

//kotlin
val array= listOf("a","b","c","d","e")
for (value in array){Log.i(TAG, "$value")
}
for (index in array.indices){Log.i(TAG, "${array[index]}")
}

在kotiln中我们是用for ...in 来循环,其中用array或者array.indices来区分是迭代下标还是值

但在typescript中,用for..infor..of来区分

//typescript
let list = [4, 5, 6];for (let i in list) {console.log(i); // "0", "1", "2"	迭代的是数组下标	
}for (let i of list) {console.log(i); // "4", "5", "6"	迭代的是数组值
}

for..offor..in均可迭代一个列表,但是用于迭代的值却不同:for..in迭代的是对象的键,而for..of则迭代的是对象的值。

2.6 类

2.6.1 定义

TypeScript定义类的方式和Kotlin一样

//kotlin
class Person {private val name: String = ""private val age: Number = 0
}//实例化
val p = Person()
//typescript
class Person {private name: stringprivate age: numberconstructor(name: string, age: number) {this.name = name;this.age = age;}public getPersonInfo(): string {return `My name is ${this.name} and age is ${this.age}`;}
}//实例化 和Java一样,需要使用new关键字
let p = new Person("张三",18)

2.6.2 继承

kotlin的继承,需要将父类open后才可继承,而Typescript的继承,和java一样,是使用extends关键字

//kotlin
open class Person {...
}class Student : Person() {var sno = ""var grade = 0
}
//typescript
class Student extends Person {private sno: stringprivate grade: numberconstructor(name:string,age:number,sno:string,grade:number){super(name,age)this.sno=snothis.grade=grade}}

2.6.3 构造函数

//typescript
class Person {private name: stringprivate age: numberconstructor(name: string, age: number) {this.name = name;this.age = age;}
}

TypeScript构造函数使用constructor关键字,且定义的变量必须初始化。可以private name: string="参数"或者在构造函数中赋值

通过以上学习,我们学习了TypeScript中最主要的知识,包括变量和函数、逻辑控制语句等,这些已经够我们开始来学习鸿蒙开发了,从下一篇开始,我们将开始学习ArkTS中的UI绘制部分。

请添加图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/588288.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

矩阵空间秩1矩阵小世界图

文章目录 1. 矩阵空间2. 微分方程3. 秩为1的矩阵4. 图 1. 矩阵空间 我们以3X3的矩阵空间 M 为例来说明相关情况。目前矩阵空间M中只关心两类计算&#xff0c;矩阵加法和矩阵数乘。 对称矩阵-子空间-有6个3X3的对称矩阵&#xff0c;所以为6维矩阵空间上三角矩阵-子空间-有6个3…

使用docker-tc对host容器进行限流

docker-tc是一个github开源项目&#xff0c;项目地址是https://github.com/lukaszlach/docker-tc。 运行docker-tc docker run -d \ --name docker-tc \ --network host \ --cap-add NET_ADMIN \ --restart always \ -v /var/run/docker.sock:/var/run/docker.sock \ -v /var…

STM32-03基于HAL库(CubeMX+MDK+Proteus)输入检测案例(按键控制LED)

文章目录 一、功能需求分析二、Proteus绘制电路原理图三、STMCubeMX 配置引脚及模式&#xff0c;生成代码四、MDK打开生成项目&#xff0c;编写HAL库的按键检测代码五、运行仿真程序&#xff0c;调试代码 一、功能需求分析 搭建完成开发STM32开发环境之后&#xff0c;开始GPIO…

备战蓝桥杯---刷杂题1

1.来个小定理&#xff08;上次DP的青蛙过河用过&#xff09; 事实上&#xff0c;假如他们的gcd&#xff01;1,那么P,q都可以表示成gcd的倍数&#xff0c;因此假如一个数不是gcd的倍数就不可以表示&#xff0c;若互质由裴蜀定理大于一定时一定可以表示出。 事实上为&#xff08…

解密AI人工智能的整体分层架构:探索智能科技的未来之路

随着人工智能技术的迅猛发展&#xff0c;AI已经渗透到我们生活的方方面面。而支撑AI人工智能系统运作的核心是其整体分层架构。本文将深入探讨AI人工智能的整体分层架构&#xff0c;揭示其中的奥秘&#xff0c;探索智能科技的未来之路。 ### AI人工智能整体分层架构的重要性 …

MYSQL-6.日志

日志 undo-log回滚日志&#xff1a; 存储&#xff1a;InnoDB默认将undo-log日志存储在xx.ibdata共享表数据文件中&#xff08;Mysql5.5版本后支持单独存放&#xff09;&#xff0c;采用段形式存储&#xff1b;在xx.ibdata共享表数据文件中&#xff0c;有一块名为Rollback segm…

【GIS前言技术】中国历史地图在线服务(WMTS版)

文章目录 一、数据服务介绍二、GIS软件加载1. ArcGIS加载2. Globalmapper加载 一、数据服务介绍 中華文明之時空基礎架構 WMTS 服務 服務網址為&#xff1a;https://gis.sinica.edu.tw/ccts/wmts 直接打开网站&#xff1a; 台湾小伙伴使用的是繁体&#xff0c;这里直接复制过…

AssetBundle在移动设备上丢失

1&#xff09;AssetBundle在移动设备上丢失 2&#xff09;Unity云渲染插件RenderStreaming&#xff0c;如何实现多用户分别有独立的操作 3&#xff09;如何在圆柱体类型的地图中编程玩家的输入 4&#xff09;Mixamo动画的根运动问题 这是第380篇UWA技术知识分享的推送&#xff…

git基本操作(小白入门快速上手一)

1、前言 我们接上一篇文章来讲&#xff0c;直接开干 1.1、工作区 1. 工作区很好理解&#xff0c;就是我们能看到的工作目录&#xff0c;就是本地的文件夹。 2. 这些本地的文件夹我们要通过 git add 命令先将他们添加到暂存区中。 3. git commit 命令则可以将暂存区中的文件提交…

【拓扑排序】【 图论】1203. 项目管理

本文涉及知识点 拓扑排序 图论 LeetCode1203. 项目管理 有 n 个项目&#xff0c;每个项目或者不属于任何小组&#xff0c;或者属于 m 个小组之一。group[i] 表示第 i 个项目所属的小组&#xff0c;如果第 i 个项目不属于任何小组&#xff0c;则 group[i] 等于 -1。项目和小组…

用ChatGPT出题,完全做不完

最近小朋友正在学习加减法&#xff0c;正好利用ChatGPT来生成加减法练习题&#xff0c;小朋友表示够了&#xff0c;够了&#xff0c;完全做不完。本文将给大家介绍如何利用ChatGPT来生成练习题。 尚未获得ChatGPT的用户&#xff0c;请移步&#xff1a;五分钟开通GPT4.0。 角色…

OpenKylin安装Kafka

一、操作系统 openKylin 1.0.1 X86 二、下载安装包 # 安装依赖jdk sudo apt-get update sudo apt-get install default-jdk # 下载kafka mkdir -p /data/software/kafka wget https://archive.apache.org/dist/kafka/2.4.1/kafka_2.13-2.4.1.tgz三、解压安装 # 解压缩Kafka…

【DPU微知识】NVIDIA-BlueFiled DPU概念之:BFB是什么?

BFB是BlueField Boot Stream的缩写&#xff0c;由Bootloader、Linux OS、Romfs组成。本质&#xff1a;bootload、系统、文件系统。&#xff08;其实就是DPU的上装类比标准host的grub、linux、文件系统&#xff0c;类似做Linux移植时候构建的最小文件系统的三件套差不多&#xf…

在idea中使用sql语言提醒

1.Settings中设置 2. 配置好数据库名字 3. altenter 注入方言 注入后是下面这样

Android多边形区域递归种子填充算法的示例代码

平面区域填充算法是计算机图形学领域的一个很重要的算法&#xff0c;区域填充即给出一个区域的边界&#xff08;也可以是没有边界&#xff0c;只是给出指定颜色&#xff09;&#xff0c;要求将边界范围内的所有象素单元都修改成指定的颜色&#xff08;也可能是图案填充&#xf…

苹果手表Apple Watch录了两个半小时的录音,却只能播放4秒,同步到手机也一样,还能修复好吗?

好多人遇到这个情况&#xff0c;用苹果手表Apple Watch录音&#xff0c;有的录1个多小时&#xff0c;有的录了3、4小时&#xff0c;甚至更长时间&#xff0c;因为手表没电&#xff0c;忘记保存等原因造成录音损坏&#xff0c;都是只能播放4秒&#xff0c;同步到手机也一样&…

Linux基础篇:VMware centos7虚拟机网络配置——桥接模式

VMware centos7虚拟机网络配置——桥接模式 1 搞清楚什么是桥接模式 桥接模式允许虚拟机直接连接到物理网络&#xff0c;就像它是物理网络中的一个独立设备一样。在这种模式下&#xff0c;虚拟机将具有与宿主机相同网络中的其他设备相同的网络访问权限。虚拟机将获得一个独立…

【C++庖丁解牛】高阶数据结构---红黑树详解(万字超详细全面介绍红黑树)

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言1.红黑树的概念2.红黑…

vue2 列表一般不使用索引删除的原因

在 Vue 中使用索引来删除列表项可能会导致一系列问题&#xff0c;尤其是在处理动态列表时。以下是一些可能的问题和相应的例子&#xff1a; 1. 数据不一致问题 当你使用索引来删除列表中的某个项时&#xff0c;如果列表中的其他项发生了变化&#xff08;比如新增或重新排序&a…

springdoc-openapi-用户界面如何将请求设置为HTTPS

一、问题描述 当我们的服务接口需要通过HTTPS访问时&#xff0c;通过swagger可视化页面请求接口的时候&#xff0c;发起的是HTTP请求&#xff0c;导致请求无法到达后端&#xff0c;影响测试。 二、解决方法 1、将服务的地址添加到配置文件中 swagger:server-list: #本地环境…