<HarmonyOS>ArkTS语法手册【更新中...】

<HarmonyOS>ArkTS语法手册

前言

本手册适用于有一定JavaScript基础的、学习HarmonyOS开发的初学者,另外还有配套练习提供给初学者使用。

编译器环境:devecostudio-windows-5.0.3.403

TypeScript语法部分

简介

TypeScript(简称 TS)是微软公司开发的一种基于 JavaScript (简称 JS)语言的编程语言。

TypeScript 可以看成是 JavaScript 的超集(superset),即它继承了后者的全部语法,并为此基础上做出了一定的修改。

学习TypeScript注意区分与JavaScript的区别

1.类型

1.1类型的概念

类型(type)指的是一组具有相同特征的值。如果两个值具有某种共同的特征,就可以说,它们属于同一种类型。举例来说,123456这两个值,共同特征是都能进行数值运算,所以都属于“数值”(number)这个类型。

类型主要目的是在软件开发过程中,为编译器和开发工具提供更多的验证和帮助,帮助提高代码质量,减少错误。

对此TypeScript和JavaScript重要的区别一点在于:

  • JavaScript 代码编辑时(开发阶段)不会检查类型对不对,只在运行后显示错误。
  • TypeScript是在开发阶段报错,这样有利于提早发现错误,避免使用时报错。

1.2类型分类

动态类型和静态类型是编程语言中的两种类型检查机制,它们主要区别在于数据类型检查和确定的时机。

动态类型

在静态类型语言中,变量的数据类型在编译时就已经确定,并且在后续的代码执行中不会改变。

JavaScript语言就是用的是动态类型。

静态类型

在动态类型语言中,变量的数据类型是在运行时确定的,也就是说,变量可以存储任何类型的值,直到它被实际赋值之前,它的类型是未知的。

TypeScript就是用的是静态类型。

静态类型的缺点:
  1. 丧失了动态类型的代码灵活性。
  2. 增加了编程工作量。
  3. 更高的学习成本。
  4. 引入了独立的编译步骤。
  5. 兼容性问题。
静态类型的优点:
  1. 有利于代码的静态分析。
  2. 有利于发现错误。
  3. 更好的 IDE 支持,做到语法提示和自动补全。
  4. 提供了代码文档。
  5. 有助于代码重构。

1.3类型声明

TypeScript 代码最明显的特征,就是为 JavaScript 变量加上了类型声明。

let str:string = '你好' 
let num:number = 123
console.log(str,num) // 你好 123

//示例中,变量名str的后面使用冒号,声明了它的类型为string
//变量名num则声明了它的类型为number。

注意,变量的值应该与声明的类型一致,如果不一致,TypeScript 就会报错。

let str:string = 123; //报错
//示例中,变量str类型是字符串,但是赋值的是数字,因此报错

另外,TypeScript 规定,变量只有赋值后才能使用,否则就会报错。

let str:number 
console.log(str) //报错
//示例中,变量str没有赋值就被读取,导致报错。
//而 JavaScript 允许这种行为,不会报错,没有赋值的变量会输出undefined

1.4类型推断

类型声明并不是必需的,如果没有,TypeScript 会自己推断类型。

let num = 123 
console.log(num) //123
//示例中,变量str没有类型声明,TypeScript就会自动判断它的类型。
//由于它被赋值为一个数值,因此 TypeScript 推断它的类型为number。

如果变量num更改为其他类型的值,跟推断的类型不一致,TypeScript 就会报错。

let num = 123
num = 'hello'  // 报错
//示例中,变量num的类型推断为number,后面赋值为字符串,TypeScript 就报错了。

TypeScript 也可以推断函数的返回值。将会在函数一节讲解。

总结:TypeScript 的设计思想是,类型声明是可选的,你可以加,也可以不加。即使不加类型声明,依然是有效的 TypeScript 代码,只是这时不能保证 TypeScript 会正确推断出类型。由于这个原因,所有 JavaScript 代码都是合法的 TypeScript 代码。

1.5值和类型

关系:“类型”是针对“值”的,可以视为是后者的一个元属性。每一个值在 TypeScript 里面都是有类型的。比如,3是一个值,它的类型是number

TypeScript 代码只涉及类型,不涉及值。所有跟“值”相关的处理,都由 JavaScript 完成。

