前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >01. 从TypeScript入手,驾驭HarmonyOS开发的技术风潮!-------(上篇)

01. 从TypeScript入手,驾驭HarmonyOS开发的技术风潮!-------(上篇)

作者头像
全栈若城
发布2024-03-10 09:00:02
1010
发布2024-03-10 09:00:02
举报
文章被收录于专栏:若城技术专栏若城技术专栏

本章知识大纲

image.png
image.png

编程语言

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,继承了TS的所有特性,是TS的超集因此,在学习ArkTS语言之前,建议开发者具备TS语言开发能力。

当前,ArkTS在TS的基础上主要扩展了如下能力:

  • 基本语法: ArkTS定义了声明式UI描述、自定义组件和动态扩展UI元素的能力,再配合ArkUI开发框架中的系统组件及其相关的事件方法、属性方法等共同构成了UI开发的主体。
  • 状态管理: ArkTS提供了多维度的状态管理机制。在UI开发框架中,与UI相关联的数据可以在组件内使用,也可以在不同组件层级间传递,比如父子组件之间、爷孙组件之间,还可以在应用全局范围内传递或跨设备传递。另外,从数据的传递形式来看,可分为只读的单向传递和可变更的双向传递。开发者可以灵活的利用这些能力来实现数据和UI的联动。
  • 渲染控制: ArkTS提供了渲染控制的能力。条件渲染可根据应用的不同状态,渲染对应状态下的UI内容。循环渲染可从数据源中迭代获取数据,并在每次迭代过程中创建相应的组件。数据懒加载从数据源中按需迭代数据,并在每次迭代过程中创建相应的组件。
扩展知识
  1. JavaScript(JS),使用在Web应用开发,用来为页面添加各种各样的动态功能。
  2. TypeScript(TS) 是JavaScript的超集,它扩展了JS的语法,在JS的基础上添加静态类型构建而成,是一个开源的编程语言。
  3. ArkTS兼容TypeScript语言,拓展了声明式UI、状态管理、并发任务等能力。

他们的关系如图所示:

TypeScript语法

如果是前端研发掌握起来无压力, 如果是其他方向的研发, 大约需要半个月左右的时间去掌握, 当然如果想更加深入的掌握TypeScript则需要掌握JavaScript ,而JavaScript 初步掌握需要的时间大约在 一个月左右, 深入掌握因人而异, 可能是三个月也可能是半年

TS数据类型
image.png
image.png
布尔值

只有 true 和 false 两个值。

代码语言:javascript
复制
// let 变量名:数据类型 = 值
let flag:boolean = true
console.log('布尔类型:', flag);
数字类型

所有数字都是浮点数,类型是number类型,可以表示十进制、二进制、八进制、十六进制

代码语言:javascript
复制
// 数字类型
let a1:number = 10 // 十进制
let a2:number = 0b010 // 二进制
let a3:number = 0o12 // 八进制
let a4:number = 0xa // 十六进制
console.log('数字类型:', `a1=>${a1}, a2=>${a2}, a3=>${a3}, a4=>${a4}`);
字符串

表示文本数据,可以使用单引号或双引号来定义。

代码语言:javascript
复制
// 字符串类型 ---> string 
let str1:string = '待到秋来九月八'
let str2: string = '我花开后百花杀'
console.log(`字符串类型 :${str1}, ${str2}`);
数组

注意问题:数组定义后,里面的数据的类型必须和定义数组的时候的类型是一致的,否则有错误提示信息,也不会编译通过的

代码语言:javascript
复制
// 数组定义方式1
// 语法: let 变量名:数据类型[]=[值1,值2,值3]
let arr1:number[] = [10,20,30,40]
// 数组定义方式2:泛型的写法
// 语法: let 变量名:Array<数据类型> = [值1, 值2, 值3]
let arr2:Array<number> = [10,20,30]

console.log(`方式1:${arr1} , 方式2:${arr2}`);
元组(Tuple)

注意问题:元组类型在使用的时候,数据的类型的位置和数据的个数 应该和在定义元组的时候的数据类型及位置应该是一致的

代码语言:javascript
复制
 // 元组类型: 在定义数组的时候,类型和数据的个数一开始就已经限定了
let arr3:[string,number,boolean] = ['若城',30,false]
console.log(arr3);
枚举(enum)

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

代码语言:javascript
复制
// 枚举类型: 枚举里面的每个数据值都可以叫元素, 每个元素都有自己的编号,编号是从0开始的,依次的递增加1

