【HarmonyOS开发】ArkTS基础语法及使用(鸿蒙开发基础教程)

简介: 【HarmonyOS开发】ArkTS基础语法及使用(鸿蒙开发基础教程)

 目录

一.ArkTS的来世今生

二.结构概览

三.语法详述

1.声明

2.类型

基本类型

引用类型

枚举类型

联合类型

类型别名

3.基本知识

空安全

类型安全与类型推断

语句

4.函数

普通函数

箭头函数(lambda表达式)

闭包函数

函数类型

5.类

类的声明

类的实例化

构造器constructor用于实例化时进行初始化操作

方法

封装

继承

6.接口

接口的声明interface

接口的使用

接口的实现implements

7.模块

四.总结


一.ArkTS的来世今生

ArkTS是HarmonyOS生态的应用开发语言。

  • ArkTS提供了声明式UI范式、状态管理支持等相应的能力,让开发者可以以更简洁、更自然的方式开发应用。
  • 同时,它在保持TypeScript(简称TS,是一种给 JavaScript 添加特性的语言扩展)基本语法风格的基础上,进一步通过规范强化静态检查和分析,使得在程序运行之前的开发期能检测更多错误,提升代码健壮性,并实现更好的运行性能。
  • TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。
  • 针对JS/TS并发能力支持有限的问题,ArkTS对并发编程API和能力进行了增强。
  • ArkTS支持与TS/JS高效互操作,兼容TS/JS生态。

image.gif 编辑 image.gif 编辑

二.结构概览

image.gif 编辑

三.语法详述

1.声明

image.gif 编辑

变量(可以改变):

let count:number 0;

image.gif

常量(无法修改):

const MAX COUNT:number 100;

image.gif

2.类型

基本类型:string、number、.boolean等

引用类型:Object、.Array、自定义类等

枚举类型:Enum

联合类型:Union

类型别名:Aliases

基本类型

let name:string ='Xiaoming';//字符
let age:number 20;//数字
let isMale:boolean true;//布尔

image.gif

引用类型

//数组
let students:Array<string>['Xiaoming','Xiaozhang','Xiaowang','Xiaoli'];
let students:string[]=['Xiaoming','Xiaozhang','Xiaowang','Xiaoli'];
//类
class User{...}
let user:User = new User();
//或
var obj = {name="xiaoming"};//创建一个对象
obj.name = "xiaomei";//改变属性
obj.age = 20;//增加属性并赋值

image.gif

枚举类型

//枚举
enum Color{
    Red,
    Blue,
    Green
}
let favouriteColor:Color = Color.Red;

image.gif

联合类型

一个变量拥有多个类型

//联合
let luckyNum:number|string = 7;
luckyNum = 'seven';

image.gif

类型别名

允许给类型起一个别名,方便理解和使用

//别名
type Matrix = number[][];
type Nullableobject = object | null;

image.gif

3.基本知识

注释

同C/C++一样,注释以"//"双斜杠表示。

空安全

一般来说,有时会存在声明变量时不确定初始值。在这类情况下,通常使用联合类型包含null值

let name:string null = null

image.gif

在使用时要先对其进行非空校验

有以下三种方法来完成空安全机制

1、使用if/else进行判空

if (name != null){/*do something */}
image.gif

2、使用空值合并表达式,?左边的值为ul时会返回表达式右边的值

let name:string | null = null
const res = name ?? '';
image.gif

3、使用?可选链,如果是null,运算符会返回undefined

 

let name:string | null ='aa';
let len = name?.length;
image.gif

类型安全与类型推断

AkTS是类型安全的语言,编辑器会进行类型检查,实时提示错误信息

let name:string ='Xiaoming';
name = 20;//错误语句

image.gif

ArkTS支持自动类型推导,没有指定类型时,AkTS支持使用类型推断自动选择合适的类型

1et meaningOfLife = 42;//meaningOfLife会被推测为number类型

image.gif

语句

条件语句

let isValid:Boolean = false;
if (Math.random() > 0.5){
isValid = true;
}
else{
isValid = false;
}

image.gif