因此:一种是底层的“值代码”,另一种是上层的“类型代码”。前者使用 JavaScript 语法,后者使用 TypeScript 的类型语法。TypeScript 的编译过程,实际上就是把“类型代码”全部拿掉,只保留“值代码”。

1.6TypeScript 的编译原理

JavaScript 的运行环境(浏览器和 Node.js)不认识 TypeScript 代码。所以,TypeScript 项目要想运行,必须先转为 JavaScript 代码,这个代码转换的过程就叫做“编译”。

TypeScript 官方没有做运行环境,只提供编译器。编译时,会将类型声明和类型相关的代码全部删除,只留下能运行的 JavaScript 代码,并且不会改变 JavaScript 的运行结果。

因此,TypeScript 的类型检查只是编译时的类型检查,而不是运行时的类型检查。一旦代码编译为 JavaScript,运行时就不再检查类型了。

2.TypeScript 的类型系统

TypeScript 继承了 JavaScript 的类型,在这个基础上,定义了一套自己的类型系统。

2.1基本类型

JavaScript数据类型有8种:number、string、boolean、undefined、null、symbol、bigint、object

TypeScript继承了JavaScript的数据类型,除了object类型其他依然称为基本类型。

除了8种类型,TypeScript新增了以下类型:

元组、泛型、枚举类型、any 类型,unknown 类型,never 类型、接口类型、值类型、联合类型、交叉类型。

注意:上面所有类型的名称都是小写字母,首字母大写的NumberStringBoolean等在  JavaScript 语言中都是内置对象,而不是类型名称。

//JavaScript中的首字母大写的Number、String、Boolean作为内置函数使用,强制转换功能
//另外还可以作为包装对象 
console.log(Number('456')) //456
console.log(String(123)) //'123'
console.log(Boolean(1)) //true

另外,undefined 和 null 既可以作为值,也可以作为类型,取决于在哪里使用它们。

//作为值
let x;
console.log(x) // 输出 undefined
let y = null
console.log(y) // 输出 null

//作为类型
let a: undefined | string //变量a被定义为可以接受 undefined 或 string 类型的值
a = "Hello"; // 这是合法的

let b: null | number //变量b被定义为可以接受 null 或 number 类型的值
b = 123; // 这也是合法的
2.1.1number、string、boolean、null、undefined类型
// number类型
let num1:number = 123
let num2:number = 3.14
let num3:number = 0xffff //16进制
let num4:number = 0o15 //8进制
console.log(num1,num2,num3,num4) //123 3.14 65535 13


// string类型
let str1:string = "hello"
let str2:string = 'world' //单引号和双引号都可以使用,但是不能混用。
let str3:string = `${str1} ${str2}` //模板字符串,可以包含换行符和变量。
console.log(str1,str2,str3) //hello world hello world

// boolean类型
let bool1:boolean = true //true或false,区分大小写。
let bool2:boolean = false //true或false,区分大小写。
console.log(bool1,bool2) //true false

// null和undefined类型
let n:null = null //null,表示空值(即此处没有值)。
let u:undefined = undefined //undefined,表示未定义(即还未给出定义,以后可能会有定义。两个undefined里面,第一个是类型,第二个是值。)。
console.log(n,u) //null undefined
2.1.2object类型
let x:object = { foo: 123 }
let y:object = [1, 2, 3]
let z:object = (n:number) => n + 1
//上面示例中,对象、数组、函数都属于 object 类型。

2.2undefined和null的特殊性

undefinednull既是值,又是类型。

作为值,它们有一个特殊的地方:任何其他类型的变量都可以赋值为undefinednull

2.3值类型

TypeScript 规定,单个值也是一种类型,称为“值类型”。

//值类型
let x:'type'
x = 'type' //类型为'type'。
x = 'other' //报错,类型不是'type'。
//变量x的类型是字符串type,导致它只能赋值为这个字符串,赋值为其他字符串就会报错。

推断类型时,遇到const关键字声明的变量,如果代码里面没有注明类型,就会推断该变量是值类型。 

const a = 'type' //a的类型为'type'。
const b:string = 'type' //b的类型为string。
//示例中,变量a是const命令声明的,TypeScript 就会推断它的类型是值type,而不是string类型。

 const关键字声明的变量,如果赋值为对象,并不会推断为值类型。

