【HarmonyOS应用开发】TypeScript快速入门（二）

内容比较长，干货满满，全是实战操作内容，希望耐心观看，如果对你有所帮助，请点个赞！在这里插入图片描述

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

  • JavaScript是一种属于网络的高级脚本语言，已经被广泛用于Web应用开发，常用来为网页添加各式各样的动态功能，为用户提供更流畅美观的浏览效果。
  • TypeScript 是 JavaScript 的一个超集，它扩展了 JavaScript 的语法，通过在JavaScript的基础上添加静态类型定义构建而成，是一个开源的编程语言。
  • ArkTS兼容TypeScript语言，拓展了声明式UI、状态管理、并发任务等能力。

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

在这里插入图片描述
在学习ArkTS声明式的相关语法之前，我们首先学习下TypeScript的基础语法。

一、基础类型

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

1.1 布尔值

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

let isDone: boolean = false;
1.2 数字

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

let decLiteral: number = 2023;let binaryLiteral: number = 0b11111100111;let octalLiteral: number = 0o3747;let hexLiteral: number = 0x7e7;
1.3 字符串

TypeScript里使用 string表示文本数据类型， 可以使用双引号（ "）或单引号（'）表示字符串。

let name: string = "Jacky";name = "Tom";name = 'Mick';
1.4 数组

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

let list: number[] = [1, 2, 3];# 第二种方式是使用数组泛型，Array<元素类型>。let list: Array<number> = [1, 2, 3];
1.5 元组

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

let x: [string, number];x = ['hello', 10]; // OK
x = [10, 'hello']; // Error
1.6 枚举

enum类型是对JavaScript标准数据类型的一个补充，使用枚举类型可以为一组数值赋予友好的名字。

enum Color {Red, Green, Blue};let c: Color = Color.Green;
1.7 Unknown

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

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

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

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

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

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

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

let myFavoriteNumber: string | number;myFavoriteNumber = 'seven';myFavoriteNumber = 7;

二、条件语句

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

2.1 if 语句

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

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

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

var num:number = 12; if (num % 2==0) {console.log('偶数');
} else {console.log('奇数');
}
2.3 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');
}
2.4 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;} 
}

三、函数

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

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

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

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

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

function buildName(firstName: string, lastName?: string) {if (lastName)return firstName + ' ' + lastName;elsereturn firstName;
}let result1 = buildName('Bob');
let result2 = buildName('Bob', 'Adams');
3.3 剩余参数

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

function getEmployeeName(firstName: string, ...restOfName: string[]) {return firstName + ' ' + restOfName.join(' ');
}let employeeName = getEmployeeName('Joseph', 'Samuel', 'Lucas', 'MacKinzie');
3.4 箭头函数

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，后面紧跟类名。类描述了所创建的对象共同的属性和方法。

4.1 类的定义

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

class Person {private name: stringprivate age: numberconstructor(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();
4.2 继承

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

class Employee extends Person {private department: stringconstructor(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 导入其他模块导出的变量、函数、类等。

5.1 导出

任何声明（比如变量，函数，类，类型别名或接口）都能够通过添加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;  }
}
5.2 导入

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

import { NewsData } from '../common/bean/NewsData';

六、迭代器

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

6.1 for…of 语句

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

let someArray = [1, "string", false];for (let entry of someArray) {console.log(entry); // 1, "string", false
}
6.2 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的官方教程（https://www.typescriptlang.org/docs/）。

大家在学习过程中，如果没有搭建TypeScript的开发环境，也可以直接使用在线Playground平台（https://www.typescriptlang.org/play）进行编码练习。已掌握TypeScript编程基础的学员可以跳过本章节的学习，没有接触过TypeScript的同学可以先补齐相关的语法基础，再进入HarmonyOS的相关开发学习之旅。

来源官方文档：https://developer.huawei.com/consumer/cn/training/course/slightMooc/C101667356568959645
访问上面官方文档链接可观看对应视频教程
在这里插入图片描述

系列下一篇，敬请期待。请留下个赞。

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

PreNorm和PostNorm对比

PreNorm和PostNorm对比

要点总结 标准的Transformer使用的是PostNorm 在完全相同的训练设置下Pre Norm的效果要优于Post Norm&#xff0c;这只能显示出Pre Norm更容易训练&#xff0c;因为Post Norm要达到自己的最优效果&#xff0c;不能用跟Pre Norm一样的训练配置&#xff08;比如Pre Norm可以不加…
阅读更多...
有关链表的题目

有关链表的题目

目录 1.环形链表的约瑟夫问题 2.链表的中间节点 3.合并两个有序链表 4.反转链表 5.移除链表元素 1.环形链表的约瑟夫问题 环形链表的约瑟夫问题_牛客题霸_牛客网 (nowcoder.com) 思路&#xff1a;题目给出结构是环形链表&#xff0c;且题目已经定义好了环形链表的结构。 1…
阅读更多...
C#使用TimeSpan对象获取时间间隔

C#使用TimeSpan对象获取时间间隔

目录 一、TimeSpan基础知识 二、实例 一、TimeSpan基础知识 使用TimeSpan对象可以方便地获取两个时间段的间隔。两个时间信息相减后会得到一个TimeSpan对象&#xff0c;该TimeSpan对象代表时间间隔&#xff0c;可以通过TimeSpan对象的Days、Hours、Minutes、Seconds、Millise…
阅读更多...
qt学习：实战 http请求获取qq的吉凶

qt学习：实战 http请求获取qq的吉凶

目录 利用的api是 聚合数据 的qq号码测吉凶 编程步骤 配置ui界面 添加头文件&#xff0c;定义网络管理者和http响应槽函数 在界面的构造函数里创建管理者对象&#xff0c;关联http响应槽函数 实现按钮点击事件 实现槽函数 效果 利用的api是 聚合数据 的qq号码测吉凶 先…
阅读更多...
Chrome单独配置代理的方法

Chrome单独配置代理的方法

Windows Windows上单独对Chrome设置代理&#xff0c;需要在启动时传递参数&#xff0c;具体步骤如下。 在Chrome浏览器的快捷方式上右击&#xff0c;进入属性。在 快捷方式 标签下找到 目标 项目&#xff0c;在最后添加 –proxy-server“socks5://xxx.xxx.xx.xx:xxxx” 如果要…
阅读更多...
亚马逊测评：卖家如何操作测评，安全高效（自养号测评)

亚马逊测评：卖家如何操作测评，安全高效（自养号测评)