let isValid = Math.random() > 0.5 ? true : false;

image.gif

循环语句

对于

let students:string[] = ['Xiaoming','Xiaozhang','Xiaowang','Xiaoli'];

image.gif

引用其元素可以:

  • for循环
for (let i=0;i<students.length;i++){
console.log(students[i]);
}
  • image.gif
  • for...of循环
for (let student of students){
console.log(student);
}
  • image.gif
  • while循环
let index = 0;
while (index < students.length){
console.log(students[index]);
index++;
}
  • image.gif

4.函数

普通函数

image.gif 编辑

function printstudentsInfo(students:string[]):void
{
    for (let student of students)
    {
        console.log(student);
    }
}
printstudentInfo(['Xiaoming','Xiaozhang','Xiaowang','Xiaoli'])
printstudentInfo(['Xiaoming','Xiaozhang','Xiaoli'];)

image.gif

箭头函数(lambda表达式)

简化函数声明,通常用于需要一个简单函数的地方

image.gif 编辑

箭头函数的返回类型可以省略,省略时,返回类型通过函数体推断

const printInfo = (name:string):void => {console.log(name)};

image.gif

执行体只有一行的情况下可以省略花括号

const printInfo = (name:string) => console.log(name);
printInfo('Xiaoming');

image.gif

箭头函数常用于作为回调函数

let students:string[] = ['Xiaoming','Xiaozhang','Xiaowang','Xiaoli'];
students.forEach((student:string) => console.log(student));

image.gif

image.gif 编辑

闭包函数

一个函数可以将另一个函数当做返回值,保留对内部作用域的访问。

function outerFunc():() => string
{
    let count = 0
    return(): string =>
    {
        count++;
        return count.tostring()
    }
}
let invoker = outerFunc()
console.1og(invoker())/输出:1
console.1og(invoker())//输出:2

image.gif

函数类型

将一个函数声明定义为一个类型,函数参数或者返回值

type returnType = () => string;//使用该类型作为返回类型
function outerFunc():returnType//声明一个函数类型
{
    let count =0
    return (): string =>
    {
        count++;
        return count.tostring()
    }
}
let invoker = outerFunc()
console.log(invoker())//输出:1
conso1e.1og(invoker())//输出:2

image.gif

5.类

       AkTS支持基于类的面向对象的编程方式,定义类的关键字为class,后面紧跟类名。

类的声明描述了所创建的对象共同的属性和方法。

类的声明

class Person{
    name:string ='Xiaoming';
    age:number = 20;
    isMale:boolean = true;
}

image.gif

类的实例化

const person = new Person();
console.1og(person.name);//输出:Xiaoming
const person:Person = { name:'Xiaozhang',age:29,isMale:true };
console.log(person.name);//输出:Xiaozhang

image.gif

构造器constructor

用于实例化时进行初始化操作

class Person{
    name:string ='Xiaoming';
    age:number = 20;
    isMale:boolean = true;
    constructor(name:string,age:number,isMale:boolean){
        this.name = name;
        this.age = age;
        this.isMale = isMale;
    }
}
const person = new Person('Xiaozhang',32,false);//传入参数实例化
console.log(person.name);//输出:Xiaozhang

image.gif

方法

class Person{
    name:string ='Xiaoming';
    age:number = 20;
    isMale:boolean = true;
    constructor(name:string,age:number,isMale:boolean){
        this.name = name;
        this.age = age;
        this.isMale = isMale;
    }
printInfo(){
    if (this.isMale){
        console.log(`$this.name}is a boy,and he is ${this.age)years old`);
    }else{
        console.log(`${this.name}is a girl,and she is $this.age}years old`);
        }
    }
}
const person:Person = new Person('Xiaozhang',28,true);
person.printInfo();//Xiaozhang is a boy,and he is 28 years old

image.gif

封装

