从零开始学Hm（一）

工具安装

DevEcoStudio  官网下载 直接安装，需要下载nodejs和ohpm

安装完成之后在help选择检查环境，全部√即可

 ArkTS语言

在TypeScript的基础上进一步扩展，继承了Ts的所有特性

声明式UI的特征

1.声明式描述

只描述UI应该呈现的结果，不需要关心怎么去实现

2.状态驱动试图更新

不直接操作UI，而是同操作状态简介促使视图更新

优点

开发效率高，开发体验好 性能优越（方舟编译器，UI后端引擎） 多系统适配（平台适配层，平台桥阶层），

扩展

基本语法

状态管理

渲染控制

 组成

装饰器：装饰类，结构，方法，变量并赋予特殊含义

​    @Component 自定义组件， @Entry 入口组件  @State 组件中的状态变量，状态变量变化会触发UI刷新

自定义组件：可复用的UI单元，可组合成其他组件

UI描述：以声明式的方式来描述UI结构，build（）方法中的代码块

系统组件：ArkUI中默认自带的组件，可以直接使用

事件方法：链式调用设置多个事件的相应逻辑

属性方法：组件可以链式调用配置多项属性

 TypeScript

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

js是弱类型的，变量没有类型

ts加入了静态类型检查功能，要求每一个变量都有固定的数据类型

let  变量名 ：String = 'Hello world'

变量声明

string 字符串 单引号或者双引号

number  整数 浮点数

boolean  布尔值

any  不确定可以是任意类型

union 联合类型 在多个类型中一个 

let u:string|number|boolean = 'rose'

u=18

object 对象类型

let p={name:'张三'，age：21}

获取 p.name    p.['name']  都可以

数组 let name:Array<string> = ['Jack','Rose']

let ages: number[]=[21,18]

**TS中，空串，0，null,undefined都认为是false**,其他都是true

遍历数组

for in

```typescript
for(const i in 数组){

console.log(i+':'+name[i])

}
```

for of

```typescript
for(const name of 数组){
    console.log(name)
}
```

 函数

```typescript
    有返回值
    function 方法名 （参数名：参数类型）：void{
        
    }


方法名（"参数"）
    无返回值
    function 方法名 （参数名：参数类型，参数名：参数类型）：返回值类型{
        return。。。
    }
let 变量名=方法名（参数）

箭头函数
let 变量名=（参数名：参数类型）=>{
    
}
变量名（参数）

可选参数
function 方法名（参数?:参数类型）{
    
}
默认参数
function 方法名（参数名，参数类型='默认值'）{
    
}
```

  类和接口

在接口内定义的方法不加function

```
interface A{
方法名（参数：参数类型）：返回值
}
class B implements A{
方法名（参数：参数类型）：返回值{

}
}
初始化对象
let 变量名：变量类型=new B()
```

构造函数 没有方法名 constructor

  模块

将通用功能抽取出来，模块之间可以互相加载，提高复用性

用export关键字 可以让外界使用 具有导出的功能

导入

import {... , ...} from '到处文件的地址'

导入单个时不需要大括号

 hello ArkTS

@Entry //装饰器 标志当前组件是入口组件 不加的话就不是入口组件不能直接显示，需要被引用
@Component//装饰器 标记是自定义组件 与struct一起用
struct Index {//struct 自定义组件，可复用的UI单元
  @State message: string = 'Hello World'//状态变量，值变化时会触发UI刷新

  build() {//UI描述，内部可以以声明式方式描述UI组件
    Row() {//容器组件
      Column() {//容器组件 完成页面布局
        Text(this.message)//基础组件，自带样式和功能的页面元素
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
        //属性方法  加粗
          .onClick(()=>{
            this.message='Hello ArkTs'
          })//添加事件

      }
      .width('100%')//属性方法
    }
    .height('100%')//
  }
}