HarmonyOS4.0从零开始的开发教程02初识ArkTS开发语言（上）

news2024/11/29 20:35:45

HarmonyOS（二）初识ArkTS开发语言（上）之TypeScript入门

前言

Mozilla创造了JS，Microsoft创建了TS，而Huawei进一步推出了ArkTS。因此在学习使用ArkTS前，需要掌握基本的TS开发技能。

从最初的基础的逻辑交互能力，到具备类型系统的高效工程开发能力，再到融合声明式UI、多维状态管理等丰富的应用开发能力，共同组成了相关的演进脉络。

ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript（简称TS）的基础上，扩展了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用。TS是JavaScript（简称JS）的超集，ArkTS则是TS的超集。ArkTS会结合应用开发和运行的需求持续演进，包括但不限于引入分布式开发范式、并行和并发能力增强、类型系统增强等方面的语言特性。本期我们结合JS和TS以及相关的开发框架的发展，为大家介绍ArkTS的起源和演进思路。

ArkTS介绍

ArkTS是HarmonyOS优选的主力应用开发语言。它在TypeScript（简称TS）的基础上，匹配ArkUI框架，扩展了声明式UI、状态管理等相应的能力，让开发者以更简洁、更自然的方式开发跨端应用。要了解什么是ArkTS，我们首先要了解下ArkTS、TypeScript和JavaScript之间的关系：

  1. JavaScript是一种属于网络的高级脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。

  2. TypeScript 是 JavaScript 的一个超集，它扩展了 JavaScript 的语法，通过在JavaScript的基础上添加静态类型定义构建而成，是一个开源的编程语言。

  3. ArkTS兼容TypeScript语言，拓展了声明式UI、状态管理、并发任务等能力。

由此可知，TypeScript是JavaScript的超集，ArkTS则是TypeScript的超集，他们的关系如下图所示：

在这里插入图片描述

在学习ArkTS声明式的相关语法之前，下面我们首先学习下TypeScript的基础语法。

TypeScript快速入门

下面先从TS最基础的基础类型讲起。

基础类型

TypeScript支持一些基础的数据类型，如布尔型、数组、字符串等，下文举例几个较为常用的数据类型，我们来了解下他们的基本使用。

布尔值
  • TypeScript中可以使用boolean来表示这个变量是布尔值，可以赋值为true或者false。
let isDone: boolean = false;

数字类型

TypeScript里的所有数字都是浮点数，这些浮点数的类型是 number。除了支持十进制，还支持二进制、八进制、十六进制。

let decLiteral: number = 2023;
let binaryLiteral: number = 0b11111100111;
let octalLiteral: number = 0o3747;
let hexLiteral: number = 0x7e7;
字符串类型
  • TypeScript里使用 string表示文本数据类型， 可以使用双引号（ "）或单引号（'）表示字符串。
let name: string = "Jacky";
name = "Tom";
name = 'Music';
数组

TypeScrip有两种方式可以定义数组。 第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组。

let list: number[] = [1, 2, 3, 4];

第二种方式是使用数组泛型，Array<元素类型>。

let list: Array<number> = [1, 2, 3, 4];
元组类型

元组类型允许表示一个已知元素数量和类型的数组，各元素的类型不必相同。 比如，你可以定义一对值分别为 string和number类型的元组。

let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error
枚举类型
  • enum类型是对JavaScript标准数据类型的一个补充，使用枚举类型可以为一组数值赋予友好的名字。
enum Color {Red, Green, Blue};
let c: Color = Color.Green;
Unknown类型

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。那么我们可以使用unknown类型来标记这些变量。

let notSure: unknown = 4;
notSure = 'maybe a string instead';
notSure = false;
Void类型

当一个函数没有返回值时，你通常会见到其返回值类型是 void。

function test(): void {
   console.log('This is function is void');
}
Null 和 Undefined

TypeScript里，undefined和null两者各自有自己的类型分别叫做undefined和null。

let u: undefined = undefined;
let n: null = null;
联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种。

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
条件语句

条件语句用于基于不同的条件来执行不同的动作。TypeScript 条件语句是通过一条或多条语句的执行结果（True 或 False）来决定执行的代码块。

if 语句

TypeScript if 语句由一个布尔表达式后跟一个或多个语句组成。

var num:number = 5
if (num > 0) { 
   console.log('数字是正数') 
}
if…else 语句

一个 if 语句后可跟一个可选的 else 语句，else 语句在布尔表达式为 false 时执行。

