首页 > 其他分享 >手把手教你华为鸿蒙开发之第十二节

手把手教你华为鸿蒙开发之第十二节

时间:2024-12-10 21:10:03浏览次数:5  
标签:name 鸿蒙 示例 手把手 接口 华为 泛型 fn string

华为鸿蒙开发:深入掌握 TypeScript 接口、类和泛型

引言

在现代软件开发中,TypeScript 提供的接口(Interfaces)、类(Classes)和泛型(Generics)是构建可维护和可扩展代码的重要工具。华为鸿蒙操作系统的开发环境 DevEco Studio 支持 TypeScript,使得开发者可以利用这些特性来构建类型安全的应用程序。本文将详细介绍接口、类和泛型的基本概念,并通过示例代码展示如何在鸿蒙应用中使用这些特性。

接口(Interfaces)

接口在 TypeScript 中用于定义对象的形状,它可以帮助我们约束变量和函数的参数。

示例1:定义接口并使用

interface IAnimal {
  name: string;
  age: number;
}

interface ICat extends IAnimal {
  hair: string;
}

interface IDog extends IAnimal {
  color: string;
}

let dog1: IDog = {
  name: '小黑',
  age: 3,
  color: '黑色'
};

在这个示例中,我们定义了两个接口ICatIDog,它们都继承自IAnimal接口。然后我们创建了一个满足IDog接口的对象dog1

类(Classes)

类是 TypeScript 中创建对象的蓝图,它允许我们定义属性和方法,并创建实例。

示例2:实现接口的类

interface IDog {
  name: string;
  age: number;
  jump: () => void;
}

class Dog implements IDog {
  name: string;
  age: number;
  desc: string;

  constructor(name: string, age: number, desc: string) {
    this.name = name;
    this.age = age;
    this.desc = desc;
  }

  jump() {
    console.log(`${this.name} is jumping.`);
  }
}

let dog: Dog = new Dog('小飞', 2, '是一只非常帅气的二哈');
dog.jump();

在这个示例中,我们定义了一个IDog接口,并创建了一个Dog类来实现这个接口。Dog类有一个jump方法,我们在创建实例后调用了这个方法。

泛型(Generics)

泛型允许我们创建可重用的组件,这些组件可以工作在不同的数据类型上。

示例3:泛型函数

function fn<t>(param: T): T {
  return param;
}

fn<string>('Hello');
fn<number>(123);
fn<boolean>(true);
fn<number[]>([1, 2, 3, 4, 5]);

在这个示例中,我们定义了一个泛型函数fn,它可以接收任何类型的参数并返回相同类型的值。

示例4:泛型约束

interface ILength {
  length: number;
}

function fn<t extends ilength>(param: T) {
  console.log(param.length);
}

fn<string>('abc');
fn<number[]>([1, 2, 3]);

在这个示例中,我们定义了一个泛型函数fn,它接受一个参数,该参数必须有一个length属性。

示例5:多个泛型变量

function fn<t1, t2>(param1: T1, param2: T2) {
  console.log('参数1', param1);
  console.log('参数2', param2);
}

fn<string, boolean>('Hello', true);
fn<number, string>(123, 'abc');

在这个示例中,我们定义了一个接受两个泛型参数的函数fn,并分别传入了不同类型的参数。

示例6:泛型接口

interface IdFunc<t> {
  id: (value: T) =&gt; T;
  ids: () =&gt; T[];
}

let obj: IdFunc<number> = {
  id(value: number) {
    return value;
  },
  ids() {
    return [1, 2, 3];
  }
};

在这个示例中,我们定义了一个泛型接口IdFunc,并创建了一个满足这个接口的对象obj

示例7:泛型类

class Person<t> {
  id: T;
  constructor(id: T) {
    this.id = id;
  }
  getId(): T {
    return this.id;
  }
}

let p: Person<number> = new Person<number>(10);
let p2: Person<string> = new Person<string>('abc');

在这个示例中,我们定义了一个泛型类Person,并创建了两个不同数据类型的实例pp2

结语

通过本文的详细介绍和示例,你应该能够掌握 TypeScript 接口、类和泛型的基本概念和用法。这些技能对于开发具有复杂逻辑和数据结构的鸿蒙应用至关重要。如果你有任何问题或想要进一步讨论,欢迎在评论区留下你的想法。


以上就是一篇关于华为鸿蒙开发中 TypeScript 接口、类和泛型的详细教程。希望这篇文章能帮助你更好地理解和使用华为鸿蒙开发中的这些特性。如果你在使用 DevEco Studio 进行开发时遇到任何问题,欢迎交流讨论。
</number,></string,></t1,></number[]></number[]>

