ArkTS语法

原创 已于 2025-06-02 01:12:40 修改 · 486 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#typescript #harmonyos

于 2025-06-02 01:10:14 首次发布

一、变量

声明变量的形式：let 变量名：变量类型 = 值

例如：

二、数组

 声明数组的形式：let 数组名：变量类型[ ] = [ 元素1，元素2，元素3，......]

三、对象

在定义对象之前要先定义接口，用来约定对象的数据类型

 声明对象的形式：

let 对象名：对象类型 = {

        变量1：值，

        变量2：值

}

四、函数

声明函数的形式：

function 函数名 （参数1：数据类型，参数2：数据类型） {

        return 返回值

}

五、箭头函数

声明箭头函数的形式：

let 函数名 =（参数1：数据类型，参数2：数据类型）=> {

        return 返回值

}

六、组件

界面中的文字、图片、按钮都是组件

先写容器组件，再写内容组件

容器组件：Column() {}, Row() {}

内容组件：Text()，无{}

七、组件属性 

通用属性：

文本属性：

 八、图像组件

九、内外边距

十、边框属性

十一、综合案例——歌曲列表

 

代码：

@Entry
@Component
struct Index {

  build() {
    Column() {
      Text('猜你喜欢')
        .fontColor(Color.White)
        .width('100%')
        .margin({
          bottom: 10
        })
      List() {
        ListItem() {
          Row() {
            // 图片
            Image($r('app.media.qiu'))
              .width(80)
              .margin({
                right: 10
              })
              .border({
                radius: 8
              })
            // 歌曲信息
            Column() {
              Text('直到世界尽头')
                .fontColor(Color.White)
                .fontWeight(700)
                .width('100%')
                .margin({
                  bottom: 15
                })
              // VIP及作者
              Row() {
                Text('VIP')
                  .border({
                    width: 1,
                    color: Color.Orange,
                    radius: 12
                  })
                  .padding({
                    top: 3,
                    bottom: 3,
                    left: 5,
                    right: 5
                  })
                  .margin({
                    right: 10
                  })
                  .fontColor(Color.White)
                Text('WANDS')
                  .fontColor(Color.Gray)
              }
              .width('100%')
            }
            .layoutWeight(1)
            // 更多
            Image($r("app.media.ic_more"))
              .height(30)
              .fillColor(Color.White)
          }
            .width('100%')
            .height(80)
            .padding({
              left: 10,
              right: 10
            })
            .margin({
              bottom: 10
            })
          //.backgroundColor(Color.Pink)
        }
      }
        .scrollBar(BarState.Off)
    }
      .width('100%')
      .height('100%')
      .padding({
        left: 10,
        right: 10
      })
      .backgroundColor(Color.Black)
      .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}

十二、if分支、条件表达式、循环

if-else分支

条件表达式

循环渲染

十三、状态管理和事件 

十四、自定义构建函数

十五、综合案例：循环渲染歌曲列表、增加播放交互

效果：

代码：

interface SongItemType {
  img: string //图像
  name: string //歌名
  author: string //作者
}

@Entry
@ComponentV2
struct Index {
  songs: SongItemType[] = [
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/0.jpg',
      name: '直到世界的尽头',
      author: 'WANDS',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/1.jpg',
      name: '画',
      author: '赵磊',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/2.jpg',
      name: 'Sweet Dreams',
      author: 'TPaul Sax / Eurythmics',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/3.jpg',
      name: '奢香夫人',
      author: '凤凰传奇',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/4.jpg',
      name: '空心',
      author: '光泽',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/5.jpg',
      name: '反转地球',
      author: '潘玮柏',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/6.jpg',
      name: 'No.9',
      author: 'T-ara',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/7.jpg',
      name: '孤独',
      author: 'G.E.M.邓紫棋',
    },

    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/8.jpg',
      name: 'Lose Control',
      author: 'Hedley',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/9.jpg',
      name: '倩女幽魂',
      author: '张国荣',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/10.jpg',
      name: '北京北京',
      author: '汪峰',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/11.jpg',
      name: '苦笑',
      author: '汪苏泷',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/12.jpg',
      name: '一生所爱',
      author: '卢冠廷 / 莫文蔚',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/13.jpg',
      name: '月半小夜曲',
      author: '李克勤',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/14.jpg',
      name: 'Rolling in the Deep',
      author: 'Adele',
    },
    {
      img: 'http://yjy-teach-oss.oss-cn-beijing.aliyuncs.com/HeimaCloudMusic/15.jpg',
      name: '海阔天空',
      author: 'Beyond',
    }
  ]

  @Local playIndex: number = -1

  @Builder
  songItem (img: string, name: string, author: string, index:number) {
    ListItem() {
      Row() {
        // 图片
        Stack() {
          Image(img)
            .width(80)
            .margin({
              right: 10
            })
            .border({
              radius: 8
            })
          if (this.playIndex === index) {
            Image($r('app.media.wave'))
              .width(24)
          }
        }
        // 歌曲信息
        Column() {
          Text(name)
            .fontColor(Color.White)
            .fontWeight(700)
            .width('100%')
            .margin({
              bottom: 15
            })
          // VIP及作者
          Row() {
            Text('VIP')
              .border({
                width: 1,
                color: Color.Orange,
                radius: 12
              })
              .padding({
                top: 3,
                bottom: 3,
                left: 5,
                right: 5
              })
              .margin({
                right: 10
              })
              .fontColor(Color.White)
            Text(author)
              .fontColor(Color.Gray)
          }
          .width('100%')
        }
        .layoutWeight(1)
        // 更多
        Image($r("app.media.ic_more"))
          .height(30)
          .fillColor(Color.White)
      }
      .width('100%')
      .height(80)
      .padding({
        left: 10,
        right: 10
      })
      .margin({
        bottom: 10
      })
      //.backgroundColor(Color.Pink)
      .onClick(() => {
        this.playIndex = index
      })
    }
  }

  build() {
    Column() {
      Text('猜你喜欢')
        .fontColor(Color.White)
        .width('100%')
        .margin({
          bottom: 10
        })
      List() {
        ForEach(this.songs, (item: SongItemType, index: number) => {
          this.songItem(item.img, item.name, item.author, index)
        })
      }
      .scrollBar(BarState.Off)
    }
    .width('100%')
    .height('100%')
    .padding({
      left: 10,
      right: 10
    })
    .backgroundColor(Color.Black)
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}
WJ.Polar
关注
【鸿蒙开发】第五章 ArkTS基础知识 - 声明变量、常量、类型和函数
Yvan
12-11 1万+
if语句的条件支持非boolean值，对于boolean以外的类型，会进行隐式类型转换，null、undefined、空字符串、0等默认值都为fasleArkTS声明的变量、常量、类型、函数都跟TypeScript的大致基本相同，与Java也极其相似。所以如果是有一定语言基础的小伙伴，学习ArkTS的语法毫无难度，基本按照官方文档提供的指引学习即可，后面章节我们会继续记录ArkTS的学习。
3.ArkTS语法介绍
m0_62110645的博客
07-25 713
D. keyGenerator为数据源arr的每个数组项生成唯一且持久的键值，为必选参数。C. 当父组件和子组件之间存在一个或多个if语句时，必须遵守父组件关于子组件使用的规则。C. itemGenerator为数组中的每个元素创建对应的组件，为必选参数。2. 允许在容器组件内使用if/else条件渲染语句构建不同的子组件。B. 允许在容器组件内使用，通过条件渲染语句构建不同的子组件。1. 下面属于ArkTS中正确使用变量声明的语句是？2. 下面属于ArkTS函数声明的语句的是？答案：错误(False)
鸿蒙HarmonyOS(ArkTS)语法 声明变量及注意事项
weixin_45966674的博客
12-11 1609
但是 他存在js语法中的一个弱语言 所以 我们给pom无论是赋值 字符串 又或者数字 都是可以的。然后还有一个点 ArkTS中声明变量名中有数字是允许的 但千万不要用数字开头 会报错的。声明时 我们并没有告诉系统 它的值是什么 等到什么时候我们需要赋值了再去处理这个变量。这里不是说下面的就不好哦 有些时候 你刚声明变量 那确实是不知道它的值是什么。js是最初弱类型语言 于是TS作为js的副类 是一种更严谨的数据限定语法。我们声明变量的语法并不是ArkTS的。当然 我们这个是声明并赋值。
二、ArkTS语法学习
qq_26643587的博客
05-05 2431
直接引用的三方 JavaScript 库，是无法使用TypeScript 诸如类型检查等特性功能，将库里的函数方法体去掉只保留导出类型声明，产生一个描述 JavaScript 库和模块信息的声明文件，声明文件以.d.ts为后缀。模块是一个独立的文件或代码块，它封装了一组相关的数据和函数，并提供了对外的接口，暴露给外部的接口，必须使用exprot命令声明；如：if(0)、 if("") 、if('') 、if(null)、 if(undefined) 均为等价if(false)改用private关键字。
04-ArkTS语言_基础语法之变量声明+数据类型
dfsdcvbhjnj的博客
11-28 1115
有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。TypeScript里的所有数字都是浮点数，这些浮点数的类型是 number。TypeScript里使用 string表示文本数据类型， 可以使用双引号（"）或单引号（'）表示字符串或者反引号（`）。enum类型是对JavaScript标准数据类型的一个补充，使用枚举类型可以为一组数值赋予友好的名字。元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。第二种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组。
ArkTs
weixin_64443786的博客
04-16 2866
TS
精选资源
【OpenHarmony】 ArkTS 语法基础 ② ( ArkTS 自定义组件 )
06-03
【OpenHarmony】ArkTS 语法基础 ② ( ArkTS 自定义组件 | 自定义可导入组件 - export 声明模块 | 导入自定义组件 - import 导入组件 ) https://hanshuliang.blog.youkuaiyun.com/article/details/139407374 博客源码快照 ...
精选资源
基于arkts语法的鸿蒙新闻APP设计源码
09-25
该项目使用arkts语法进行开发，arkts即应用Ark TypeScript，是华为为鸿蒙应用开发推出的一套开发语言标准。它基于TypeScript语言，增添了更多为鸿蒙系统优化的特性，旨在简化开发流程，提高开发效率。 源码中包含的...
精选资源
【OpenHarmony】ArkTS 语法基础 ③ ( 自定义组件生命周期回调函数 - 页面生命周期回调函数 )
06-04
【OpenHarmony】ArkTS 语法基础 ③ ( @Component 自定义组件生命周期回调函数 | @Entry 页面生命周期回调函数 ) https://hanshuliang.blog.youkuaiyun.com/article/details/139424435 博客源码快照 一、ArkTS @Component ...
【鸿蒙开发】ArkTS语法以及基础组件详解教程
HarmonyOS_001的博客
06-27 2346
有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。获取完整版高清学习资料，请点击→鸿蒙全栈开发学习资料（安全链接，请放心点击）
Harmony OS 开发之ArkTS语言基础-变量声明与赋值
Jarlen的专栏
10-22 445
【代码】Harmony OS 开发之ArkTS语言基础-变量声明与赋值。
ArkTs变量类型、数据类型基础语法
程序员一博
11-25 6352
ArkTS是华为自研的开发语言。它在TypeScript（简称TS）的基础上，匹配ArkUI框架，扩展了声明式UI、状态管理等相应的能力，让开发者以更简洁、更自然的方式开发跨端应用。
HarmonyOS NEXT - ArkTS语言介绍 - 基本知识{声明、类型、运算符，语句}
u011143672的博客
06-16 2641
ArkTS是一种为构建高性能应用而设计的编程语言。ArkTS在继承TypeScript语法的基础上进行了优化，以提供更高的性能和开发效率。随着移动设备在人们的日常生活中变得越来越普遍，许多编程语言在设计之初没有考虑到移动设备，导致应用的运行缓慢、低效、功耗大，针对移动环境的编程语言优化需求也越来越大。ArkTS是专为解决这些问题而设计的，聚焦于提高运行效率。目前流行的编程语言TypeScript是在JavaScript基础上通过添加类型定义扩展而来的，而ArkTS则是TypeScript的进一步扩展。
ArkTS数组对象详解与实战
最新发布
m0_65746114的博客
08-24 991
ArkTS 数组作为基础数据结构，在鸿蒙应用开发中扮演着重要角色。随着鸿蒙生态的发展，数组功能可能会进一步强化，包括：类型化数组增强：更好的 Int64/Uint64 支持并行操作 API：如 parallelMap、parallelFilter响应式优化：自动检测纯操作避免不必要更新跨设备同步：更强大的分布式数组实现掌握 ArkTS 数组的高级用法，能够帮助开发者构建更高效、可靠的鸿蒙应用。在实际开发中，建议根据具体场景选择最合适的数组操作方法，兼顾性能和代码可读性。
ArkTS-数组详解
qq_25768349的博客
10-15 2615
数组可由数组复合字面量（即用方括号括起来的零个或多个表达式的列表，其中每个表达式为数组中的一个元素）来赋值。数组的长度由数组中元素的个数来确定。数组中第一个元素的索引为0。array，即数组，是由可赋值给数组声明中指定的元素类型的数据组成的对象。
第三章 ArkTS语法
m0_73992525的博客
12-03 1463
无论是Android还是iOS开发，都提供了多种数据类型用于常见的业务开发，但在ArkTs中数据类型就大有不同，例如int，long，float，double统一就是number类型。ArkTs是TypeScript的超集，其数据类型也是基于TypeScript而来。基础类型:Number、String、Boolean、Enum引用类型:基类Object、Array联合类型:Union类型别名:Aliases状态管理概述当开发者希望构建一个动态的、有交互的界面，就需要引入“状态”的概念。
第一章：ArkTs 基础之变量与常量声明：深入理解类型系统
zhiqiuqiu2的博客
11-14 975
在 ArkTs 的世界里，声明是构建程序的基石，它让我们能够引入变量、常量、函数和类型，从而构建起复杂而有序的代码结构。今天，我们就来深入探讨一下 ArkTs 中的变量和常量声明这一重要的基础部分。
【习题】ArkTS语法介绍
wu_qing_song的博客
01-08 470
3. ArkTS是HarmonyOS生态应用的开发语言，使用 .ets 作为ArkTS语言源码文件后缀。它在保持TypeScript （简称 TS ）基本语法风格的基础上，对TS的动态类型特性施加更严格的约束。同时提供了声明式UI 、状态管理等相应的能力，让开发者以更简洁、更自然的方式开发高性能应用。A. if、else if后跟随的条件语句不可以使用状态变量。1. 下面属于ArkTS中正确使用变量声明的语句是？2. 下面属于ArkTS函数声明的语句的是？2. 下面属于ArkTS基础类型的是？
鸿蒙开发学习随记——ArkTS基础语言学习
zgwnb666的博客
06-21 1753
鸿蒙开发学习随记(1)——ArkTS基础语言学习
鸿蒙开发arkts语法
02-28
### 关于鸿蒙操作系统中的ArkTS语法 #### ArkTS基础概念 ArkTS是一种专为HarmonyOS设计的编程语言，其基本组成涵盖了变量声明、函数定义以及类结构等内容[^2]。这种语言的设计理念旨在简化开发者在构建跨设备应用...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值