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;
    else
        return 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,age
    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类来实例化具体的对象

// 实例化对象
let person1 = new Person('张三', 18);

// 通过实例化的对象调用类中的成员方法
person1.getPersonInfo();

2.4.2、继承

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

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

// 定义一个类Employee继承自Person
class Employee extends Person {
    
    private department: string

    constructor(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
}

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

利用Python群组分析方法剖析客户行为

大家好&#xff0c;如今的企业有能力收集大量的数据&#xff0c;这些数据可以帮助企业制定更好的策略并了解其客户的行为。Cohort分析可以在其中发挥作用&#xff0c;Cohort分析是一种了解客户行为或用户互动的强大工具&#xff0c;并为企业提供有价值的见解&#xff0c;本文中…

竞赛选题 深度学习的动物识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

Python--集合----无序,去重,空集合只能用set()方法

集合&#xff08;set&#xff09;是一个无序的不重复元素序列。 特点&#xff1a;天生去重 无序 集合定义&#xff1a;在Python中&#xff0c;我们可以使用一对花括号 {} 或者 set()方法 来定义集合&#xff0c; 但是如果你 定义的集合是一个 空集合&#xf…

C++阶段复习‘‘‘‘总结?【4w字。。。】

文章目录 前言类和对象C类定义和对象定义类成员函数C 类访问修饰符公有&#xff08;public&#xff09;成员私有&#xff08;private&#xff09;成员受保护&#xff08;protected&#xff09;成员 继承中的特点类的构造函数和析构函数 友元函数内联函数this指针指向类的指针类…

什么是会话固定以及如何在 Node.js 中防止它

什么是会话固定以及如何在 Node.js 中防止它 在深入讨论之前&#xff0c;我们需要了解会话是什么以及会话身份验证如何工作。 什么是会话&#xff1f; 正如我们所知&#xff0c;HTTP 请求是无状态的&#xff0c;这意味着当我们发送登录请求时&#xff0c;并且我们有有效的用…

Linux系统编程——标准c库对文件操作

Linux、标准c库对文件操作的区别 1.来源 从来源的角度看&#xff0c;两者能很好的区分开&#xff0c;这也是两者最显而易见的区别: open是UNIX系统调用函数 (包括LINUX等) &#xff0c;返回的是文件描述符 (File Descriptor)&#xff0c;它是文件在文件描述符表里的索引。.f…

腾讯云5年云服务器还有吗?腾讯云5年时长服务器入口在哪?

如果你是一名企业家或者是一个热衷于数字化转型的创业者&#xff0c;那么腾讯云最近推出的一项优惠活动绝对不会让你无动于衷。现在&#xff0c;腾讯云正在大力推广一项5年特价云服务器活动&#xff0c;只需要花费3879元&#xff0c;你就可以享受到腾讯云提供的优质服务。 腾讯…

RK3568平台开发系列讲解(Linux系统篇)Linux内核定时器详解

🚀返回专栏总目录 文章目录 一、系统节拍率二、内核定时器简介三、内核定时器API四、延时函数沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 Linux 内核中有大量的函数需要时间管理,比如周期性的调度程序、延时程序、对于我们驱动编写者来说最常用的定时器。硬件定…

Direct3D拾取

假设在屏幕上单击,击中的位置为点s=(x,y)。由图可以看出,用户选中了茶壶。但是仅给出点s,应用程序还无法立即判断出茶壶是否被选中。所以针对这类问题,我们需要采用一项称为“拾 取(Picking)”的技术。 茶壶和屏幕点s之间的一种联系是茶壶被投影到了一个包含了s的区域中。…

【QT系列教程】之一安装配置

文章目录 一、qt简介二、qt下载2.1、官网地址&#xff1a;https://www.qt.io/2.2、下载2.3、https://download.qt.io/official_releases/online_installers/ 三、qt安装3.1、登录账号&#xff0c;没有账号自己注册3.2、我是个人安装&#xff0c;如果是公司填写公司名字3.3、欢迎…

文件批量重命名001开始,怎么操作?

如何让文件批量重命名001开始&#xff1f;对于那些需要批量重命名文件的用户来说&#xff0c;这项任务可能涉及到整理照片、音乐文件或者调整电子文档的命名&#xff0c;而这些工作都可能会相当繁琐。有时候&#xff0c;我们希望以数字顺序名称从"001"开始批量修改文…

hadoop 虚拟机配置大数据环境 hadoop(二)

1. 安装epel-release 注:Extra Packages for Enterprise Linux 是为“红帽系”的操作系统提供额外的软件包,适用于RHEL、CentOS 和Scientific Liux。相当于是一个软件仓库&#xff0c;大多数rpm 包在官方repository 中是找不到的) 命令&#xff1a; yum install -y epel-relea…

LCD1602设计(2)-指令宏定义完整版

本文为博主 日月同辉&#xff0c;与我共生&#xff0c;csdn原创首发。希望看完后能对你有所帮助&#xff0c;不足之处请指正&#xff01;一起交流学习&#xff0c;共同进步&#xff01; > 发布人&#xff1a;日月同辉,与我共生_单片机-CSDN博客 > 欢迎你为独创博主日月同…

swagger精度丢失,postman调用正常,dameng数据库,long类型字段

问题出现 我们目前在迁移环境&#xff0c;然后往另带一个公司提供的框架里面迁移&#xff0c;然后就出现了很多问题&#xff0c;一个问题是我们返回的某个列表数据&#xff0c;在使用postman 的时候调用正常&#xff0c;但是当前端在制作页面的时候出现问题&#xff0c;并且sw…

8年经验之谈 —— 记一次接口压力测试与性能调优!

经验总结 1. 如果总的CPU占用率偏高&#xff0c;且基本都被业务线程占用时&#xff0c;CPU占用率过高的原因跟JVM参数大小没有直接关系&#xff0c;而跟具体的业务逻辑有关。 2. 当设置JVM堆内存偏小时&#xff0c;GC频繁会导致业务线程停顿增多&#xff0c;TPS下降&#xff…

P6入门:项目初始化5-项目支出计划Spending Plan

前言 使用项目详细信息查看和编辑有关所选项目的详细信息&#xff0c;在项目创建完成后&#xff0c;初始化项目是一项非常重要的工作&#xff0c;涉及需要设置的内容包括项目名&#xff0c;ID,责任人&#xff0c;日历&#xff0c;预算&#xff0c;资金&#xff0c;分类码等等&…

JAVA弑神大阵之装饰者大阵

架构说明 构成简述&#xff1a; 总接口&#xff1a; 装饰者跟被装饰者都要来实现他&#xff08;或者理解成父接口&#xff09;&#xff0c;作用&#xff1a;对被装饰者做转换 被装饰者&#xff1a; 此处实现总接口。什么都不需要动&#xff0c;他只是被增强的功能&#xff0…

Python 框架学习 Django篇 (十) Redis 缓存

开发服务器系统的时候&#xff0c;程序的性能是至关重要的。经过我们前面框架的学习&#xff0c;得知一个请求的处理基本分为接受http请求、数据库处理、返回json数据&#xff0c;而这3个部分中就属链接数据库请求的响应速度最慢&#xff0c;因为数据库操作涉及到数据库服务处理…

算法笔记-贪心1

算法笔记-贪心 什么是贪心算法分配饼干例题理解二分割字符串最优装箱整数配对最大组合整数分配区间问题买股票的最佳时机区间选点 问题什么是贪心算法 分配饼干例题 //贪心算法 //保证局部最优,从而使最后得到的结果是全局最优的 #include<iostream> #include<a…

微前端时代:打造高效、灵活的前端开发体系

❝ 本篇文章全文约 1.5 万字&#xff0c;目的是系统化地介绍微前端及其核心技术&#xff0c;并介绍了什么是微前端以及为什么我们需要它。我们还讨论了在众多微前端框架中如何选择适合自己系统的框架&#xff0c;并分享了一些业界使用微前端的实践案例。最后&#xff0c;我们提…