HarmonyOS开发(二):TypeScript入门

1、编程语言介绍

ArkTS是HarmonyOS主推的应用开发语言,它是在TypeScript语言的基础之上,匹配ArkUI框架,扩展了声明式UI、状态管理等相应的能力,让开发者以更简洁、更自然的方式开发跨端应用。

ArkTS、TypeScript和JavaScript之间的关系:

官方提供的关系图示如下:

  • JavaScript:网络高级脚本语言,广泛用于Web应用,为网页提供各式各样的交互功能。
  • TypeScript:JavaScript的一个超集,在JavaScript的基础上添加了静态类型定义,是一个开源的编程语言。
  • ArkTS:兼容TypeScript语言,拓展了声明式UI、状态管理、并发任务等能力。

如上所示,在学习ArkTS之前有必须先了解TypeScript的相关知识

2、TypeScript的基础入门

2.1、基础类型

TypeScript支持基础数据类型:布尔、数组、字符串等。

2.1.1、布尔值

使用boolean表示,它可以赋值为true和false

let isShow: boolean = false;

2.1.2、数字

在TypeScript中所有数字都是浮点数,类型为number,支持十进制、二进制,八进制、十六进制表示。

// 十进制表示
let decNum: number = 2023;
// 二进制表示
let binaryNum: number = 0b11111100111;
// 八进制表示
let octalNum: number = 0o3747;
// 十六进制表示
let hexNum: number = 0x7e7;

2.1.3、字符串

使用string表示文字数据类型,可以使用"(双引号)或者'(单引号)来表示

let username: string = "张三";
name = "李四";
name = '王五'

2.1.3、数组

在TypeScript中,有两种方式来定义数组。方式一:在元素类型后加上[],表示此类型的数组;方式二:使用数组泛型,Array<元素类型>

// 在元素类型后加上[]表示数组
let arr1: number[] = [1,2,3];
// 使用数组泛型
let arr2: Array<number> = [4,5,6];

2.1.4、元组

元组用来表示一个已知元素数量和对应元素类型的数组。与数组不同的是,它的每一个元素类型可以不一样;元素的数量是固定的。

// 定义一个元组,它有两个元素组成,第一个元素类型是string,第二个元素类型是number
let t: [string, number];
// 对元组进行赋值
t = ['张三', 100];    // 这个是正确的,元素个数与各元素的类型都匹配
// t = [100, '李四'];    // 这个是错误的,元素个数匹配,但是各元素的类型不匹配

2.1.5、枚举

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

enum Color {Red, Green, Blue};
let c1: Color = Color.Blue;

2.1.6、Unknown

有时在编程阶段还不清楚变量类型,在这种情况下可以为变量指定类型为unknown

let x: unknown = 100;
x = '张三';
x = true;

2.1.7、Void

当一个函数没有返回值时,可以把返回值类型置为void

function test(): void {console.log('This is a log');
}

2.1.8、Null和Undefined

在TypeScript中,undefined和null分别有对应的类型为undefined和null

let u: undefined = undefined;
let n: null = null;

2.1.8、联合类型

联合类型表示变量可以取多种指定类型中的任一种

let myvar: string | number;
myvar = '张三';
myvar = 100;

2.2、条件语句

通过条件语句可以实现基于不同的条件来执行不同的动作。

2.2.1、if语句

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

var num: number = 5;
if (num > 0) {console.log('数字大于0');
}

2.2.2、if...else语句

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

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

2.2.3、if...else if...else语句

多路条件判断时常常使用这种结构进行判断

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

2.2.4、switch...case语句

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

注意:1、每个case 后都有一个break,它不是必须的,但是可以防止测试的穿透;2、最后加了一个default,不是必须的,但是可以防止未考虑到的case

let grade: string = 'A';// 对grade进行测试
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;}
}

2.3、函数