亚马逊测评的作用在于让用户更真实、清晰、快捷地了解产品以及产品的使用方法和体验。通过买家对产品的测评&#xff0c;也可以帮助厂商和卖家优化产品缺陷&#xff0c;提高用户的使用体验。这进而帮助他们获得更好的销量&#xff0c;并更深入地了解市场需求。亚马逊测评在满足…
阅读更多...
《动手学深度学习(PyTorch版)》笔记4.4

《动手学深度学习(PyTorch版)》笔记4.4

注&#xff1a;书中对代码的讲解并不详细&#xff0c;本文对很多细节做了详细注释。另外&#xff0c;书上的源代码是在Jupyter Notebook上运行的&#xff0c;较为分散&#xff0c;本文将代码集中起来&#xff0c;并加以完善&#xff0c;全部用vscode在python 3.9.18下测试通过。…
阅读更多...
盲盒App小程序开发：引领未来购物新潮流

盲盒App小程序开发：引领未来购物新潮流

随着科技的不断发展&#xff0c;我们的购物方式也在不断改变。近年来&#xff0c;盲盒购物逐渐成为了一种新型的消费模式&#xff0c;受到了广大消费者的热烈欢迎。为了满足消费者的需求&#xff0c;越来越多的企业开始涉足盲盒App的开发。本文将探讨盲盒App开发的意义、前景以…
阅读更多...
Redis6基础知识梳理~

Redis6基础知识梳理~

初识NOSQL&#xff1a; NOSQL是为了解决性能问题而产生的技术&#xff0c;在最初&#xff0c;我们都是使用单体服务器架构&#xff0c;如下所示&#xff1a; 随着用户访问量大幅度提升&#xff0c;同时产生了大量的用户数据&#xff0c;单体服务器架构面对着巨大的压力 NOSQL解…
阅读更多...
Linux第36步_创建正点原子的TF-A工作区

Linux第36步_创建正点原子的TF-A工作区

创建正点原子的TF-A工作区&#xff0c;目的是想查看正点原子的设备树文件“stm32mp157d-atk.dts”和设备树头文件“stm32mp157d-atk.dtsi”&#xff0c;了解设备树是什么样子&#xff0c;为后期基于“ST公司的源码”创建自己的设备树提供参考&#xff0c;同时也是为了学习移植u…
阅读更多...
【Java】SpringMVC路径写法

【Java】SpringMVC路径写法

1、多级路径 ✅类路径和方法路径都可以写成多级 ✅其中&#xff0c;类路径写在方法路径前面 ✅与Servlet不同&#xff0c;SpringMVC中写不写“/”都可以 RequestMapping("/hello/t1") RestController public class HelloSpring {RequestMapping( value "world…
阅读更多...
Java程序设计实验7 | IO流

Java程序设计实验7 | IO流

*本文是博主对Java各种实验的再整理与详解&#xff0c;除了代码部分和解析部分&#xff0c;一些题目还增加了拓展部分&#xff08;⭐&#xff09;。拓展部分不是实验报告中原有的内容&#xff0c;而是博主本人自己的补充&#xff0c;以方便大家额外学习、参考。 目录 一、实验…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023