鸿蒙开发语言ArkTS及实践

什么是ArkTS

ArkTS是鸿蒙生态的应用开发语言。它在保持TypeScript（简称TS）基本语法风格的基础上,对TS的动态类型特性施加更严格的约束，引入静态类型。同时，提供了声明式UI、状态管理等相应的能力，让开发者可以以更简洁、更自然的方式开发高性能应用

一句话概括，ArkTS是基于TS语言的超集，就像TS是js的超集一样

TS语法介绍?

TS语法类型是JavaScript的超集，通俗的讲，TS对所有变量的使用做了类型限制，并且多了面向对象的用法，比如继承，private ，public关键字等

TS数据类型

布尔类型boolean

let isDone: boolean = false;

数字类型 number?

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

?字符串 String 用" 或者'包裹的类型

let name: string = "bob";
name = "smith";

ES6字符模板
let sentence: string = `Hello, my name is ${ name }.

数组类型，有两种定义方式，第一种可以在元素类型后面接上[ ],第二种可以使用数据泛型??

let list: number[] = [1, 2, 3];

let list: Array<number> = [1, 2, 3];

元组类型Tuple（类似于python语法中的元组）

let x: [string, number];
// 初始化元组正确写法
x = ['hello', 10]; // OK
// 初始化元组错误写法
x = [10, 'hello']; // Error
// 元组访问
console.log(x[2].toString()); 

?枚举 enum?

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

我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型 Any??

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean

没有任何类型 void?

function warnUser(): void {
    console.log("This is my warning message");
}

Null 和 Undefined ，NUll 和UnDefined 分别有各自的类型，为null 和undefined

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

never类型表示的是那些永不存在的值的类型。 例如，?never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

object表示非原始类型，也就是除number，string，boolean，symbol，null或undefined之外的类型?

// object | null 表示联合类型，传null或者 object
declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

TS定义类

类似于java等面向对象语法，有构造函数，变量等

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");

类中的继承和派生，类似于后端语言?

class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

const dog = new Dog();
dog.move(10);
dog.bark();

TS装饰器

装饰器（Decorators）为我们在类的声明及成员上通过元编程语法添加标注提供了一种方式，

装饰器是一种特殊类型的声明，它能够被附加到类声明，方法，?访问符，属性或参数上。 装饰器使用?@expression这种形式，expression求值后必须为一个函数，它会在运行时被调用，被装饰的声明信息做为参数传入

// 有一个@sealed装饰器，我们会这样定义sealed函数
function sealed(constructor: Function) {
    Object.seal(constructor);
    Object.seal(constructor.prototype);
}

装饰器工厂

如果我们要定制一个修饰器如何应用到一个声明上，我们得写一个装饰器工厂函数。?装饰器工厂就是一个简单的函数，它返回一个表达式，以供装饰器在运行时调用

function color(value: string) { // 这是一个装饰器工厂
    return function (target) { //  这是装饰器
        // do something with "target" and "value"...
    }
}

关于TS的教程具体请参照TS中文网?，这里不在一一介绍

ArkTS基础语法

ArkTS中的装饰器和作用

@Component 代表自定义组件
@State修饰的变量，当值发生改变时，会自动刷新
@Entry 装饰自定义组件用作页面的默认入口组件，如加载页面时，将首先创建并呈现装饰的自定义组件，一个页面有且仅有一个Entry组件
@Link 装饰的变量可以和父组件中的@State修饰的变量进行双向绑定，任何一方做的修改都会反映给另外一方

?ArkUI组件库

在ArkTS操作的应用中，UI组件来自ArkUI，基础组件Text，Button，Image，TextInput，容器组件Column，Row，Stack，List，具体详细了解请见ArkUI文档中心

ArkTS自定义组件

将基础组件和容器组件进行融合使用就是自定义组件 使用@component 和struct 修饰的部分为自定义组件，struct为一个单元，可以复用

自定义组件必须定义build方法，在其中进行UI描述

@Component 
struct myDefined{
	// ...
	build{
		//自定义组件必须定义build方法 ，在其中进行UI描述
	}
}

?ArkTS自定义组件生命周期及其回调函数

• aboutToAppear在创建自定义组件的实例后到执行build函数之前执行，主要作用（可以在此函数中对要展示的数据进行初始化或者可以申请定时器等资源，后续可以用此资源展示）
• aboutToDisAppear 在实例被销毁时调用，可以在此函数中释放不再使用的资源
• onPageShow 页面展示
• onBackPress 返回是点击返回按钮触发的函数（有返回值，true、false，返回true时表示页面自己处理返回逻辑，不进行页面返回，返回false表示由系统处理返回逻辑，默认返回false）
• onPageHide 在页面消失时的处理逻辑

特此声名：aboutToAppear和aboutToDisAppear?，由于这些回调函数是私有的，系统会自动调用这些函数，不可以手动调用

ArkTS实践（官网案例 待办列表）

实现效果为点击某一事项，替换标签图片、虚化文字，项目官网codelab码云地址gitee源码

?

本地实现注意事项?

• 注意ArkTS文件的层级，尽可能跟Gitee层级保持一致
• 资源文件图片等信息，需要复制Gitee中的resource文件夹，否则没有效果，可以选择在官网中直接另存为，因为整体项目较大，不建议直接下载

本地实现效果?