函数用为封装一组一起执行一个任务的语句,在需要执行这一组语句的地方直接调用封装数的函数即可,函数的声明告诉编译器函数的名称、返回类型和参数。在TypeScript中可以创建有名函数和匿名函数。

// 有名函数
function add(x, y) {return x + y;
}// 匿名函数,把函数赋给一个变量,调用时直接调用这个变量
let myAdd = function(x, y) {return x + y;
};

2.3.1、为函数定义类型

为了保证输入的准确可以为函数添加类型信息

// 有名函数
function add(x: number, y: number): number {return x + y;
}// 匿名函数,把函数赋给一个变量,调用时直接调用这个变量
let myAdd = function(x: number, y: number): number {return x + y;
};

2.3.2、可选参数

在TypeScript中可以在参数后添加?实现可选参数功能,在调用函数时对于可选参数是不要求一定传入值的

// lastName这个参数是一个可选参数
function getFullName(firstName: string, lastName?: string) {if(lastName)return firstName + ' ' + lastName;elsereturn firstName;
}let result1 = getFullName("张");
let result2 = getFullName('李','四');

2.3.3、剩余参数

剩余参数会被当作个数不限的可选参数,它可以一个都没有也可以有多个,使用...进行定义

function getHobbies(name: string, ...hobbies: stirng[]) {return name + '=>' + hobbies.join(' '); 
}let hobbies = getHobbies("张三", '篮球', '足球', '音乐');

2.3.4、箭头函数

ES6版本的TypeScript提供了箭头函数,它是定义匿名函数的简写语法,用于函数表达式,省略了function关键字

格式如下:

([param1,param2,...,paramn]) => {// 代码块
}

其中括号内是函数的入参,可以是0个或多个参数,箭头(=>)后是函数的函数体,可以把箭头函数赋值给一个变量,在调用箭头函数时直接调用这个变量就可以了。

let arrowFun = ([param1,param2,...,paramn]) => {// 代码块
}// 用箭头函数
arrowFun([param1,param2,...,paramn])

2.4、类

TypeScript支持基于类的面向对象编程方式,定义类的关键字是class,后面跟上类名。

类描述了所创建对象的共同属性和方法。

2.4.1、类的定义

// 定义类 Person
class Person {// 属性name,ageprivate name: stringprivate 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类来实例化具体的对象

// 实例化对象
let person1 = new Person('张三', 18);// 通过实例化的对象调用类中的成员方法
person1.getPersonInfo();

2.4.2、继承

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

一般来说相对具象化的类可以继承自一个更加抽象的类,这个抽象的共性就直接从父类中获取,不需要再重写一遍。

// 定义一个类Employee继承自Person
class Employee extends Person {private department: stringconstructor(name: string, age: number, department: string) {super(name, age);this.department = department;}public getElployeeInfo(): string {return this.getPersonInfo() + ` and work in ${this.department}`;}
}

2.5、模块

随着应用越来越大,通常需要把代码拆分为多个文件,也就是模块(module)。

模块可以相互加载,并且可以使用export和import来交换功能,从一个模块调用另一个模块的函数。

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

2.5.1、导出

export class NewsData {title: stirng;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;}
}

2.5.2、导入

使用import导入其它模块中导出的内容

import {NewsData} from '../model/NewsData';

2.6、迭代器

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

2.6.1、for...of语句

for..of会遍历可迭代的对象,调用对象上的Symbol.iterator方法。

let arr = [1,"string",false];for(let entry of arr) {console.log(entry);
}

2.6.2、for...in语句

for...in语句迭代的是对象的键,而for...of迭代的是对象的值

let list = [1,2,3];// for...in 迭代的是对象的键
for(let i in list) {console.log(i);    // 0,1,2
}

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

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

相关文章

机架式防雷PDU为IDC数据中心机房末端配电提供可靠保障

