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

相关文章
|
开发框架 开发者 JavaScript
HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 三)
子组件中被@Link装饰的变量与其父组件中对应的数据源建立双向数据绑定。
|
开发框架 API 开发者
HarmonyOS学习路之方舟开发框架—学习ArkTS语言(基本语法 二)
在ArkUI中,UI显示的内容均为组件,由框架直接提供的称为系统组件,由开发者定义的称为自定义组件。在进行 UI 界面开发时,通常不是简单的将系统组件进行组合使用,而是需要考虑代码可复用性、业务逻辑与UI分离,后续版本演进等因素。因此,将UI和部分业务逻辑封装成自定义组件是不可或缺的能力。
|
2月前
|
数据可视化 JavaScript API
HarmonyOS NEXT原生重榜发布-安利一款鸿蒙可视化代码生成器
鸿蒙低代码可视化开发平台是基于华为鸿蒙操作系统构建的创新开发环境,旨在通过简化开发流程、降低技术门槛,加速应用从设计到上线的全过程。它融合了低代码开发的核心理念与鸿蒙系统的技术优势,为开发者提供了一条高效、便捷的应用开发之路。
56 2
HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 四)
被@Observed装饰的类,可以被观察到属性的变化;子组件中@ObjectLink装饰器装饰的状态变量用于接收@Observed装饰的类的实例,和父组件中对应的状态变量建立双向数据绑定。这个实例可以是数组中的被@Observed装饰的项,或者是class object中是属性,这个属性同样也需要被@Observed装饰。单独使用@Observed是没有任何作用的,需要搭配@ObjectLink或者@Prop使用。
|
7月前
|
JavaScript API 开发者
【HarmonyOS 4.0 应用开发实战】ArkTS 快速入门
【HarmonyOS 4.0 应用开发实战】ArkTS 快速入门
799 0
|
7月前
|
JavaScript 前端开发 索引
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
97 0
|
7月前
|
JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲
77 0
|
7月前
|
存储 Java 数据管理
HarmonyOS实战—HarmonyOS入门第一课
HarmonyOS实战—HarmonyOS入门第一课
116 0
HarmonyOS实战—HarmonyOS入门第一课
|
开发框架 前端开发 JavaScript
HarmonyOS学习路之方舟开发框架—学习ArkTS语言(基本语法 三)
页面和自定义组件生命周期 在开始之前,先明确自定义组件和页面的关系
HarmonyOS学习路之方舟开发框架—学习ArkTS语言(基本语法 三)
|
存储 开发框架 JavaScript
HarmonyOS学习路之方舟开发框架—学习ArkTS语言(状态管理 五)
LocalStorage是ArkTS为构建页面级别状态变量提供存储的内存内“数据库”。应用程序可以创建多个LocalStorage实例,LocalStorage实例可以在页面内共享,也可以通过GetShared接口,获取在UIAbility里创建的GetShared,实现跨页面、UIAbility内共享。组件树的根节点,即被@Entry装饰的@Component,可以被分配一个LocalStorage实例,此组件的所有子组件实例将自动获得对该LocalStorage实例的访问权限;