【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官方教学。

相关文章
|
8天前
|
数据安全/隐私保护
【HarmonyOS——ArkTS语言】面向对象【合集】
【ArkTS语言-HarmonyOS】面向对象【合集】本次实验,我们在utils目录中创建了MyClass.ets和MyConfig.ets文件,在此过程中定义了Config接口和Color枚举。同时,我们实现了Auth类及其子类WechatAuth和AlipayAuth,从而深入了解了面向对象编程在HarmonyOS开发中的应用。在实验中,我们学会了如何遵循接口规范来实现类的功能,并通过继承机制来扩展类的行为。通过这些实践,我们完成了用户创建、密码设置以及登录操作。
23 3
|
8天前
|
UED
【HarmonyOS——ArkTS语言】计算器的实现【合集】
【ArkTS语言-HarmonyOS】计算器的实现【合集】组件,点击等号后计算函数高效解析表达式并给出准确结果,达成核心功能要求。错误提示不够详尽,难以助力用户快速定位输入错误;响应式设计不足,在不同屏幕规格下适配性差。总体而言,本次实验已成功构建起基本功能框架,后续将针对上述问题深入探究优化方案,不断打磨细节,在完善计算器功能与提升用户体验的道路上持续精进,进而提升自身编程与应用开发的综合能力水平。利用按钮组件顺利完成布局设计,数字、运算符及功能按钮排列有序,操作逻辑清晰直观。
25 2
|
16天前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法,包括三种基本数据类型(string、number、boolean)和变量的使用。重点讲解了let、const和var的区别,涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步!
78 47
Harmony OS开发-ArkTS语言速成二
|
4天前
|
数据安全/隐私保护 开发者 计算机视觉
《鸿蒙 HarmonyOS 应用开发从入门到精通(第 2 版)》学习笔记 ——HarmonyOS 环境搭建之注册华为开发者联盟帐号
要进行HarmonyOS应用开发,首先需要注册华为开发者联盟帐号并完成实名认证。注册时可选择成为个人或企业开发者,两者享有不同权益。个人开发者需准备手机号/邮箱、身份证扫描件及银行卡号等资料,通过审核后即可享受应用市场、主题、商品管理等多项服务。具体步骤包括访问华为开发者官网(https://developer.huawei.com/consumer/cn/),选择注册方式并按指引操作。实名认证需填写个人信息并签署相关协议,等待1-3个工作日的审核结果。
48 16
|
11天前
|
人工智能 安全 JavaScript
《鸿蒙HarmonyOS应用开发从入门到精通(第2版)》学习笔记——HarmonyOS纯血鸿蒙新特性
HarmonyOS 3.1引入了Stage模型,增强ArkTS语言、应用程序框架、Web、ArkUI等子系统能力。新增功能包括Ability框架的Stage开发模型、ArkUI组件能力提升、应用包管理接口、公共基础类库支持Buffer读写、Web服务文档预览及编辑、图形图像编解码支持等。从API 9开始,Stage模型成为主要开发模型,支持更灵活的应用生命周期管理和窗口调度,提供更好的组件与窗口弱耦合体验。此外,HarmonyOS NEXT开发者预览版实现了全面自研,被称为“纯血鸿蒙”,具备自主可控、高度弹性、更强的安全性和隐私保护特性。
69 21
|
9天前
|
UED 开发者
【HarmonyOS——ArkTS语言】计算器的实现【合集】
【ArkTS语言-HarmonyOS】计算器的实现【合集】组件,点击等号后计算函数高效解析表达式并给出准确结果,达成核心功能要求。错误提示不够详尽,难以助力用户快速定位输入错误;响应式设计不足,在不同屏幕规格下适配性差。总体而言,本次实验已成功构建起基本功能框架,后续将针对上述问题深入探究优化方案,不断打磨细节,在完善计算器功能与提升用户体验的道路上持续精进,进而提升自身编程与应用开发的综合能力水平。利用按钮组件顺利完成布局设计,数字、运算符及功能按钮排列有序,操作逻辑清晰直观。
28 8
|
8天前
|
存储 JSON 区块链
【HarmonyOS NEXT开发——ArkTS语言】购物商城的实现【合集】
HarmonyOS应用开发使用@Component装饰器将Home结构体标记为一个组件,意味着它可以在界面构建中被当作一个独立的UI单元来使用,并且按照其内部定义的build方法来渲染具体的界面内容。txt:string定义了一个名为Data的接口,用于规范表示产品数据的结构。src:类型为,推测是用于引用资源(可能是图片资源等)的一种特定类型,用于指定产品对应的图片资源。txt:字符串类型,用于存放产品的文字描述,比如产品名称等相关信息。price:数值类型,用于表示产品的价格信息。
32 5
|
8天前
|
开发工具 开发者 容器
【HarmonyOS NEXT开发——ArkTS语言】欢迎界面(启动加载页)的实现【合集】
从ArkTS代码架构层面而言,@Entry指明入口、@Component助力复用、@Preview便于预览,只是初窥门径,为开发流程带来些许便利。尤其动画回调与Blank组件,细节粗糙,后续定当潜心钻研,力求精进。”,字体颜色为白色,字体大小等设置与之前类似,不过动画配置有所不同,时长为。,不过这里没有看到额外的动画效果添加到这个特定的图片元素上(与前面带动画的元素对比而言)。这是一个显示文本的视图,文本内容为“奇怪的知识”,设置了字体颜色为灰色(的结构体,它代表了整个界面组件的逻辑和视图结构。
29 1
|
18天前
|
API 索引
鸿蒙开发:实现一个超简单的网格拖拽
实现拖拽,最重要的三个方法就是,打开编辑状态editMode,实现onItemDragStart和onItemDrop,设置拖拽移动动画和交换数据,如果想到开启补位动画,还需要实现supportAnimation方法。
75 13
鸿蒙开发:实现一个超简单的网格拖拽
|
17天前
|
索引 API
鸿蒙开发:自定义一个股票代码选择键盘
金融类的软件,特别是股票基金类的应用,在查找股票的时候,都会有一个区别于正常键盘的键盘,也就是股票代码键盘,和普通键盘的区别就是,除了常见的数字之外,也有一些常见的股票代码前缀按钮,方便在查找股票的时候,更加方便的进行检索。
鸿蒙开发:自定义一个股票代码选择键盘

热门文章

最新文章