// x 的类型是 { foo: number }
const x = { foo: 1 }
//示例中,变量x没有被推断为值类型,而是推断属性foo的类型是number。这是因为 JavaScript 里面,const变量赋值为对象时,属性值是可以改变的。

 2.4联合类型(union types)

联合类型(union types)指的是多个类型组成的一个新类型,使用符号|表示。

联合类型A|B表示,任何一个类型只要属于AB,就属于联合类型A|B。 

let x:string|number

x = 123  // 正确
x = 'abc'  // 正确
//示例中,变量x就是联合类型string|number,表示它的值既可以是字符串,也可以是数值。

联合类型里面除了基本类型可以是其他任一类型组合。

联合类型的第一个成员前面,也可以加上竖杠|,这样便于多行书写。

let x:
  | 'one'
  | 'two'
  | 'three'
  | 'four'

 2.5交叉类型(ArkTS删除该语法)

交叉类型(intersection types)指的多个类型组成的一个新类型,使用符号&表示。 

交叉类型A&B表示,任何一个类型必须同时属于AB,才属于交叉类型A&B,即交叉类型同时满足AB的特征。

let x:number&string
//示例中,变量x同时是数值和字符串,这当然是不可能的,所以 TypeScript 会认为x的类型实际是never。

2.6 type 命令

type命令用来定义一个类型的别名。

type Age = number

let age:Age = 55
//示例中,type命令为number类型定义了一个别名Age。这样就能像使用number一样,使用Age作为类型。

优点:可以让类型的名字变得更有意义,也能增加代码的可读性,还可以使复杂类型用起来更方便,便于以后修改变量的类型。 

特点:

  • 别名不允许重名。
  • 别名的作用域是块级作用域。
  • 别名支持使用表达式,也可以在定义一个别名时,使用另一个别名,即别名允许嵌套。
//别名不可以重复
type Color = 'red';
type Color = 'blue'; // 报错
//示例中,同一个别名Color声明了两次,就报错了。

//别名的作用域是块级作用域
type Color = 'red'

if (Math.random() < 0.5) {
  type Color = 'blue'
}
//示例中,if代码块内部的类型别名Color,跟外部的Color是不一样的。
//别名支持使用表达式,也可以在定义一个别名时,使用另一个别名,即别名允许嵌套。
type World = "world";
type Greeting = `hello ${World}`
//示例中,别名Greeting使用了模板字符串,读取另一个别名World。

 type命令属于类型相关的代码,编译成 JavaScript 的时候,会被全部删除。

2.7 typeof 运算符

JavaScript 语言中,typeof 运算符是一个一元运算符,返回一个字符串,代表操作数的类型。typeof运算符只可能返回八种结果,而且都是字符串。

TypeScript 将typeof运算符移植到了类型运算,它的操作数依然是一个值,但是返回的不是字符串,而是该值的 TypeScript 类型。

let a = 1;
let b:typeof a; //作为类型运算

if (typeof a === 'number') { //作为表达式运算
  b = a;
}

ArkTS仅支持在表达式中使用`typeof`运算符,不允许使用`typeof`作为类型。

3.symbol类型

4.数组

JavaScript 数组在 TypeScript 里面分成两种类型,分别是数组(array)和元组(tuple)。

4.1数组

数组的类型有两种写法。第一种写法是在数组成员的类型后面,加上一对方括号。

//一维数组
let arr:number[] = [1,2,3] //数组类型,元素类型为number。
//如果数组成员的类型比较复杂,可以写在圆括号里面。
let arr:(number|string)[]

//多维数组
let multi:number[][] = [[1,2,3], [23,24,25]]
//示例中,变量multi的类型是number[][],表示它是一个二维数组,最底层的数组成员类型是number。

圆括号是必须的,否则因为竖杠|的优先级低于[],TypeScript 会把number|string[]理解成numberstring[]的联合类型。

TypeScript 允许使用方括号读取数组成员的类型。ArkTS现已不支持。

type Names = string[];
type Name = Names[0]; 
let na: Name = 'Alice'
console.log(typeof na)// string 

 JavaScript 规定,const命令声明的数组变量是可以改变成员的。TypeScript 允许声明只读数组,方法是在数组类型前面加上readonly关键字。

const arr2:readonly number[] = [0, 1];
arr2[1] = 2; // 报错
arr2.push(3); // 报错
示例中,arr2是一个只读数组,删除、修改、新增数组成员都会报错。