var num:number = 12; 
if (num % 2==0) { 
    console.log('偶数'); 
} else {
    console.log('奇数'); 
}
if…else if…else 语句

if…else if…else 语句在执行多个判断条件的时候很有用。

var num:number = 2 
if(num > 0) { 
    console.log(num+' 是正数') 
} else if(num < 0) { 
    console.log(num+' 是负数') 
} else { 
    console.log(num+' 为0') 
}
switch…case 语句

一个 switch 语句允许测试一个变量等于多个值时的情况。每个值称为一个 case，且被测试的变量会对每个 switch case 进行检查。

var grade:string = 'A'; 
switch(grade) { 
    case 'A': { 
        console.log('优'); 
        break; 
    } 
    case 'B': { 
        console.log('良'); 
        break; 
    } 
    case 'C': {
        console.log('及格'); 
        break;    
    } 
    case 'D': { 
        console.log('不及格'); 
        break; 
    }  
    default: { 
        console.log('非法输入'); 
        break;              
    } 
}

这些就是我们常用的条件语句，接下来我们继续学习TS的函数。

函数

函数是一组一起执行一个任务的语句，函数声明要告诉编译器函数的名称、返回类型和参数。TypeScript可以创建有名字的函数和匿名函数，其创建方法如下：

// 有名函数
function add(x, y) {
  return x + y;
}

// 匿名函数
let myAdd = function (x, y) {
  return x + y;
};
为函数定义类型

为了确保输入输出的准确性，我们可以为上面那个函数添加类型：

// 有名函数：给变量设置为number类型
function add(x: number, y: number): number {
  return x + y;
}

// 匿名函数：给变量设置为number类型
let myAdd = function (x: number, y: number): number {
  return x + y;
};
可选参数

在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。 比如，我们想让lastName是可选的：

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + ' ' + lastName;
    else
        return firstName;
}

let result1 = buildName('Bob');
let result2 = buildName('Bob', 'Adams');
剩余参数

剩余参数会被当做个数不限的可选参数。 可以一个都没有，同样也可以有任意个。 可以使用省略号（ …）进行定义：

function getEmployeeName(firstName: string, ...restOfName: string[]) {
  return firstName + ' ' + restOfName.join(' ');
}

let employeeName = getEmployeeName('Joseph', 'Samuel', 'Lucas', 'MacKinzie');
箭头函数

ES6版本的TypeScript提供了一个箭头函数，它是定义匿名函数的简写语法，用于函数表达式，它省略了function关键字。箭头函数的定义如下，其函数是一个语句块：

( [param1, parma2,…param n] )=> {
    // 代码块
}

其中，括号内是函数的入参，可以有0到多个参数，箭头后是函数的代码块。我们可以将这个箭头函数赋值给一个变量，如下所示：

let arrowFun = ( [param1, parma2,…param n] )=> {
    // 代码块
}

如何要主动调用这个箭头函数，可以按如下方法去调用：

arrowFun(param1, parma2,…param n)

接下来我们看看如何将我们熟悉的函数定义方式转换为箭头函数。我们可以定义一个判断正负数的函数，如下：

function testNumber(num: number) {
  if (num > 0) {
    console.log(num + ' 是正数');
  } else if (num < 0) {
    console.log(num + ' 是负数');
  } else {
    console.log(num + ' 为0');
  }
}

其调用方法如下：

testNumber(1)   //输出日志：1 是正数

如果将这个函数定义为箭头函数，定义如下所示：

let testArrowFun = (num: number) => {
  if (num > 0) {
    console.log(num + ' 是正数');
  } else if (num < 0) {
    console.log(num + ' 是负数');
  } else {
    console.log(num + ' 为0');
  }
}

其调用方法如下：

testArrowFun(-1)   //输出日志：-1 是负数

后面，我们在学习HarmonyOS应用开发时会经常用到箭头函数。例如，给一个按钮添加点击事件，其中onClick事件中的函数就是箭头函数。

Button("Click Now")
  .onClick(() => {
    console.info("Button is click")
  })
类

TypeScript支持基于类的面向对象的编程方式，定义类的关键字为 class，后面紧跟类名。类描述了所创建的对象共同的属性和方法。

1.类的定义

例如，我们可以声明一个Person类，这个类有3个成员：一个是属性（包含name和age)，一个是构造函数，一个是getPersonInfo方法，其定义如下所示。

