鸿蒙开发之了解ArkTS

鸿蒙开发者官网  ： https://developer.huawei.com/consumer/cn/

开发鸿蒙要用的软件是  DevEco Studio

ArkTS建立在JS和TS的基础之上，扩展了声明式UI开发范式和状态管理，提供更简洁和自然的开发方式。

ArkTS引入了渲染引擎的增强，包括平台无关的自绘制机制、声明式UI后端设计、动态布局等，以提高性能体验。进一步的优化包括代码预编译、高效FFI-Foreign Function Interface、引擎极小化等。ArkTS还构建了跨OS平台的基础设施，以支持不同设备上的部署。

。

一、TS的基本语法

 一、TS的数据类型

TS在JavaScript的基础上加入了静态类型检查的功能，因此每个变量都有固定的数据类型。

1、基本数据类型

let meg:string = 'hollo world'

let age:numbe = 20

let res:boolean = true

let a:any = 'Jim' // any 不确定类型，可以是任意类型

a = 35

let u:string|number|boolean = 'HM' //union  联合类型，可以是是多个指定类型中的一种

u = 25

2、对象类型

let obj = ['name':'Tom',age:24]

console.log(p.name) //点语法取值

console.log(p['name'])  //键值取值

3、数组Array 

let names:Array<string> = ['Timi','Tom','Jack']

let ages:number[] = [21,22,23]

console.log(names[0]) //下标取值

 二、条件控制

if-else  和switch

let num:number = 20
if (num % 2 === 0) {
    console.log('是偶数')
}else {
    console.log('是奇数')
}

let grade:string = 'B'
switch(grade) {
    case 'A': {
        console.log('优秀')
        break
    }
    case 'B': {
        console.log('及格')
        break
    }
    case 'C' : {
        console.log('不及格')
        break
    }
    default: {
        console.log('输入有误')
        break
    }
}

注意：

在TS中，空字符串、数字0、null、undefined都被认为是false

三、循环

for和while

for(let I = 0 ; I < 10 ; I++) {
    console.log(i)
}

let i = 10
while(i <= 20) {
    console.log(i)
    I++
}

TS为一些内置类型如数组等提供了快捷迭代语法

let names: string[] = ['Jack','Tom',''LiLei]
//for in 迭代器，遍历得到数组下标
for(const i in names) {
    console.log(names[i])
}
 
//for of 迭代器 ，直接得到元素
for( const n of names) {
    console.log(n)
}

四、函数

TS通常用function关键字声明函数，支持可选参数、默认参数、箭头函数等特殊语法

//无返回值，void可省略
function sayHello(name: string): void {
    console.log('你好'+name)
}
sayHello('LiLei')
 
//有返回值
function sum(x:number,y:number):number {
    return x + y
}
console.log(sum(20,23))
 
//箭头函数
let say = (name:string) => {
    console.log('hello' + name)
}
say('Jack')
 
//可选参数
function sayHello1(name? : string) {
    name = name ? name : '陌生人'
    console.log('你好'+name)
}
sayHello1('Tom')
//默认参数
func sayHello2(name:string = '陌生人') {
    console.log("你好"+name)
}
sayHello2()

五、面向对象

TS具有面向对象编程的基本语法，例如interface class enum等，具备封装、继承、多态等面向对象基本特征。

1、封装、多态

//定义枚举
enum Msg{
    suc = '成功'
    fail = '失败'
}
//定义接口，抽象方法接收枚举
interface A {
    request(msg:Msg):void
}
//实现接口A
class B implements A {
    request(msg:Msg):void {
        console.log('请求结果是：', msg)
    }
}
//初始化对象
let a:A = new B() 
//调用方法，传递枚举参数
a.request(Msg.suc)

2、继承

//定义矩形类
class Rectangle {
    //private 定义私有成员变量
    private width: number
    private height:number
    //构造函数
    constructor(width: number , height: number) {
        this.width = width
        this.height = height
    }
    //成员方法
    public area():number {
        return this.width * this.height
    }
}
//定义正方形 继承矩形
class Square extends Rectangle {
    constructor(side:number) {
        super(side , side)
    }
}
let s = new Square(20)
console.log('正方形面积为：',a.area())

六、模块开发

应用复杂时，我们可以把通用功能抽取到单独的ts文件中，每个文件都是一个模块(module),模块能够提高代码复用。

使用export导出,使用import  from导入

假设一个文件rectangle.ts

//定义矩形类,通过export导出
export class Rectangle {
    //成员变量
    public width: number
    public height:number
    //构造函数
    constructor(width: number , height: number) {
        this.width = width
        this.height = height
    }
   
}
//定义工具方法，求面积，通过export导出
export function area(rec : Rectangle): number {
   return rec.width * rec.height
}

在另一个ts文件中导入，假设一个名为index.ts的文件

//通过import语法导入，from后面写文件的地址
import {Rectangle, area} from './rectangle' 
 
//创建Rectangle对象
let rac = new Rectangle(20,10)
//调佣area方法
console.log('面积是:' + area(rac)

二、ArkTS声明式开发范式

使用 DevEco Studio 创建一个demo

@Entry
@Component
struct Index {
  @State message: string = 'Hello World'
 
  build() {
    Row() {
      Column() {
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}

   build() {
     Row() {
     Column() {
       Text(this.message)
        .fontSize(50)
        .fontWeight(FontWeight.Bold)
    }
    .width('100%')
   }
  .height('100%')
  }
}  

@Component
struct  MyComponent {
  @State count: number = 0;
  build() {
  }
}
 
@Component 
struct  Parent {
  build() {
    Column() {
      //父组件初始化，覆盖本地定义的默认值
      MyComponent({count:1})
    }
  }
}