TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法

简介: 【10月更文挑战第12天】TypeScript无缝衔接ArkTS:快速入门鸿蒙ArkTS基本语法

大家好,我是石小石!经过前几节的教程,相信你已经对鸿蒙的开发、ArkTS语言、ArkUI有了一定的认识。这节教程,我们将正式学习ArkTS基础语法,丰富我们的技术栈!

TypeScript与ArkTS的关系

我们先看看官方是怎么介绍的:

image.png

简单来说,TypeScript 是一种通用的、基于 JavaScript 的编程语言,主要应用于前端开发中。ArkTS 则是专门为鸿蒙开发生态系统设计的,基于 TypeScript 的一种扩展语言,拥有更强的稳定性和安全性。

ArkTS的基本语法

作为前端,我们上手ArkTS基本语法是非常容易的!首先,ArkTS是兼容TS/JavaScript生态的,我们可以使用TS/JS进行开发或复用已有代码,但是要注意一些约束规则:兼容TS/JS的约束

当然,都学习ArkTS了,还使用js就太丢人了,我们来快速入门ArkTS的基本语法吧!

基础语法

类型声明

变量声明

let a: string = '你好,我是石小石';
// 更改值
a = '溜了溜了,学个毛线';
AI 代码解读

常量声明

以关键字const开头的声明引入只读常量,不能修改。

const b: string = '卷不动了!不学了';
// 改值会报错
b = "我好难" // 报错
AI 代码解读

类型