class Person {
  private name: string
  private age: number

  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }

  public getPersonInfo(): string {
    return `My name is ${this.name} and age is ${this.age}`;
  }
}

通过上面的Person类，我们可以定义一个人物Jacky并获取他的基本信息，其定义如下：

let person1 = new Person('Jacky', 18);
person1.getPersonInfo();
2.继承

继承就是子类继承父类的特征和行为，使得子类具有父类相同的行为。TypeScript中允许使用继承来扩展现有的类，对应的关键字为extends。

class Employee extends Person {
  private department: string

  constructor(name: string, age: number, department: string) {
    super(name, age);
    this.department = department;
  }

  public getEmployeeInfo(): string {
    return this.getPersonInfo() + ` and work in ${this.department}`;
  }
}

通过上面的Employee类，我们可以定义一个人物Tom，这里可以获取他的基本信息，也可以获取他的雇主信息，其定义如下：

let person2 = new Employee('Tom', 28, 'HuaWei');
person2.getPersonInfo();
person2.getEmployeeInfo();

在TypeScript中，有public、private、protected修饰符，其功能和具体使用场景大家可以参考TypeScript的相关学习资料，进行拓展学习。

模块

随着应用越来越大，通常要将代码拆分成多个文件，即所谓的模块（module）。模块可以相互加载，并可以使用特殊的指令 export 和 import 来交换功能，从另一个模块调用一个模块的函数。

两个模块之间的关系是通过在文件级别上使用 import 和 export 建立的。模块里面的变量、函数和类等在模块外部是不可见的，除非明确地使用 export 导出它们。类似地，我们必须通过 import 导入其他模块导出的变量、函数、类等。

导出

任何声明（比如变量，函数，类，类型别名或接口）都能够通过添加export关键字来导出，例如我们要把NewsData这个类导出，代码示意如下：

export class NewsData {
  title: string;
  content: string;
  imagesUrl: Array<NewsFile>;
  source: string;

  constructor(title: string, content: string, imagesUrl: Array<NewsFile>, source: string) {
    this.title = title;
    this.content = content;
    this.imagesUrl = imagesUrl;
    this.source = source;
  }
}
导入

模块的导入操作与导出一样简单。 可以使用以下 import形式之一来导入其它模块中的导出内容。

import { NewsData } from '../common/bean/NewsData';
迭代器

当一个对象实现了Symbol.iterator属性时，我们认为它是可迭代的。一些内置的类型如Array，Map，Set，String，Int32Array，Uint32Array等都具有可迭代性。

for…of 语句

for…of会遍历可迭代的对象，调用对象上的Symbol.iterator方法。 下面是在数组上使用for…of的简单例子

let someArray = [1, "string", false];

for (let entry of someArray) {
    console.log(entry); // 1, "string", false
}
for…of vs. for…in 语句

for…of和for…in均可迭代一个列表，但是用于迭代的值却不同：for…in迭代的是对象的键，而for…of则迭代的是对象的值。

let list = [4, 5, 6];

for (let i in list) {
    console.log(i); // "0", "1", "2",
}

for (let i of list) {
    console.log(i); // "4", "5", "6"
}

学习总结

TypeScript是一个开源的编程语言，本章节只介绍了TypeScript的基础语法知识，更多内容大家可以参考TypeScript的官方教程。大家在学习过程中，如果没有搭建TypeScript的开发环境，也可以直接使用在线Playground平台进行编码练习。已掌握TypeScript编程基础的学员可以跳过本章节的学习，没有接触过TypeScript的同学可以先补齐相关的语法基础，再进入HarmonyOS的相关开发学习之旅。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1290848.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Kafka 的消息格式：了解消息结构与序列化

Kafka 的消息格式：了解消息结构与序列化

Kafka 作为一款高性能的消息中间件系统&#xff0c;其消息格式对于消息的生产、传输和消费起着至关重要的作用。本篇博客将深入讨论 Kafka 的消息格式&#xff0c;包括消息的结构、序列化与反序列化&#xff0c;以及一些常用的消息格式选项。通过更丰富的示例代码和深入的解析&…
阅读更多...
人工智能-编译器和解释器

人工智能-编译器和解释器

编译器和解释器 命令式编程使用诸如print、“”和if之类的语句来更改程序的状态。 考虑下面这段简单的命令式程序&#xff1a; def add(a, b):return a bdef fancy_func(a, b, c, d):e add(a, b)f add(c, d)g add(e, f)return gprint(fancy_func(1, 2, 3, 4)) 10 Python…
阅读更多...
【分布式微服务专题】从单体到分布式（一、SpringCloud项目初步升级）

