当前位置：首页 > news >正文

鸿蒙ArkUI布局与样式进阶（十四）——剩余参数 · 展开运算符 · 接口继承 · 接口实现 · 泛型全面讲解

news 2025/10/29 7:50:22

🚀 鸿蒙开发入门必看！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: stringbark: () => void
}
class Dog implements IDog {name: string = ''food: string = '' // 允许扩展属性bark() {console.log("汪汪汪")}
}

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

interface IDog {name: stringage: numberjump: () => void
}
// 基于接口，实现类
class Dog implements IDog {name: stringage: number // 不写默认值也可以constructor(name: string, age: number) {this.name = namethis.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自动刷新
接口继承	数据结构复用	多组件共享模型
接口实现	强行为约束	业务逻辑强制完整
泛型	通用组件逻辑	列表/弹窗/服务复用