enum Color{
  red,
    green,
    blue,

    }
//  定义一个Color 的枚举类型的变量来接收枚举的值 
let color:Color = Color.red
console.log(color); // 0 
console.log(Color.red, Color.green, Color.blue); // 0,1 ,2 
console.log(Color[2]); // blue
Any类型

有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any 类型来标记这些变量

代码语言:javascript
复制
//  any 类型
let str:any = 100 
str = '黑夜给了我黑色的眼睛, 我却用它寻找光明!'
console.log(str);
let arr:any[]=[100, 'who are you?', false]
console.log(arr);
void修饰的函数

某种程度上来说,void 类型像是与 any 类型相反,它表示没有任何类型。 当一个函数没有返回值时,你通常会见到其返回值类型是 void

代码语言:javascript
复制
// void 类型, 在函数声明的时候小括号后面使用:void , 表示的是该函数没有任何的返回值
function showMsg():void{
  console.log('void 指的是没有返回类型');
}
console.log(showMsg());
object 类型

object 表示非原始类型,也就是除 number,string,boolean之外的类型。使用 object 类型,就可以更好的表示像 Object.create 这样的 API

代码语言:javascript
复制
//  定义一个函数, 参数是object 类型, 返回值也是object 类型
function getObj(obj: object): object{
	console.log(obj);
	return {
		name:'若城',
		gender:'男'
	}

}
console.log(getObj({name:'卡卡西', gender:'男'}));
null、undefined

在TS中,这两个类型不同

undefined 和 null 都可以作为其他类型的子类型, 把undefined 和 null 赋值给其他类型的变量 , 例如: :number类型的变量

代码语言:javascript
复制
// undefined && null
let und:undefined = undefined
let nul: null = null
console.log(und, nul);
//undefined 和 null 都可以作为其他类型的子类型, 把undefined 和 null 赋值给其他类型的变量 , 例如: :number类型的变量 
let num2:number = undefined
let num3:number = null
console.log(num2, num3);
联合类型

联合类型(Union Types)表示取值可以为多种类型中的一种 需求1: 定义一个一个函数得到一个数字或字符串值的字符串形式值

代码语言:javascript
复制
let stringOrNumber: string | number;
stringOrNumber = 'hello';
stringOrNumber = 100;

需求2: 定义一个函数得到一个数字或字符串值的长度

代码语言:javascript
复制
function getStringLength(str:number|string): number{
    return str.toString().length 
}
console.log(getStringLength('众里寻他千百度,蓦然回首那人却在灯火阑珊处'));
类型断言

通过类型断言这种方式可以告诉编译器,“相信我,我知道自己在干什么”。 类型断言好比其它语言里的类型转换,但是不进行特殊的数据检查和解构。 它没有运行时的影响,只是在编译阶段起作用。 TypeScript 会假设你,程序员,已经进行了必须的检查。 类型断言有两种形式:

  1. “尖括号”语法,
代码语言:javascript
复制
function getStringLength(str:number|string): number{
    // return str.toString().length
    if ((<string>str).length) {
        return (<string>str).length
    }else{
        return str.toString().length
    }
}
console.log(getStringLength('众里寻他千百度,蓦然回首那人却在灯火阑珊处'));
  1. as 语法
代码语言:javascript
复制
function getStringLength(str:number|string): number{
	// return str.toString().length
	if ((str as string).length) {
		return (str as string).length
	}else{
		return str.toString().length
	}
}
console.log(getStringLength('众里寻他千百度,蓦然回首那人却在灯火阑珊处'));
类型推断

类型推断: TS会在没有明确的指定类型的时候推测出一个类型 有下面2种情况: 1. 定义变量时赋值了, 推断为对应的类型 2. 定义变量时没有赋值, 推断为any类型

代码语言:javascript
复制
//  类型推断 
let txt = 100 
console.log(txt);

let txt2;
txt2 = 100
txt2 ='1233'
console.log(txt2);
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-03-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 本章知识大纲
  • 编程语言
    • 扩展知识
    • TypeScript语法
      • TS数据类型
        • 布尔值
          • 数字类型
            • 字符串
              • 数组
                • 元组(Tuple)
                  • 枚举(enum)
                    • Any类型
                      • void修饰的函数
                        • object 类型
                          • null、undefined
                            • 联合类型
                              • 类型断言
                                • 类型推断
                                领券
                                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档