【分布式微服务专题】从单体到分布式（一、SpringCloud项目初步升级）

目录 前言阅读对象阅读导航前置知识笔记正文一、单体服务介绍二、服务拆分三、分布式微服务升级前的思考3.1 关于SpringBoot/SpringCloud的思考【有点门槛】 四、SpringCloud升级整合4.1 新建父子项目 学习总结感谢 前言 从本节课开始&#xff0c;我将自己手写一个基于SpringC…
阅读更多...
谷歌刚刚发布了Gemini 1.0，采用了OpenAI的GPT4

谷歌刚刚发布了Gemini 1.0，采用了OpenAI的GPT4

我的新书《Android App开发入门与实战》已于2020年8月由人民邮电出版社出版&#xff0c;欢迎购买。点击进入详情 对于谷歌和安卓来说&#xff0c;这是一个重要时刻。谷歌刚刚发布了 Gemini 1.0&#xff0c;这是其最新的LLM&#xff0c;它采用了 OpenAI 的 GPT4。 共有三种不同…
阅读更多...
WPF仿网易云搭建笔记(0):项目搭建

WPF仿网易云搭建笔记(0):项目搭建

文章目录 前言项目地址项目Nuget包搭建项目初始化项目架构App.xaml引入MateralDesign资源包 项目初步分析将标题栏去掉DockPanel初步布局 资源字典举例 结尾 前言 最近在找工作&#xff0c;发现没有任何的WPF可以拿的出手的工作经验&#xff0c;打算仿照网易云搭建一个WPF版本…
阅读更多...
深度解析 Kafka 中的 Offset 管理与最佳实践

深度解析 Kafka 中的 Offset 管理与最佳实践

Kafka 中的 Offset&#xff08;偏移量&#xff09;是消息处理的关键元素&#xff0c;对于保证消息传递的可靠性和一致性至关重要。本篇博客将深度解析 Kafka 中的 Offset 管理机制&#xff0c;并提供丰富的示例代码&#xff0c;让你更全面地理解 Offset 的原理、使用方法以及最…
阅读更多...
鸿蒙Harmony ArkUI十大开源项目

鸿蒙Harmony ArkUI十大开源项目

一 OH哔哩 https://gitee.com/ohos_port/ohbili 项目简介 【OH哔哩】是一款基于OpenHarmony系统ArkUI框架开发的哔哩哔哩动画第三方客户端 用到的三方库 bilibili-API-collect 哔哩哔哩-API收集整理ohos_ijkplayer 基于FFmpeg的视频播放器PullToRefresh 下拉刷新、上拉加载组件…
阅读更多...
html通过CDN引入Vue组件抽出复用

html通过CDN引入Vue组件抽出复用

html通过CDN引入Vue组件抽出复用 近期遇到个需求&#xff0c;就是需要在.net MVC的项目中&#xff0c;对已有的项目的首页进行优化&#xff0c;也就是写原生html和js。但是咱是一个写前端的&#xff0c;写html还可以&#xff0c;.net的话&#xff0c;开发也不方便&#xff0c;还…
阅读更多...
CleanMyMac X4.15.0最新官方和谐版下载

CleanMyMac X4.15.0最新官方和谐版下载

Mac系统进行文件清理&#xff0c;一般是直接将文件拖动入“废纸篓”回收站中&#xff0c;然后通过清理回收站&#xff0c;就完成了一次文件清理的操作&#xff0c;但是这么做并无法保证文件被彻底删除了&#xff0c;有些文件通过一些安全恢复手段依旧是可以恢复的&#xff0c;那…
阅读更多...
持续集成交付CICD： Sonarqube REST API 查找与新增项目

持续集成交付CICD： Sonarqube REST API 查找与新增项目

目录 一、实验 1.SonarQube REST API 查找项目 2.SonarQube REST API 新增项目 一、实验 1.SonarQube REST API 查找项目 &#xff08;1&#xff09;Postman测试 转换成cURL代码 &#xff08;2&#xff09;Jenkins添加凭证 &#xff08;3&#xff09;修改流水线 pipeline…
阅读更多...
解决finalshell右键选择粘贴后出现直接执行的问题

解决finalshell右键选择粘贴后出现直接执行的问题

