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 = '溜了溜了,学个毛线';

常量声明

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

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

类型

类型名称 描述 示例值
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 {
   
  // ...
}

Switch语句


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

三元运算符

let money:number = 0
let work = money < 10 ? true : false;

for语句

let sum = 0;
for (let i = 0; i < 10; i += 2) {
   
  sum += i;
}

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

函数

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

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

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

函数重载是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!

  • 类的基本定义

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

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

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

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

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

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

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

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

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

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

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

interface Movable {
   
  move(): void;
}

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

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

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

  static logVersion(): void {
   
    console.log(this.version);
  }
}
  • 泛型类

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

class Box<T> {
   
  content: T;
  constructor(content: T) {
   
    this.content = content;
  }
}

空安全

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

let x: number = null;    // 编译时错误
let y: string = null;    // 编译时错误
let z: number[] = null;  // 编译时错误

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

let x: number | null = null;
x = 1;    // ok
x = null; // ok
if (x != null) {
   
  // 。。。。
}

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

模块机制

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));
  • 默认导出与命名导出
// 默认导出
export default class Person {
   
    constructor(public name: string) {
   }
}
// 导入
import Person from './person';
  • 动态导入
async function hhhhh() {
   
  let n = await import('./say');
  // 。。。。。
}

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

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

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';

从TypeScript快速切换到ArkTS

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

为啥要适配

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

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

适配规则

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

文档中心

总结

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

相关文章
|
19天前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS三
本文介绍了ArkTS的基础语法,包括常量、命名规则、数组及其常用函数,以及函数的定义与使用,涵盖匿名函数和箭头函数的区别。通过具体示例,帮助读者快速掌握ArkTS编程技巧,踏上Harmony OS开发之旅。君志所向,一往无前!
37 1
Harmony OS开发-ArkTS三
|
2月前
|
数据安全/隐私保护
【HarmonyOS——ArkTS语言】面向对象【合集】
【ArkTS语言-HarmonyOS】面向对象【合集】本次实验,我们在utils目录中创建了MyClass.ets和MyConfig.ets文件,在此过程中定义了Config接口和Color枚举。同时,我们实现了Auth类及其子类WechatAuth和AlipayAuth,从而深入了解了面向对象编程在HarmonyOS开发中的应用。在实验中,我们学会了如何遵循接口规范来实现类的功能,并通过继承机制来扩展类的行为。通过这些实践,我们完成了用户创建、密码设置以及登录操作。
67 3
|
2月前
|
UED
【HarmonyOS——ArkTS语言】计算器的实现【合集】
【ArkTS语言-HarmonyOS】计算器的实现【合集】组件,点击等号后计算函数高效解析表达式并给出准确结果,达成核心功能要求。错误提示不够详尽,难以助力用户快速定位输入错误;响应式设计不足,在不同屏幕规格下适配性差。总体而言,本次实验已成功构建起基本功能框架,后续将针对上述问题深入探究优化方案,不断打磨细节,在完善计算器功能与提升用户体验的道路上持续精进,进而提升自身编程与应用开发的综合能力水平。利用按钮组件顺利完成布局设计,数字、运算符及功能按钮排列有序,操作逻辑清晰直观。
106 2
|
1天前
|
IDE 程序员 编译器
鸿蒙开发:ArkTs语言注释
关于注释,有一点需要注意,那就是,注释,不会被编译器或解释器执行,而本小节的重点并不是简单的教大家注释如何去写,而是在实际的项目中,我们能够真正的把注释投入到实际的开发中。
35 18
鸿蒙开发:ArkTs语言注释
|
4月前
|
JavaScript 安全 前端开发
【HarmonyOS开发】ArkTS基础语法及使用(鸿蒙开发基础教程)
【HarmonyOS开发】ArkTS基础语法及使用(鸿蒙开发基础教程)
521 4
|
1天前
|
存储 Java 开发者
鸿蒙开发:ArkTs语言变量和常量
变量是一种用于存储数据的容器,并且其存储的数据值可以在程序执行过程中被改变,变量通常有一个名字(标识符),用于在程序中引用它。
|
22天前
|
JavaScript 编译器 开发工具
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
59 2
【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
|
2月前
|
存储 人工智能 JavaScript
Harmony OS开发-ArkTS语言速成二
本文介绍了ArkTS基础语法,包括三种基本数据类型(string、number、boolean)和变量的使用。重点讲解了let、const和var的区别,涵盖作用域、变量提升、重新赋值及初始化等方面。期待与你共同进步!
136 47
Harmony OS开发-ArkTS语言速成二
|
19天前
|
前端开发 JavaScript 程序员
HarmonyOS NEXT开发-ArkTS五
本文介绍了ArkTS中的联合类型和枚举类型,讲解了定义与使用方法,并详细阐述了模块的导出与导入(包括静态导入、动态导入及HarmonyOS SDK的开放能力导入),帮助开发者更好地理解和应用这些特性。君志所向,一往无前!
21 0
HarmonyOS NEXT开发-ArkTS五
|
19天前
|
人工智能 Java 程序员
HarmonyOS NEXT开发-ArkTS四
本文介绍了面向对象编程中的“类”和“对象”概念:类是创建对象的蓝图,定义属性和方法;对象是类的具体实例,通过new关键字创建,具有类定义的所有特征。构造函数用于初始化对象属性,确保每个实例都能正确设置初始状态。希望这些内容能帮助你更好地理解面向对象编程的核心思想。 (239字符)
15 0
HarmonyOS NEXT开发-ArkTS四

热门文章

最新文章

  • 1
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
  • 2
    uniapp 极速上手鸿蒙开发
  • 3
    【04】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-正确安装鸿蒙SDK-结构目录介绍-路由介绍-帧动画(ohos.animator)书写介绍-能够正常使用依赖库等-ArkUI基础组件介绍-全过程实战项目分享-从零开发到上线-优雅草卓伊凡
  • 4
    EMAS 性能分析全面适配HarmonyOS NEXT,开启原生应用性能优化新纪元
  • 5
    鸿蒙开发:了解@Builder装饰器
  • 6
    鸿蒙开发:wrapBuilder传递参数
  • 7
    鸿蒙web加载本地网页资源异常
  • 8
    【01】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-优雅草卓伊凡拟开发一个一站式家政服务平台-前期筹备-暂定取名斑马家政软件系统-本项目前端开源-服务端采用优雅草蜻蜓Z系统-搭配ruoyi框架admin后台-全过程实战项目分享-从零开发到上线
  • 9
    鸿蒙H5离线包技术分享
  • 10
    【02】鸿蒙实战应用开发-华为鸿蒙纯血操作系统Harmony OS NEXT-项目开发实战-准备工具安装-编译器DevEco Studio安装-arkts编程语言认识-编译器devco-鸿蒙SDK安装-模拟器环境调试-hyper虚拟化开启-全过程实战项目分享-从零开发到上线-优雅草卓伊凡