🚀 鸿蒙开发入门必看！30 分钟掌握 ArkUI 界面开发

       大家好，我又来更新我的学习笔记啦！📒 这是我在学习HarmonyOS ArkUI 开发 时新的整理与思考。本篇内容比较全面，说实话，光靠看官方文档很难完全消化知识点，而把它们转化为笔记，再写成文章，能加深很多理解。所以这篇文章里，我不仅整理了原始代码，还会穿插一些自己的见解和体会，帮助你更好地掌握这些知识。  

        这是我在学习 TS 时整理的核心知识点，加入了真正理解后的总结和工程经验，希望能帮到你。本编包含所有接口的用法和定义，是对该板块的总结篇，如有疑问欢迎与驻波讨论学习。

目录

✅ 一.剩余参数 & 展开运算符

✨定义 — 剩余参数（Rest Parameters）

✨定义 — 展开运算符（Spread）

✅ 二.接口继承（extends）

✅三.接口实现（implements）

✅ 一图带你记住所有知识点！

✅ 一.剩余参数 & 展开运算符

ArkUI 组件交互中最强「动态能力」

✨定义 — 剩余参数（Rest Parameters）

将不确定数量的参数收集成数组
✅ 只能出现在参数列表最后

🧠ArkUI 个人理解

适用于事件回调或业务运算参数不确定情况
逻辑更灵活，函数更通用

语法：

✅ 案例1：原笔记示例完整复刻 + 扩展

function sum(num1: number, num2: number, ...theArgs: number[]): number {
  let total = num1 + num2;
  for (const arg of theArgs) {
    total += arg;
  }
  return total;
}

console.log(sum(1, 2).toString());        // 3
console.log(sum(1, 2, 3, 4).toString());  // 10

📌输出
✔ 3
✔ 10

✅ 案例2（笔记内完整版）

— 带必选参数，剩余参数运算累加

function sum(n1: number, n2: number, ...argArr: number[]): number {
  console.log('剩余参数', argArr);
  let total: number = n1 + n2;
  for (let temp of argArr) {
    total += temp;
  }
  console.log('结果', total);
  return total;
}
// sum(1, 2) => 3
// sum(1, 2, 3, 4) => 10
// sum(1, 2, 3, 4, 5, 6) => 21

⚠️ArkUI 增补坑点

❌ 剩余参数不能写在前面，否则报错
✅ 一定是 (...args)

✨定义 — 展开运算符（Spread）

将数组/对象打散
✅ 常用于响应式数据更新

🧠ArkUI理解

ArkUI 响应式刷新依赖不可变数据
展开运算符 = 更新 UI 最推荐操作！

✅ 原笔记案例

const numArr1: number[] = [1, 2, 3];
const numArr2: number[] = [5, 6, 7];
// 数组遍历
const totalArr: number[] = [...numArr1, ...numArr2];
console.log('展开的数组', totalArr);

📌输出结果

展开的数组 [1,2,3,5,6,7]

✅ UI 场景
列表追加数据、瀑布流填充、懒加载

✅ 二.接口继承（extends）

✨定义

一个接口可继承另一个接口属性
实现数据抽象复用

🧠ArkUI理解

数据模型复用 → UI组件开发更高效

语法：

✅ 原笔记示例

interface IAnimal {
  name: string
}
interface ICat extends IAnimal {
  color: string
}
const cat: ICat = {
  name: '加菲猫',
  color: '黑色'
}

📌说明
✔ ICat 包含 name + color
✔ 可用于卡片组件展示

✅三.接口实现（implements）

让类强制遵循业务标准

✨定义

类必须实现接口所有属性和方法
否则报错 ✅

🧠 ArkUI理解

类似组件约束规范，避免遗漏功能引发 UI Bug

语法：

✅ 示例 1（方法必实现）

interface IDog {
  name: string
  bark: () => void
}
class Dog implements IDog {
  name: string = ''
  food: string = '' // 允许扩展属性
  bark() {
    console.log("汪汪汪")
  }
}

✅ 示例 2（笔记完整例子）

interface IDog {
  name: string
  age: number
  jump: () => void
}
// 基于接口，实现类
class Dog implements IDog {
  name: string
  age: number // 不写默认值也可以
  constructor(name: string, age: number) {
    this.name = name
    this.age = age
  }
  jump() {
    console.log('跳起来')
  }
}
let dog: Dog = new Dog('旺财', 2) // 是一只非常帅的狗狗
dog.jump()

✅四.泛型（Generics）

ArkUI 可复用组件的灵魂能力！

✨定义

类型可作为参数传递
函数/类可支持多种数据类型

🧠ArkUI理解

一套组件适配多种类型，减少重复 UI 开发！

✅ 原笔记示例合集（语法 ✅）

function fn1(temp: string): string {
  return temp
}
function fn2(temp: number): number {
  return temp
}
function fn3(temp: boolean): boolean {
  return temp
}

🙅‍♂️ 缺点：重复代码太多

✅ 泛型万能函数

function fn<T>(param: T): T {
  return param
}
fn<string>('abc')
fn<number>(123)
fn<boolean>(true)
fn<number[]>([1, 2, 3, 4, 5])
// 类型推断
fn('abc')
fn(123)
fn(true)
fn([1, 2, 3, 4, 5])

✅ 泛型数组长度函数（笔记示例）

function getLength<T>(arr: T[]): number {
  return arr.length
}
console.log(getLength<number>([1, 2, 3])) // 3
console.log(getLength<string>(['a', 'b', 'c'])) // 3

✔任何数组 ✅
✔类型安全 ✅

✅ 一图带你记住所有知识点！

能力	核心作用	ArkUI 使用场景
剩余参数	动态参数收集	事件回调、多状态更新
展开运算符	不可变数据更新	响应式UI自动刷新
接口继承	数据结构复用	多组件共享模型
接口实现	强行为约束	业务逻辑强制完整
泛型	通用组件逻辑	列表/弹窗/服务复用

🎯掌握以上知识点，你就可以在 ArkUI 项目中写出高效、可维护、可扩展的面向代码。

💡掌握了 剩余参数 · 展开运算符 · 接口继承 · 接口实现 · 泛型技巧，也就掌握了 ArkUI 的一半交互核心！

恭喜您，迈出了鸿蒙应用开发坚实的一步！🎉

🤔 接下来，我将继续为大家更新鸿蒙开发的相关知识点，如果喜欢，记得关注驻波。

✅ 如果你觉得这篇 ArkUI 学习笔记对你有帮助，记得 点赞 + 收藏，关注我获取更多鸿蒙开发干货！📝 有任何问题欢迎在评论区留言，我们一起交流学习！

过往的博客欢迎各位大佬捧场。

对harmonyos感兴趣的培养记得关注驻波

那年窗外下的雪.-CSDN博客