注意,readonly关键字不能与数组的泛型写法一起使用 

// 报错
const arr:readonly Array<number> = [0, 1];

TypeScript 提供了两个专门的泛型,用来生成只读数组的类型。

const a1:ReadonlyArray<number> = [0, 1];

const a2:Readonly<number[]> = [0, 1];
//示例中,泛型ReadonlyArray<T>和Readonly<T[]>都可以用来生成只读数组类型。

 两者尖括号里面的写法不一样:

  • Readonly<T[]>的尖括号里面是整个数组(number[]
  • ReadonlyArray<T>的尖括号里面是数组成员(number)。

 只读数组还有一种声明方法,就是使用“const 断言”。ArkTS现已不支持。

const arr = [0, 1] as const;

arr[0] = [2]; // 报错 
//示例中,as const告诉 TypeScript,推断类型时要把变量arr推断为只读数组,从而使得数组成员无法改变。

 4.2元组

元组(tuple)是 TypeScript 特有的数据类型,JavaScript 没有单独区分这种类型。它表示成员类型可以自由设置的数组,即数组的各个成员的类型可以不同。

数组的成员类型写在方括号外面(number[]),元组的成员类型是写在方括号里面([number])

// 数组
let a:number[] = [1];

// 元组
let t:[number] = [1];
//示例中,变量a和t的值都是[1],但是它们的类型是不一样的。a是一个数组,成员类型number写在方括号外面;t是一个元组,成员类型number写在方括号里面。

注意一 由于成员的类型可以不一样,所以元组必须明确声明每个成员的类型。


const s:[string, string, boolean]
  = ['a', 'b', true];
//示例中,元组s的前两个成员的类型是string,最后一个成员的类型是boolean。

注意二 使用元组时,必须明确给出类型声明,不能省略,否则 TypeScript 会把一个值自动推断为数组。

// a 的类型被推断为 (number | boolean)[]
let a = [1, true]
//示例中,变量a的值其实是一个元组,但是 TypeScript 会将其推断为一个联合类型的数组,即a的类型为(number | boolean)[]。所以,元组必须显式给出类型声明。

注意三 元组成员的类型可以添加问号后缀(?),表示该成员是可选的。 

let a:[number, number?] = [1];
//示例中,元组a的第二个成员是可选的,可以省略。

5.对象

对象是 JavaScript 最基本的数据结构。TypeScript 对于对象类型有很多规则。

5.1声明对象

 ArkTS删除了字面量创造对像方式 和type命令创造对象方式。只可以用class和interface命令的方式。 

//用interface的方式
interface MyObj {
  x: number;
  y: number;
}

const obj:MyObj = { x: 1, y: 1 };

//用class的方式
class C1 {
  n: number = 0
  s: string = ''
}

let o1: C1 = {n: 42, s: 'foo'};
let o2: C1 = {n: 42, s: 'foo'};
let o3: C1 = {n: 42, s: 'foo'};

let oo: C1[] = [{n: 1, s: '1'}, {n: 2, s: '2'}];

 5.2可选属性

如果某个属性是可选的(即可以忽略),需要在属性名后面加一个问号。

interface MyObj {
  x: number;
  y?: number;
  //等同于
  //y?: number|undefined;
}


const obj:MyObj = { x: 1 };
const obj1:MyObj = { x: 1 , y: undefined };
//类型MyObj的可选属性y可以是字符串,也可以是undefined,即可选属性可以赋值为undefined。

//用class的方式
class C1 {
  n: number = 0
  s?: string = ''
}

let o1: C1 = {n: 42};

5.3只读属性

属性名前面加上readonly关键字,表示这个属性是只读属性,不能修改。只读属性只能在对象初始化期间赋值,此后就不能修改该属性。

interface MyInterface {
  readonly prop: number;
}

let obj3:MyInterface = {prop:18}
obj3.prop = 16 
//prop属性是只读属性,不能修改它的值。

初始化带`readonly`字段的类在ArkTS不支持 

interface Home {
  readonly resident: { //在typescripts是可以的,但在ArkTS不支持
    name: string;
    age: number
  };
}

const h: Home = {
  resident: {
    name: 'Vicky',
    age: 42
  }
};

h.resident.age = 32; 

6.函数

6.1函数声明

函数的类型声明,需要在声明函数时,给出参数的类型和返回值的类型

7.类

8.接口interface

9.泛型

10.枚举Enum

ArkTS语法部分

1.简介

ArkTS(方舟编程语言),是华为开发的一种语言 ,  TypeScript 语言的基础上 , 增加了

  • 声明式 UI
  • 状态管理

等能力 , 可以快速开发 OpenHarmony 和 HarmonyOS 应用 ;

1.1声明式UI

ArkUI 框架提供给开发者两种开发方式:基于 ArkTS 的声明式开发范式和基于 JS 扩展 的类 Web 开发范式。

声明式和命令式都是编程编程范式。我们的ArkTS就是声明式开发范式

什么是UI?

UI就是用户界面,就是移动端屏幕预览页面。

1.2状态管理 

声明式开发范式的核心思想是数据驱动 UI 变化,通过提供的状态进行数据管理,这里 状态管理指的是,管理数据发生变化时,框架能自动更新这些数据关联的最小范围的 UI

1.3编译器介绍

DevEco Studio 是华为基于IntelliJ公司开源idea开发的软件,为华为鸿蒙操作系统(HarmonyOS)应用开发设计的一站式集成开发环境(IDE)。这个名字来源于“Developer”和“Ecosystem”的结合,强调它旨在为开发者提供一个高效、全面的开发平台,以构建HarmonyOS应用生态。

1.4HarmonyOS SDK

HarmonyOS SDK 是为了支撑 Harmony OS 应用开发而提供的一系列开放能力,包括 API 接口定义,资料文档,样例代码,基础工具包等。HarmonyOS SDK 是鸿蒙生态建设的 重要组成部分

我们所说的api12一般指的是HarmonyOS SDK版本

1.5OpenHarmony

OpenHarmony是华为开发的鸿蒙开源版本系统,后面捐给了深开鸿公司。 HarmonyOS是华为基于OpenHarmony继续开发闭源的商用版本系统。

1.6ArkTS特点

作为鸿蒙开发的主力语言,ArkTS具有如下的几个特点:

  1. 开发效率高,编程体验好

    想要完成一个手机端页面的设计如果使用传统的页面开发需要用到三种不同的技术:HTML、CSS、JS 开发体验不统一,而使用ArkTSy一种语言就可以完成传统页面开发三种技术所做的事情,具有更好的编程体验

    首先ArkTS中集成了声明式的UI组件,并且可以直接调用对象方法的方式完成组件样式的设置,同时ArkTS中还提供了状态管理机制监听数据的变化,一旦数据发生变化会造成组件的重新渲染【类似于Vue中的响应式数据】

  2. 运行效率高:得益于底层提供的方舟编译器

  3. 多系统适配和接入能力:使用ArkTS编写的代码可以适配到不同的操作系统上

  4. 因为ArkTS本身是基于TypeScript,因此在学习ArkTS之前需要掌握TypeScript语言 

2.ArkTs与TypeScript语法的不同

官方文档原话:根据开发者的反馈以及更多实际场景的数据,我们将来可能进一步缩小不支持特性的范围。意味着ArkTS语法上还会修改,修改后我将尽力更新。

2.1console.log()输出不同

在 ArkTS 中,console.log 的行为遵循 C/C++ 的 printf 风格的格式化规则,这意味着当你调用 console.log 时,你不仅需要提供要打印的变量,还需要提供一个格式字符串来描述如何打印这些变量。如果没有提供格式字符串,编译器或运行环境可能无法正确解析你的意图,从而导致编译错误。

当你添加一个空字符串 '' 或任何字符串作为第一个参数,如 console.log(' ', a, b, c),你实际上提供了一个合法的格式字符串(即使它只是一个空格或不携带任何格式信息)。这满足了 console.log 的调用规范,因此不会触发编译错误。

let num1:number = 123
let num3:number = 0xffff //16进制
console.log(num1,num3) //报错
console.log('',num1,num3) //123 65535 
console.log('%d',num1,num3) //123 65535 

2.2编译原理不同

ArkTS语言中的ets文件将会被编译成方舟字节码文件,而TypeScript是把ts文件编译成JavaScript中的js文件运行。 

2.3禁用var关键字声明变量

2.4限制运算符的语义

        1.一元运算符 '+'、`-`和`~ 只能作用于数值类型

// ArkTS仅允许一元运算符用于数值类型,否则会发生编译时错误。与TypeScript不同,ArkTS不支持隐式将字符串转换成数值,必须进行显式转换。
let a = +5;    // 5(number类型)
let b = +'5';    // 编译时错误
let c = -5;    // -5(number类型)
let d = -'5';    // 编译时错误
let e = ~5;    // -6(number类型)
let f = ~'5';    // 编译时错误
let g = +'string'; // 编译时错误

function returnTen(): string {
  return '-10';
}

function returnString(): string {
  return 'string';
}

let x = +returnTen();  // 编译时错误arkts-no-polymorphic-unops
let y = +returnString(); // 编译时错误arkts-no-polymorphic-unops

        2. 仅允许在表达式中使用typeof运算符

let n1 = 42;
let s1 = 'foo';
console.log(typeof n1); // 'number'
console.log(typeof s1); // 'string'
let n2: typeof n1 //报错 arkts-no-type-query
let s2: typeof s1 //报错 arkts-no-type-query

        3. 逗号运算符`,`仅用在`for`循环语句中 

//为了方便理解执行顺序,在ArkTS中,逗号运算符仅适用于`for`循环语句中。
//注意与声明变量、函数参数传递时的逗号分隔符不同。
for (let i = 0, j = 0; i < 10; ++i, j += 2) {
  // ...
}

let x = 0;
x = (++x, x++); // 报错`arkts-no-comma-outside-loops`

        4.不支持`is`运算符,必须使用`instanceof`和`as`进行类型保护

        5. 部分支持展开运算符

//ArkTS仅支持使用展开运算符展开数组、`Array`的子类和`TypedArray`(例如`Int32Array`)。


function foo(x: number, y: number, z: number) {
  // ...
}

let args: [number, number, number] = [0, 1, 2];
foo(...args);//报错arkts-no-spread

let point2d = { x: 1, y: 2 };
let point3d = { ...point2d, z: 3 }; //报错arkts-no-spread

//仅支持使用在以下场景中:

//1. 传递给剩余参数时 



//2. 复制一个数组到数组字面量 

let originalArray:number[] = [1, 2, 3];
let copiedArray = [...originalArray];
console.log('',copiedArray)

2.5不支持delete、in运算符 

     报错:`arkts-no-in`  `arkts-no-delete`

2.6不支持`for .. in`

//由于在ArkTS中,对象布局在编译时是确定的、并且不能在运行时被改变,所以不支持使用`for .. in`迭代//一个对象的属性。对于数组来说,可以使用常规的`for`循环。
let a: string[] = ['1.0', '2.0', '3.0'];
for (let i in a) { //报错 `arkts-no-for-in`
  console.log(a[i]); 
}

2.7 不支持`with`语句 

     报错 `arkts-no-with`

2.8 不支持交叉类型

2.9 不支持any和unknown类型 

2.10不支持索引访问类型

//对象类型不可以使用方括号读取属性的类型。
type User = {
  name: string,
  age: number
};
type Name = User['name']; // 报错`arkts-no-aliases-by-index`

2.11不支持通过索引访问字段

//ArkTS不支持动态声明字段。只能访问已在类中声明或者继承可见的字段,访问其他字段将会造成编译时错误。

2.12不支持`as const`断言

2.13对象字面量不能用于类型声明

//ArkTS不支持使用对象字面量声明类型,可以使用类或者接口声明类型。
type MyObj = {
  x:number;
  y:number;
};
const o1:MyObj = { x: 1,y:2 }; //报错 `arkts-no-obj-literals-as-types`

const obj:{
  x:number;
  y:number;
} = { x: 1, y: 1 }; //报错 `arkts-no-obj-literals-as-types`

2.14 需要显式标注对象字面量的类型

  • 初始化不具有`any`、`Object`或`object`类型的任何对象
  • 初始化不带有方法的类或接口
  • 初始化不包含自定义含参数的构造函数的类
  • 初始化不带`readonly`字段的类
//在ArkTS中,需要显式标注对象字面量的类型,否则,将发生编译时错误。在某些场景下,编译器可以根据上下文推断出字面量的类型。
//区分对象自身的属性和继承的属性

interface MyInterface {
  toString(): string; // 继承的属性
  prop: number; // 自身的属性
}

const obj:MyInterface = { //报错`arkts-no-untyped-obj-literals`
  prop: 123,
};



interface MyInterface {
  prop: number; // 自身的属性
}

const obj:MyInterface = { //正常
  prop: 123,
};
interface Home {
  readonly resident: { //在typescripts是可以的,但在ArkTS不支持
    name: string;
    age: number
  };
}

const h: Home = {
  resident: {
    name: 'Vicky',
    age: 42
  }
};

h.resident.age = 32; 

3.运行第一个工程 

3.1下载并安装软件

 点击下面最新工具即可跳转最新编译器软件

最新工具 - 下载中心 - 华为开发者联盟 (huawei.com)

安装DevEco Studio
  1. 下载完成后,双击下载的“deveco-studio-xxxx.exe”,进入DevEco Studio安装向导。在如下界面选择安装路径,默认安装于C:\Program Files路径下,也可以单击Browse...指定其他安装路径,然后单击Next

  2. 在如下安装选项界面勾选DevEco Studio后,单击Next,直至安装完成。

  3. 安装完成后,单击Finish完成安装。

3.2创建项目

  1. 打开DevEco Studio,在欢迎页单击Create Project,创建一个新工程。
  2. 根据工程创建向导,选择创建ApplicationAtomic Service。选择Empty Ability模板,然后单击Next

  3. 填写工程相关信息,单击Finish

    工程创建完成后,DevEco Studio会自动进行工程的同步。 

3.3认识工程结构

 

3.4代码结构认识和项目预览

1.认识编辑区初始代码

 

2.点击右边Previewer预览器即可预览效果 

4.ArkUI组件

组件: UI构建与显示的最小单位,如列表、网格、按钮、单选框、进度条、文本等。开发者通过多种组件的组合,构建出满足自身应用诉求的完整界面。 

4.1组件基础语法

单位

继承web单位px、calc()、百分比%

新增:

vp:虚拟像素,相对于不同的设备会自动转换,保证不同设备视角一直。ArkUI组件如果不写单位,则默认单位都是vp。

fp: 字体像素,与vp类似适用屏幕密度变化,随系统字体大小设置变化。

lpx: 视窗逻辑像素单位,lpx单位为实际屏幕宽度与逻辑宽度(通过designWidth配置)的比值,designWidth默认值为720。当designWidth为720时,在实际宽度为1440物理像素的屏幕上,1lpx为2px大小。

像素单位转换

语法: 单位A 2单位B(value : number) : number

将以A为单位的数值转换为以B为单位的数值。

  	Text("单位转换")
     	.width(vp2px(220)) //将vp单位的数值转换为以px为单位的数值。
      	.width(px2vp(220)) //将px单位的数值转换为以vp为单位的数值。
        .width(fp2px(220)) //将fp单位的数值转换为以px为单位的数值。
        .width(px2fp(220)) // 将px单位的数值转换为以fp为单位的数值。
        .width(lpx2px(220)) // 将lpx单位的数值转换为以px为单位的数值。
        .width(px2lpx(220)) // 将px单位的数值转换为以lpx为单位的数值。

枚举说明

ArkTS把一些属性值设为了一个个枚举。就拿backgroundColor这个通用属性举例。

比如HarmonyOS SDK API封装了一个Color枚举类型

enum Color{
    Black = '#000000',
    Blue = '#0000ff',
    Brown = '#a52a2a',
    Gray = '#808080',
    ......
}
Text("单位转换")
    .backgroundColor(Color.Blue) //枚举类型Color访问其中一个Blue成员。
	//等价于下面
    .backgroundColor('#0000ff')  
Resource基础类型定义

资源引用类型,用于设置组件属性的值。

$r('belonging.type.name')

belonging:系统资源或者应用资源,相应的取值为'sys'和'app';

type:资源类型,支持'boolean'、'color'、'float'、'intarray'、'integer'、'pattern'、'plural'、'strarray'、'string'、'media';

name:资源名称,在资源定义时确定。

$rawfile('filename')

filename:工程中resources/rawfile目录下的文件名称。

Image($rawfile('picture'))

4.2通用属性

ArkUI组件通用信息分为通用事件和通用属性,所有组件都能使用他们。

4.3基础组件

4.4容器属性

  • 24
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值