class Person
{
    //可见性修饰符:private,protected,public
    public name:string = 'xiaoming';
    private _age:number = 20;
    isMale: boolean = true;
    ..//省略构造器和方法内容
    get age():number
    {
        return this._age;
    }
    set age(age:number)
    {
        this._age = age;
    }
}
const person:Person = new Person('Xiaozhang',28,true);
//console.1og(person._age.toString()//无法直接访问私有属性
console.log(person.age.toString()/实际访问的是get方法

image.gif

继承

子类继承父类的特征和行为,使得子类具有父类相同的行为。AkTS中允许使用继承来扩展现有的类,

对应的关键字为extends。

class Employee extends Person
{
    department:string;
    constructor(name:string,age:number,isMale:boolean,department:string)
    {
        super(name,age,isMale);//通过super关键字访问父类
        this.department = department;
    }
}
const employee:Employee = new Employee('Xiaozhang',28,true,'xxCompany');
employee.printInfo();//输出:Xiaozhang is a boy,and he is28 years old

image.gif

多态

子类继承父类,并可以重写父类方法,使不同的实例对象对同一行为有不同的表现

class Employee extends Person
{
    department:string;
    constructor(name:string,age:number,isMale:boolean,department:string)
    {
        super(name,age,isMale);
        this.department = department;
    }
    public printInfo()
    {
        super.printInfo();
        console.log(`working in ${this.department}`);
    }
}
const person:Person = new Person('Xiaozhang',28,true);
person.printInfo();//输出:Xiaozhang is a boy,and he is28 years old
const employee:Employee = new Employee('Xiaozhang',28,true,'xxCompany');
employee.printInfo();//输出:Xiaozhang is a boy,and he is28 years old,working in xxCompany

image.gif

6.接口

       接口是可以用来约束和规范类的方法,提高开发效率的工具,接口在程序设计中具有非常重要的作用。

接口的声明interface

interface Areasize
{
    width:number;//属性声明
    height:number;//属性2
}
interface Areasize
{
    calculateAreaSize():number;//方法的声明
    someMethod():void;//方法的声明
}

image.gif

接口的使用

let area:Areasize = {width:100,height:100};

image.gif

接口的实现implements

interface AreaSize
{
    width:number;/属性1
    height:number;/属性2
    calculateAreaSize():number;//方法的声明
    someMethod():void;//方法的声明
}
//接口实现:
class Rectanglesize implements Areasize
{
    width:number =0
    height:number =0
    someMethod():void
    {
        console.log('someMethod called');
    }
    calculateAreasize():number
    {
        this.someMethod();
        return this.width * this.height;
    }
}

image.gif

7.模块

ArkTS文件后缀为.ets

       在ArkTS中一个文件就可以是一个模块,拥有独立的作用域,引用其他文件时需要使用export或import关键字。

通过export导出一个文件的变量、函数、类等:

       Person.ets文件

//Person.ets
export class Person//导出需要使用的类
{
    name:string =  'Xiaoming';
    age:number =20;
    isMale:boolean =  true;
    ··//省略构造器内容
    printInfo(){
        if (this.isMale){
            console.log($this.name}is a boy,and he is $this.age}years old);
        }else{
            console.log($this.name}is a girl,and she is ${this.age]years old');
            }
        }
}

image.gif

通过import导入另一个文件的变量、函数、类等

       Page.ets文件

//Page.ets
import {Person} from './Person'   //导入需要使用的类
const person = new Person('Xiaozhang',20,true);
person.printInfo();//输出:Xiaozhang is a boy,and he is2 a years old

image.gif

四.UI

1.装饰器

image.gif 编辑 2.UI描述

image.gif 编辑

image.gif 编辑

3.布局组件

image.gif 编辑

五.总结

       以上只是最基础的ArkTS的介绍说明,详细的可以参考官方文档以及HarmonyOS官方教学。

