DEV Community

ShuGang Zhou
ShuGang Zhou

Posted on

HarmonyOS NEXT 实战系列01-ArkTS基础


插图

ArkTS是HarmonyOS优选的主力应用开发语言。ArkTS围绕应用开发在TypeScript(简称TS)生态基础上做了进一步扩展,保持了TS的基本风格,同时通过规范定义强化开发期静态检查和分析,提升程序执行稳定性和性能。

ArkTS提供了声明式UI范式、状态管理、渲染控制等相应的能力,让开发者能够以更简洁、更自然的方式开发应用。

1. ArkTS-语法-变量&常量
① 变量

// 字符串
let name: string = 'Jack'
name = 'Rose'
// 数字
let age: number = 20
age = 21
// 布尔
let isLogin: boolean = false
isLogin = true

Enter fullscreen mode Exit fullscreen mode

以关键字let开头的声明引入变量,该变量在程序执行期间可以具有不同的值。
② 注释

// 1. 单行注释
/* 2. 块注释 */
Enter fullscreen mode Exit fullscreen mode

解释代码的功能,提高代码的可读性和可维护性。
③ 输出

console.log('名字', name)
Enter fullscreen mode Exit fullscreen mode

开发者用于日志记录和调试目的。
④ 常量

const PI: number = 3.14
// PI = 2
以关键字const开头的声明引入只读常量该常量只能被赋值一次
Enter fullscreen mode Exit fullscreen mode
  1. ArkTS-语法-数组&对象 ① 定义数组
// 定义数组
let nameList: sting[] = ['Jack', 'Rose', 'James' ]
// 获取元素
console.log('名字', nameList[2])
Enter fullscreen mode Exit fullscreen mode

数组中第一个元素的索引为0
② 定义对象

// 约定接口
interface Person {
  // 属性名: 属性值
  name: string
  age: number
}

// 定义对象
let rose: Person = {
  name: 'Rose',
  age: 18
}

// 访问对象属性
console.log('名字', rose.name)
console.log('年纪', rose.age)

let jack: Person = {
  name: 'Jack',
  age: 20
}
console.log('名字', jack.name)
console.log('年纪', jack.age)
Enter fullscreen mode Exit fullscreen mode

通过接口约定对象结构
3.  ArkTS-语法-语句
① If 语句

let isLogin: boolean = true
if (isLogin) {
  console.log('状态', '已登录')
} 

// if (condition1) { 
// } else if (condition2) {
// } else {
// }
Enter fullscreen mode Exit fullscreen mode

if语句用于需要根据逻辑条件执行不同语句的场景。
② Switch 语句

// A 优 B 良  C  及格  D  差
let level: string = 'B'
switch (level) {
  case 'A':
    console.log('成绩', '')
    break;
  case 'B':
    console.log('成绩', '')
    break;
  case 'C':
    console.log('成绩', '及格')
    break;
  case 'D':
    console.log('成绩', '')
    break;
  default:
    console.log('成绩', '未知')
}
Enter fullscreen mode Exit fullscreen mode

如果switch表达式的值等于某个label的值,则执行相应的语句。
③ 条件表达式

let isLogin: boolean = true
let statusText = isLogin ? '已登录' : '未登录'
console.log('状态', statusText)
条件表达式由第一个表达式的布尔值来决定返回其它两个表达式中的哪一个
 For 语句

let sum = 0
// i ++  ---> i自加1
for (let i = 0; i < 10; i++) {
  // += i  --->  sum自加i
  sum += i
}
console.log('累加', sum)  
Enter fullscreen mode Exit fullscreen mode

for语句会被重复执行,直到循环退出语句值为false。
⑤ While 语句

let i = 0
let sum = 0
while (i < 10) {
  sum += i
  i++
}
console.log('累加', sum)  
Enter fullscreen mode Exit fullscreen mode

只要循环条件为真值,while语句就会执行对应语句。
4.  ArkTS-语法-函数
① 函数声明

function add(x: number, y: number): number {
  return x + y
}
// 调用
const result = add(10, 20)
console.log('结果', 'result')
Enter fullscreen mode Exit fullscreen mode

函数声明引入一个函数,包含其名称、参数列表、返回类型和函数体。
② 可选参数

function say(name?: string) {
  if (name) {
    console.log('hi', name)
  } else {
    console.log('hi')
  }
}
// name?: string, age· number  不允许默认参后还有其他参数
可选参数的格式可为name?: Type
function say(name: string = 'Jack') {
    console.log('hi', name)
}
Enter fullscreen mode Exit fullscreen mode

如果在函数调用中这个参数被省略了,则会使用此参数的默认值作为实参。
③ 返回类型

// 显式指定返回类型
function foo(): string { return 'foo' }
// 推断返回类型为 string
function goo() { return 'goo' }

// void 代表不需要 return 语句
function hi1() { console.log('hi') }
function hi2(): void { console.log('hi') }
Enter fullscreen mode Exit fullscreen mode

不需要返回值的函数的返回类型可以显式指定为void或省略标注。
④ 箭头函数