类型名称 描述 示例值
Number类型 表示整数和浮点数,支持十进制、二进制、八进制和十六进制的字面量。 let num: number = 3.14;
Boolean类型 逻辑类型,包含 truefalse 两个值。 let isDone: boolean = false;
String类型 表示字符序列,可以使用单引号、双引号或反引号(模板字面量)括起来。 let greeting: string = "Hello";
Void类型 指定函数没有返回值。只有一个值 void function log(): void {}
Object类型 所有引用类型的基类型。 let obj: Object = { key: "value" };
Array类型 表示由同类型元素组成的集合。 let arr: number[] = [1, 2, 3];
Enum类型 枚举类型,定义一组命名值。 enum Color { Red, Green, Blue } let c: Color = Color.Red;
Union类型 联合类型,由多个类型组成,变量可以是这些类型之一。 `type ID = string
Aliases类型 为匿名类型或已有类型提供别名。 type Point = { x: number, y: number }; let p: Point = { x: 10, y: 20 };

运算符

比较运算符

运算符 说明
=== 如果两个操作数严格相等(不同类型的操作数是不相等的),则返回true。
!== 如果两个操作数严格不相等(不同类型的操作数是不相等的),则返回true。
== 如果两个操作数相等(尝试先转换不同类型的操作数,再进行比较),则返回true。
!= 如果两个操作数不相等(尝试先转换不同类型的操作数,再进行比较),则返回true。
> 如果左操作数大于右操作数,则返回true。
>= 如果左操作数大于或等于右操作数,则返回true。
< 如果左操作数小于右操作数,则返回true。
<= 如果左操作数小于或等于右操作数,则返回true。

算术运算符

运算符 说明
+ 加法
- 减法
* 乘法
/ 除法
% 除法后余数

逻辑运算符

运算符 说明
a && b 逻辑与
a b 逻辑或
! a 逻辑非

常用语句

If语句

const study:boolen = fasle
const work:boolen = fasle

if (study) {
   
  // ...
} else if (work) {
   
  // ...
} else {
   
  // ...
}
AI 代码解读

Switch语句


const expression:string = "game"
switch (expression) {
   
  case "study": 
    // 学习鸿蒙
    // ...
    break; // 可省略
  case "work":
  case "game": 
    // 打游戏逻辑
    // ...
    break; // 可省略
  default:
    // 默认语句
}
AI 代码解读

三元运算符

let money:number = 0
let work = money < 10 ? true : false;
AI 代码解读

for语句

let sum = 0;
for (let i = 0; i < 10; i += 2) {
   
  sum += i;
}
AI 代码解读

For-of语句、While语句、Do-while、Try语句这些和前端一样,就不一一介绍了!

函数

ArKts的函数语法同样和Ts是几乎一致的

  • 函数声明
function add(x: string, y: string): string {
  // 支持js的模板字符串
  return `${x}${y}`;
}
AI 代码解读
  • 可选参数
function getName(name?: string) {
   
  if (name == undefined) {
   
    console.log('我槽!居然没名字');
  } else {
   
    console.log(`大家好, ${
     name}!`);
  }
}
AI 代码解读
  • 返回类型
// 显式指定返回类型
function game(): string {
    return '打游戏'; }

// 推断返回类型为string
function study() {
    return '学习鸿蒙'; }
AI 代码解读
  • 箭头函数
let sum = (x: number, y: number): number => {
   
  return x + y;
}
// 省略写法
let sum = (x: number, y: number): number => x + y
AI 代码解读
  • 函数重载

函数重载是java才具备的能力,然后Arkts也是支持的,这一点非常舒服。

我们只需要为同一个函数写入多个同名但签名不同的函数头,函数实现紧随其后就可以实现函数重载效果

// 定义函数重载
function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any {
   
    return a + b;
}

// 使用函数重载
let sum = add(5, 10);        // 调用第一个重载函数,返回数值 15
let concatenated = add("Hello, ", "World!");  // 调用第二个重载函数,返回字符串 "Hello, World!"

console.log(sum);           // 输出: 15
console.log(concatenated);  // 输出: Hello, World!
AI 代码解读

  • 类的基本定义

与 TypeScript 类似,ArkTS 中使用 class 关键字定义类。类可以包含构造函数、属性和方法。

class Person {
   
    name: string;
    constructor(name: string) {
   
        this.name = name;
    }

    greet(): string {
   
        return `Hello, ${
     this.name}`;
    }
}
AI 代码解读
  • 构造函数与属性初始化

ArkTS 和 TypeScript 一样,支持在构造函数中初始化类的属性。

class Worker {
   
    name: string;
    constructor(name: string) {
   
        this.name = name;
    }
}
AI 代码解读
  • 访问修饰符

ArkTS 与 TypeScript 相同,支持 publicprivateprotected 修饰符。

class Car {
   
    private model: string;
    public year: number;

    constructor(model: string, year: number) {
   
        this.model = model;
        this.year = year;
    }
}
AI 代码解读
  • 方法的声明与实现

与 TypeScript 类似,ArkTS 支持类方法的声明和实现,方法可以有返回类型和参数类型。

class Calculator {
   
  add(a: number, b: number): number {
   
    return a + b;
  }
}
AI 代码解读
  • 接口实现

ArkTS 和 TypeScript 一样,支持类实现接口(implements 关键字),但 ArkTS 的接口实现可能会结合 OpenHarmony 的特性,特别是在设备驱动、硬件接口方面的扩展。

interface Movable {
   
  move(): void;
}

class HJ implements Movable {
   
  move(): void {
   
    console.log("脖子右拧~");
  }
}
AI 代码解读
  • 静态属性与方法

ArkTS 与 TypeScript 一样支持静态属性和方法

class Version {
   
  static version: string = "1.0.0";

  static logVersion(): void {
   
    console.log(this.version);
  }
}
AI 代码解读
  • 泛型类

与 TypeScript 类似,ArkTS 支持泛型类,可以创建更灵活和可重用的类结构。

class Box<T> {
   
  content: T;
  constructor(content: T) {
   
    this.content = content;
  }
}
AI 代码解读

空安全

ArkTS中的所有类型都是不可为空的,因此类型的值不能为空。

let x: number = null;    // 编译时错误
let y: string = null;    // 编译时错误
let z: number[] = null;  // 编译时错误
AI 代码解读

我们可以为空值的变量定义为联合类型T | null。

let x: number | null = null;
x = 1;    // ok
x = null; // ok
if (x != null) {
   
  // 。。。。
}
AI 代码解读

这部分我们简单了解一下即可。

模块机制

ArkTS 模块系统在设计上与 JavaScript(特别是 ES6+ 的模块系统)非常相似,但由于 ArkTS 的特定应用场景和其面向 OpenHarmony 的优化,模块导入机制存在些许不同。

  • 基础模块导入语法
// 导出模块
export const PI = 3.14;
export function calculateArea(radius: number): number {
   
    return PI * radius * radius;
}

// 导入模块
import {
    PI, calculateArea } from './math';
console.log(calculateArea(5));
AI 代码解读
  • 默认导出与命名导出
// 默认导出
export default class Person {
   
    constructor(public name: string) {
   }
}
// 导入
import Person from './person';
AI 代码解读
  • 动态导入
async function hhhhh() {
   
  let n = await import('./say');
  // 。。。。。
}
AI 代码解读

动态import的业务场景和使用实例我们可以详细参考官方api:动态import

  • 导入HarmonyOS SDK的开放能力
import UIAbility from '@ohos.app.ability.UIAbility';
AI 代码解读

ohos.app.ability.UIAbility类似于第三方npm包

当然,它的导入方式也是可以很灵活的

方式一:导入Kit下单个模块的接口能力。例如:
import {
    UIAbility } from '@kit.AbilityKit';

方式二:导入Kit下多个模块的接口能力。例如:
import {
    UIAbility, Ability, Context } from '@kit.AbilityKit';

方式三:导入Kit包含的所有模块的接口能力。例如:
import * as module from '@kit.AbilityKit';
AI 代码解读

从TypeScript快速切换到ArkTS

ArkTS保持了TypeScript基的本语法风格,使得我们可以直接使用TS进行原生应用的开发,但是,为了程序的稳定与安全,官方还是建议我们将将TS代码适配为ArkTS代码。也就是说,如果你的项目使用TS或者你习惯了写TS,最好都了解一些适配规则,方便快速的技术语言切换。

为啥要适配

我们前端的吃饭语言js是一种弱语言,没啥类型限制,因此我们可以非常快速地编写代码。但正因为没啥限制,可能在开发阶段就产生无法预料的bug,比如取值为undefined造成系统崩溃啥的。

也正因如此,TypeScript崛起了,但是它也有一些局限。比如,它不强制要求对变量进行类型标注,导致很多编译时检查无法开展。所以,官方建议适配。

适配规则

这并不是本文要详细学习的内容,大家感兴趣了可以自己看官方api学习。

文档中心

总结

ArkTS 是基于 TypeScript 的扩展语言,因此在基础语法表现方面也和TypeScript几乎是一致的,这让前端几乎没有额外的学习成本。但是要注意的是,ArkTS并不是TypeScript,它内部有一系列针对鸿蒙生态的优化。再者,结合ArkUI,它的写法和TS也还是有一些差异的,但是整体学习起来还是非常轻松的。

目录
打赏
0
1
2
0
98
分享
相关文章
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
85 15
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
84 11
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
123 56
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
143 55
|
2月前
【HarmonyOS Next之旅】ArkTS语法(四) -> 使用限制与扩展
本文介绍了ArkTS语言在生成器函数中的使用限制、变量的双向绑定以及自定义组件成员变量初始化的方式与约束。生成器函数中表达式的使用场景受限,且不能改变状态变量或包含局部变量。事件处理函数不受这些限制。双向绑定通过$$实现,支持基础类型及特定装饰器变量,变更时仅渲染当前组件以提升效率。成员变量初始化支持本地和构造参数两种方式,不同装饰器类型的变量有不同的初始化规则和约束,需根据具体需求选择合适的初始化方法。
124 21
【HarmonyOS Next之旅】基于ArkTS开发(一) -> Ability开发二
本文档介绍了DataAbility开发、FA卡片开发和WantAgent开发三大模块的内容。DataAbility开发涵盖场景介绍、接口说明及开发步骤,支持数据共享与管理;FA卡片开发包括卡片概述、生命周期回调、接口说明及页面设计,助力应用信息前置展示;WantAgent开发则聚焦行为意图封装,提供启动Ability和发布公共事件的功能。文档详细解析了各模块的实现流程与关键代码示例,为开发者提供了全面指导。
82 20
【HarmonyOS NEXT+AI】问答05:ArkTS和仓颉编程语言怎么选?
本文针对学员关于“鸿蒙主推开发语言是ArkTS,为何课程使用仓颉语言”的疑问进行解答。文章回顾了鸿蒙编程语言的发展历程:从早期支持JS和C/C++,到HarmonyOS 2引入Java,再到HarmonyOS 3推出ArkTS,直至HarmonyOS 5(NEXT)引入仓颉语言。仓颉作为华为自研的现代编程语言,具备高效编程、安全可靠、轻松并发和卓越性能等特性,适用于高性能高并发场景及未来AI原生应用开发。文章还探讨了仓颉与ArkTS的关系、应用场景以及是否需要重写现有应用等问题,为开发者选择编程语言提供了参考依据。
188 13
【HarmonyOS NEXT+AI】问答05:ArkTS和仓颉编程语言怎么选?
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发二
本文详细介绍了基于声明式UI开发的健康饮食应用的设计与实现过程。内容涵盖从基础环境搭建到复杂功能实现的全流程,包括创建简单视图、构建布局(如Stack、Flex)、数据模型设计、列表与网格布局构建,以及页面跳转和数据传递等核心功能。 本文通过实际案例深入浅出地解析了声明式UI开发的关键技术和最佳实践,为开发者提供了宝贵的参考。
74 14
什么是声明式UI什么是命令式UI?鸿蒙ArkTS为什么是声明式UI-优雅草卓伊凡
什么是声明式UI什么是命令式UI?鸿蒙ArkTS为什么是声明式UI-优雅草卓伊凡
113 12
什么是声明式UI什么是命令式UI?鸿蒙ArkTS为什么是声明式UI-优雅草卓伊凡
|
2月前
|
【HarmonyOS Next之旅】基于ArkTS开发(一) -> Ability开发一
本文介绍了HarmonyOS中的FA模型及其开发相关内容,包括PageAbility与ServiceAbility的开发方法。FA模型下的Ability分为多种类型,如PageAbility(带UI,用户可见可交互)、ServiceAbility(无UI,在后台提供服务)等。文章详细阐述了PageAbility的生命周期、启动模式及接口使用,并通过代码示例展示了如何启动本地PageAbility和重写生命周期函数。
102 12

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问