随着网络设备与各类通讯设备之间已经实现了智能化联网&#xff0c;取得的经济效益和社会效益逐步得到了体现。然而&#xff0c;由于雷电电磁脉冲感应造成的设备故障也越来越多&#xff0c;频繁的雷害对机房设备的正常工作造成了相当大的影响和危害&#xff0c;并给运行维护工作…

关于pip basicsr,facexlib,realesrgan et al.安装报错。

首先basicsr是一个超分的库&#xff0c;在ubuntu系统上pip时会报错。 上图这种错误&#xff0c;或者其他的错误&#xff0c;有的方法让去github上安装&#xff0c;那种方法到setup.py的时候也会报错。 问题在于首先 -i的源要换成阿里的源&#xff0c;然后要安装他要求的库&…

Java: 实现电影信息管理系统 (javaBean)

文章目录 电影信息系统1. 将JavaBean数据类封装好2.业务逻辑类3.测试类&#xff08;main函数类&#xff09; 电影信息系统 需求&#xff1a; 展示系统中的全部电影&#xff08;每部电影展示、名称、平分&#xff09;。允许用户根据电影编号&#xff08;id&#xff09;查询出某…

食醋行业分析:预计2029年将达到95亿美元

近年来中国食醋市场每年的销售量稳定增长&#xff0c;市场规模已经达到数百亿人民币。而在其他国家和地区&#xff0c;食醋也成为不可或缺的调味品之一&#xff0c;随着全球化和多样化的饮食趋势&#xff0c;国际市场对食醋的需求也不断增加。 食醋作为一种天然的酸味调节剂&am…

Springboot+vue的人力资源管理系统(有报告)。Javaee项目,springboot vue前后端分离项目

演示视频&#xff1a; Springbootvue的人力资源管理系统&#xff08;有报告&#xff09;。Javaee项目&#xff0c;springboot vue前后端分离项目 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的企业资产管理系统&#xff0c;采用M&#xff08;model&…

ds前后台博客系统

源码私信或者公众号java大师获取 博客简介&#xff1a;本博客采用Spring Boot LayUI做为基础&#xff0c;进行的博客系统开发&#xff0c;与bootvue相比&#xff0c;更为适合开发简单的系统&#xff0c;并且更容易上手&#xff0c;简单&#xff01;高效&#xff01;更易上手&a…

为什么审计平台不适合进行数据库变更管理?

关于视源电子 广州视源电子科技股份有限公司 (CVTE) 成立于 2005 年 12 月&#xff0c;旗下拥有多家业务子公司。 截至 2022 年底&#xff0c;公司总人数超 6000 人&#xff0c;约 60% 为技术人员。公司的主营业务为液晶显示主控板卡和交互智能平板等显控产品的设计、研发与销…

离散时间系统模型

离散时间系统模型 离散时间系统模型是表示数字滤波器的方案。MATLAB 科学计算环境支持若干种离散时间系统模型&#xff0c;这些模型将在以下章节中介绍&#xff1a; ​传递函数零极点增益状态空间部分分式展开式&#xff08;残差形式&#xff09;二阶节 (SOS)格型结构体卷积矩…

为什么笔记不收录,小红书作品收录逻辑分析!

小红书作品收录问题&#xff0c;是平台大家广泛关注的问题。这是因为&#xff0c;一篇作品是否被有效收录&#xff0c;将会直接决定作品所能捕获的流量。今天给大家分享下为什么笔记不收录&#xff0c;小红书作品收录逻辑分析&#xff01; 一、作品收录是指什么 小红书平台的作…

Kotlin Multiplatform稳定版本发布:加速跨平台开发的新里程碑

Kotlin Multiplatform稳定版本发布&#xff1a;加速跨平台开发的新里程碑 引言 在最新的消息中&#xff0c;JetBrains团队宣布Kotlin Multiplatform&#xff08;KMP&#xff09;将于2023年10月稳定发布。这一消息对于广大开发者来说毫无疑问是一个令人振奋的消息。KMP的正式生…

后端面试问题(学习版)