let add = (x: number, y: number): number => {
  return x + y
}
// 等价,如果只有一句
let add1 = (x: number, y: number) => x + y
Enter fullscreen mode Exit fullscreen mode

表达式可以指定为箭头函数,使表达更简短。
⑤ 函数类型

let add: (x: number, y: number) => number = (x, y) => x + y
Enter fullscreen mode Exit fullscreen mode

可以给变量指定函数类型,用来约束函数。
5.  ArkTS-语法-类

复用性:可以通过构造函数或类创建多个具有相同结构的对象。
封装性:可以更方便地实现私有成员和方法。
继承性:易于扩展,可以创建复杂的继承关系。
① 声明类和创建实例


class Person {
  // 字段
  name: string = '';
  surname: string = '';

  // 构造函数
  constructor(n: string, sn: string) {
    this.name = n;
    this.surname = sn;
  }

  // 方法
  fullName(): string {
    // this 当前实例
    return this.name + ' ' + this.surname;
  }
}

const person = new Person('Lebron', 'James')
console.log('全名', person.fullName())

const person2 = new Person('James', 'Harden')
console.log('全名', person2.fullName())
Enter fullscreen mode Exit fullscreen mode

类声明引入一个新类型,并定义其字段、方法和构造函数。
② 可见性修饰符

class Person {
  public name: string = ''
  private age: number = 0
}

const person = new Person()
person.name = 'Jack'
// Property 'age' is private and only accessible within class 'Person'
// person.age = 18

class BasePerson {
  protected name: string = ''
  private age: number = 0
}

// 继承
class Chinese extends BasePerson {
  test() {
    this.name = 'Jack'
    // Property 'age' is private and only accessible within class 'BasePerson'
    // this.age = 18
  }
}

const chinese = new Chinese()
// Property 'name' is protected and only accessible within class 'BasePerson' and its subclasses
// chinese.name = 'Jack'
Enter fullscreen mode Exit fullscreen mode

可见性修饰符包括:private、protected和public。默认可见性为public。
6.  ArkTS-语法-泛型

// 1. 接口
interface Result<T> {
  message: string
  code: number
  data: T
}

interface User {
  id: number
  token: string
}

const user: Result<User> = {
  message: 'success',
  code: 200,
  data: {
    id: 10086,
    token: 'mock_token'
  }
}

// 2. 类
class MockArray<T> {
  push(item: T) {
  }
}

const arr = new MockArray<string>()
arr.push('Jack')
// Argument of type 'number' is not assignable to parameter of type 'string'
// arr.push(18)

// 3. 函数
function last<T>(arr: T[]): T {
  return arr[arr.length - 1];
}
const lastItem = last<string>(['Jack', 'Rose'])
Enter fullscreen mode Exit fullscreen mode

泛型类型和接口、类、函数允许创建的代码在各种类型上运行,而不仅支持单一类型。
7.  ArkTS-语法-模块
每个模块都有其自己的作用域,即,在模块中创建的任何声明(变量、函数、类等)在该模块之外都不可见,除非它们被显式导出。

① 导出


export const count = 100
export class Person {
  name: string = ''
  age: number = 0
}
export let per = new Person()
export const add = (x: number, y: number) => x + y
Enter fullscreen mode Exit fullscreen mode

可以使用关键字export导出顶层的声明。
② 导入

// 指定成员导入
import { count, Person, per, add } from './test.ets'
// 全部导入
import * as Test from '.test1.ets'
// 成员指定别名
import { add: add2 } from '.test2.ets'
Enter fullscreen mode Exit fullscreen mode

导入从其他模块导出的实体,并在当前模块中提供其绑定。
8.  ArkTS-语法-其他类型
① 联合类型

let score: number | string = 100
let scoreList: (number | string )[] = [ 100, '99' ]
Enter fullscreen mode Exit fullscreen mode

联合类型包含了变量可能的所有类型。
② 字面量联合类型

type MyDirection = 'Up' | 'Down' | 'Left' | 'Right'
let changeDirection = (d: MyDirection) => {
 }
changeDirection('Up')
Enter fullscreen mode Exit fullscreen mode

更具体的一组可选值类型。
③ 枚举类型

// 默认是 0 开始
enum ColorSet { Red, Green, Blue }
let c: ColorSet = ColorSet.Red;
// 可以显式设置枚举常量的值
enum ColorSet { White = 0xFF, Grey = 0x7F, Black = 0x00 }
let c: ColorSet = ColorSet.Black;
Enter fullscreen mode Exit fullscreen mode

预先定义的一组命名值的值类型,更有含义,可读性好

Top comments (0)

Playwright CLI Flags Tutorial

5 Playwright CLI Flags That Will Transform Your Testing Workflow

  • 0:56 --last-failed
  • 2:34 --only-changed
  • 4:27 --repeat-each
  • 5:15 --forbid-only
  • 5:51 --ui --headed --workers 1

Learn how these powerful command-line options can save you time, strengthen your test suite, and streamline your Playwright testing experience. Click on any timestamp above to jump directly to that section in the tutorial!

Watch Full Video 📹️