相关文章
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:外卖App
仓颉语言实战分享,教你如何用仓颉开发外卖App界面。内容包括页面布局、导航栏自定义、搜索框实现、列表模块构建等,附完整代码示例。轻松掌握Scroll、List等组件使用技巧,提升HarmonyOS应用开发能力。
|
3月前
|
存储 IDE 定位技术
【HarmonyOS 5】鸿蒙组件&模板服务详解 - 助力高效开发的利器
在移动应用开发领域,效率与质量始终是开发者追求的核心目标。鸿蒙系统作为新兴的操作系统,为开发者提供了丰富且强大的开发资源,其中鸿蒙组件&模板服务更是成为开发者快速构建高质量应用的得力助手。
120 0
|
12天前
|
移动开发 网络协议 小程序
鸿蒙NEXT即时通讯/IM系统RinbowTalk v2.4版发布,基于MobileIMSDK框架、ArkTS编写
RainbowTalk是一套基于开源即时通讯讯IM框架 MobileIMSDK 的产品级鸿蒙NEXT端IM系统。纯ArkTS编写、全新开发,没有套壳、也没走捷径,每一行代码都够“纯血”。与姊妹产品RainbowChat和RainbowChat-Web 技术同源,历经考验。
37 0
|
2月前
|
存储 SQL 前端开发
跟老卫学HarmonyOS开发:ArkTS关系型数据库开发
本节以“账本”为例,使用关系型数据库接口实现账单的增、删、改、查操作。通过创建ArkTSRdb应用,演示如何操作RdbStore进行数据管理,并结合界面按钮实现交互功能。
90 0
跟老卫学HarmonyOS开发:ArkTS关系型数据库开发
|
2月前
|
缓存 移动开发 网络协议
纯血鸿蒙NEXT即时通讯/IM系统:RinbowTalk正式发布,全源码、纯ArkTS编写
RainbowTalk是一套基于MobileIMSDK的产品级鸿蒙NEXT端IM系统,目前已正式发布。纯ArkTS、从零编写,无套壳、没走捷径,每一行代码都够“纯”(详见:《RainbowTalk详细介绍》)。 MobileIMSDK是一整套开源IM即时通讯框架,历经10年,超轻量级、高度提炼,一套API优雅支持 UDP 、TCP 、WebSocket 三种协议,支持 iOS、Android、H5、标准Java、小程序、Uniapp、鸿蒙NEXT,服务端基于Netty编写。
138 1
|
3月前
|
开发者
鸿蒙开发:资讯项目实战之项目初始化搭建
目前来说,我们的资讯项目只是往前迈了很小的一步,仅仅实现了项目创建,步虽小,但概念性的知识很多,这也是这个项目的初衷,让大家不仅仅可以掌握日常的技术开发,也能让大家理解实际的项目开发知识。
鸿蒙开发:资讯项目实战之项目初始化搭建
|
3月前
|
缓存 JavaScript IDE
鸿蒙开发:基于最新API,如何实现组件化运行
手动只是让大家了解切换的原理,在实际开发中,可不推荐手动,下篇文章,我们将通过脚本或者插件,快速实现组件化模块之间的切换,实现独立运行,敬请期待!
111 0
鸿蒙开发:基于最新API,如何实现组件化运行
|
3月前
|
SQL 弹性计算 数据库
鸿蒙5开发宝藏案例分享---优化应用时延问题
鸿蒙性能优化指南来了!从UI渲染到数据库操作,6大实战案例助你提升应用流畅度。布局层级优化、数据加载并发、数据库查询提速、相机资源延迟释放、手势识别灵敏调整及转场动画精调,全面覆盖性能痛点。附赠性能自检清单,帮助开发者高效定位问题,让应用运行如飞!来自华为官方文档的精华内容,建议收藏并反复研读,共同探讨更多优化技巧。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:健身App
本期分享一个健身App首页的布局实现,顶部采用Stack容器实现重叠背景与偏移效果,列表部分使用List结合Scroll实现可滚动内容。代码结构清晰,适合学习HarmonyOS布局技巧。
|
3月前
|
容器
HarmonyOS NEXT仓颉开发语言实战案例:银行App
仓颉语言银行App项目分享,页面布局采用List容器,实现沉浸式体验与模块化设计。顶部资产模块结合Stack与Row布局,背景图与内容分离,代码清晰易懂;功能按钮部分通过负边距实现上移效果,圆角仅保留顶部;热门推荐使用header组件,结构更规范。整体代码风格与ArkTS相似,但细节更灵活,适合金融类应用开发。