JAVA相关 JAVA语言概述 1. 一个".java"源文件中是否可以包含多个类&#xff1f;有什么限制&#xff1f; 可以。 一个源文件可以声明多个类&#xff0c;但是最多只能有一个类使用public进行声明 且要求声明public的类的类名与源文件相同。 2. Java的优势&#xff…

C++——const成员

这里先用队列举例&#xff1a; #define _CRT_SECURE_NO_WARNINGS 1 #include <iostream> #include <assert.h> using namespace std; class SeqList { public:void pushBack(int data){if (_size _capacity){int* tmp (int*)realloc(a, sizeof(int) * 4);if (tm…

在以BUF,字节存储区中,存放有n个带符号整数。试编写统计其中负偶数个数(假设≤9)并且显示。

;默认认采用ML6.11汇编程序 DATAS SEGMENT;此处输入数据段代码BUF DB -2,2,3,4,-4N$-BUF DATAS ENDS STACKS SEGMENT;此处处输入堆栈段代码 STACKS ENDS CODES SEGMENTASSUME CS:CODES,DS: DATAS, SS:STACKS START:MOV AX, DATASMOV DS,AXMOV BX,0MOV CX,0 LOP: mov AX,[BX] RO…

【Java】集合(一)单列集合List

1.集合 可以动态保存任意多个对象&#xff0c;并提供了一系列的操作对象的方法&#xff1a;add、remove、set、get等。 2.集合框架体系 分为两大类&#xff1a; 单列集合和双列集合 3.List接口基本介绍 List接口是Collection接口的子接口 List集合类中元素有序&#xff0…

【LeetCode】每日一题 2023_11_13 区域和检索 - 数组可修改(树状数组/线段树)

文章目录 刷题前唠嗑题目&#xff1a;区域和检索 - 数组可修改题目描述代码与解题思路偷看大佬题解 结语 刷题前唠嗑 LeetCode? 启动&#xff01;&#xff01;&#xff01; 今天是中等题&#xff0c;貌似挺简单的&#xff0c;先试试水 题目&#xff1a;区域和检索 - 数组可修…

Spring Data JPA方法名命名规则

最近巩固一下JPA&#xff0c;网上看到这些资料&#xff0c;这里记录巩固一下。 一、Spring Data Jpa方法定义的规则 简单条件查询 简单条件查询&#xff1a;查询某一个实体类或者集合。 按照Spring Data的规范的规定&#xff0c;查询方法以find | read | get开头&…

mysql 中with的用法(1)

mysql 中with的用法 1、案例一&#xff1a; 建表&#xff1a; CREATE TABLE employees (employee_id INT PRIMARY KEY,first_name VARCHAR(50),last_name VARCHAR(50),salary INT );INSERT INTO employees (employee_id, first_name, last_name, salary) VALUES (1, John, Do…

代码随想录算法训练营第五十天丨 动态规划part13

300.最长递增子序列 思路 首先通过本题大家要明确什么是子序列&#xff0c;“子序列是由数组派生而来的序列&#xff0c;删除&#xff08;或不删除&#xff09;数组中的元素而不改变其余元素的顺序”。 本题也是代码随想录中子序列问题的第一题&#xff0c;如果没接触过这种…

第 371 场 LeetCode 周赛题解

A 找出强数对的最大异或值 I 模拟 class Solution { public:int maximumStrongPairXor(vector<int> &nums) {int n nums.size();int res 0;for (auto x: nums)for (auto y: nums)if (abs(x - y) < min(x, y))res max(res, x ^ y);return res;} };B 高访问员工 …

在mac上使用jmap -heap命令报错:Attaching to process ID 96530, please wait...

在mac上执行命令jmap -heap 96530 报错&#xff1a; Attaching to process ID 96530, please wait... ERROR: attach: task_for_pid(96530) failed: (os/kern) failure (5) Error attaching to process: sun.jvm.hotspot.debugger.DebuggerException: Cant attach to the proc…