标签:name,鸿蒙,示例,手把手,接口,华为,泛型,fn,string
From: https://www.cnblogs.com/Thewang/p/18598027

相关文章

  • 手把手教你华为鸿蒙开发之第十节
    华为鸿蒙开发:深入探索Tabs组件的定制与应用引言在移动应用设计中,标签页(Tabs)是用户切换不同内容区块的重要界面元素。华为鸿蒙操作系统提供的Tabs组件支持开发者创建高度定制化的标签页界面。本文将通过DevEcoStudio详细介绍Tabs组件的使用,包括基本设置、动态生成标签页、以及......
  • 【恭喜你!认证通过 | HCIP题库 04】华为云HCIP云计算中级认证工程师题库,速刷!
    401.以下关于管理组件概念,说法错误的是?A.GaussDB为ITA、HDC提供数据库,用于存储数据信息B.TCM为升腾曦帆桌面管理系统,管理员通过TCM对TC进行日常管理C.License服务器是License的管理与发放系统,负责HDC的License管理与发放D.ITA可以处理虚拟机登录请求答案:D......
  • 手把手教你用python一键抢12306火车票(附代码)
    源码直接在pycharm里面打开即可用github链接:w1a2b3c/123061:12306抢票脚本,学生票,为了买票纯手写gitee链接:eric/12306抢票脚本,学生票,为了买票纯手写哈喽,哈喽~,一年一度的抢火车票大战正式拉开序幕…然饿大多数人碰到的是这种情况:当你满心期待摩拳擦掌准备抢票的时候,你会发现......
  • 鸿蒙 Next 中 Provide 和 Consume 的用法总结
    一、概述在鸿蒙Next中,@Provide和@Consume装饰器用于在祖先组件与后代组件之间实现双向数据同步,适用于状态数据在多个层级之间传递的场景,摆脱了父子组件间命名参数传递机制的束缚。从APIversion9开始,这两个装饰器支持在ArkTS卡片中使用,从APIversion11开始,支持在元服务中使用。......
  • 华为路由器/交换机为电脑分配IPv6的配置方式 ----无状态自动配置
    一、配置需求  虽然IPv6技术已出现好多年了,运营商也在响应国家号召,在各个领域都已基本完成了IPv6的部署,但由于各种原因,企业用户似乎对IPv6不是很感冒,虽然从运营商那里获得了IPv6,但基本都是闲置状态,这就导致IPv6没有在客户侧大规模使用。这不,前段时间有一位客户来电咨询关......
  • 鸿蒙 Next 中 Prop 的用法详解
    一、@Prop概述在鸿蒙Next中,@Prop装饰器用于在父子组件之间建立单向的数据同步关系。这意味着数据从父组件流向子组件,子组件对@Prop装饰变量的修改不会同步回父组件。从APIversion9开始,该装饰器支持在ArkTS卡片中使用,从APIversion11开始,支持在元服务中使用。(一)同步机制父组......
  • 华为编程-合并两个有序链表
    题目:将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。例如下图:解法一(指针迭代思想):除了输入的两个链表指针l1和l2之外,再定义四个指针,分别为current1、current2、final和current_final。其中current1和current2为链表一......
  • 华为、荣耀手机微信聊天记录删除怎么恢复
    华为、荣耀手机最新的微信记录恢复方法,简单有效。HiSuite是华为手机官方的手机电脑助手管理软件,可以把手机设备上的数据备份至电脑,支持联系人、短信、应用程序等的备份。同样HiSuite也可以把微信库文件完整地备份到电脑上,这样就可以扫描微信库文件中待回收区域中的删除记录,从而实......
  • 鸿蒙原生开发环境的创新与性能优化:从工具到跨平台支持的全方位提升
    鸿蒙原生开发环境的创新与性能优化:从工具到跨平台支持的全方位提升一、引言随着鸿蒙操作系统的不断发展,开发者对开发工具的要求也在逐渐提高。高效、智能的开发工具不仅能够帮助开发者快速实现创意,还能在开发过程中提供更好的支持和体验。本文将深入探讨鸿蒙原生开发中的......
  • 同一套RN代码,运行在原生鸿蒙端结果不一样?
    一、创作背景我最近开发鸿蒙的时候碰到一个很奇怪的问题,在这里给大家分享一下。如果后面大家也碰到类似的问题,可以作为修改参考。二、问题描述RN鸿蒙端开发的时候,可能碰到调试时和正式发版时展示效果不一致的情况。我这里有一段最简单的JS代码,只有一个View和一个Text,具体代码......