文章目录 已经找到问题原因我的问题错误的解决 已经找到问题原因 复制的时候&#xff0c;只复制名字&#xff0c;不要复制后面多出来的东西&#xff0c;不然会自动加上回车换行 我的问题 我当时是想通过 ls -l 查出jdk的文件后&#xff0c; 复制文件名就不用看着敲了&#x…
阅读更多...
李宏毅bert记录

李宏毅bert记录

一、自监督学习&#xff08;Self-supervised Learning&#xff09; 在监督学习中&#xff0c;模型的输入为x&#xff0c;若期望输出是y&#xff0c;则在训练的时候需要给模型的期望输出y以判断其误差——有输入和输出标签才能训练监督学习的模型。 自监督学习在没有标注的训练…
阅读更多...
U-boot(八):官方uboot移植

U-boot(八):官方uboot移植

本文主要探讨从ubboot官方移植uboot到x210。 基础 确定设备的配置文件 通过board.cfg中的cpu型号(s5pc1xx)确定设备的配置文件 头文件:include/configs/s5p_goni.h cpu: u-boot-2013.10\arch\arm\cpu\armv7 board: u-boot-2013.10\b…
阅读更多...
AI 绘画 | Stable Diffusion 动漫人物真人化

AI 绘画 | Stable Diffusion 动漫人物真人化

前言 如何让一张动漫人物变成真实系列人物？Stable Diffusion WebUI五步即可实现。快来使用AI绘画打开异世界的大门吧！！！ 动漫真人化 首先在图生图里上传一张二次元动漫人物图片，然后选择一个真实系人物画风的大模型，最后点击DeepBooru 反推，自动填充提示词，调整重绘…
阅读更多...
CleanMyMac x4.15软件应用程序永久使用

CleanMyMac x4.15软件应用程序永久使用

许多刚从Windows系统转向Mac系统怀抱的用户&#xff0c;一开始难免不习惯&#xff0c;因为Mac系统没有像Windows一样的C盘、D盘&#xff0c;分盘分区明显。因此这也带来了一些问题&#xff0c;关于Mac的磁盘的清理问题&#xff0c;怎么进行清理&#xff1f;怎么确保清理的干净&…
阅读更多...
系统设计-缓存介绍

系统设计-缓存介绍

该图说明了我们在典型架构中缓存数据的位置。 沿着流程有多个层次。 客户端应用程序&#xff1a;HTTP 响应可以由浏览器缓存。我们第一次通过 HTTP 请求数据&#xff0c;返回时在 HTTP 标头中包含过期策略&#xff1b;我们再次请求数据&#xff0c;客户端应用程序首先尝试从浏…
阅读更多...
04 ECharts基础入门

04 ECharts基础入门

文章目录 一、ECharts介绍1. 简介2. 相关网站3. HTML引入方式4. 基本概念 二、常见图表1. 柱状图2. 折线图3. 饼图4. 雷达图5. 地图 三、应用1. 动画2. 交互 一、ECharts介绍 1. 简介 ECharts是一个使用JavaScript实现的开源可视化库&#xff0c;用于生成各种图表和图形。 EC…
阅读更多...
确定TME浸润模式的TMEscore包（胃癌）

确定TME浸润模式的TMEscore包（胃癌）

步骤学习&#xff1a; 1&#xff0c;基因筛选&#xff1a; 作者使用先前研究得出的 244 肿瘤免疫相关基因&#xff08;244里有AB两个细分亚集&#xff09;&#xff0c;对特征基因进行缩减。从多个免疫治疗队列中获取这些基因的重要性特征。&#xff08;TCGA-SKCM、GSE78220、…
阅读更多...
layui实现下拉框多选

layui实现下拉框多选

引用layui第三方扩展实现下拉框选择渲染 第三方插件地址xmSelect下拉多选 xmSelect 实现效果 //第三方扩展插件 <script type"text/javascript" src"${ctx }/config/layui/dist/xm-select.js"></script> //jquery渲染 <script type&qu…
阅读更多...
微服务的利与弊

微服务的利与弊

一、前言 自从大多数web架构从单体演进到服务拆分&#xff0c;到微服务一统天下的几年来&#xff0c;应该没有web应用不是微服务架构的吧。最开始是阿里的doubble分层架构&#xff0c;到后来的SpringCloud全家桶&#xff0c;还有各个大厂自己定义的一套服务治理框架。微服务无…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023