TYPESCRIPT typescript中如何继承Array、Error等原生数据结构类

在项目中发现,ES6中的Array原生类的继承在TS中无法实现了,子类定义的方法不见丢失了,代码编译后其实发生了变化(在2.1.5之后),至于为什么会发生这种现象,

miscrosoft给出的解释是

In ES2015, constructors which return an object implicitly substitute the value of this for any callers of super(...). It is necessary for generated constructor code to capture any potential return value of super(...) and replace it with this.

As a result, subclassing Error, Array, and others may no longer work as expected. This is due to the fact that constructor functions for Error, Array, and the like use ECMAScript 6's new.target to adjust the prototype chain; however, there is no way to ensure a value for new.target when invoking a constructor in ECMAScript 5. Other downlevel compilers generally have the same limitation by default.

 简而言之就是es6中,Error, Array和其他原生类的extends需要通过super调用来完成原型链的继承,而其中最关键的一步是通过调用构造函数的target来寻找原型链,而在es5中,没法确保构造函数的target,也就无法完整查找到当前的子类的构造函数的原型实例,从而只实现父类的继承,只会返回父类this,但是原型链确断裂了。关于new.target的了解,可以跳转MDN的介绍。

解决办法

虽然TS无法为我们实现继承,但是我们可以自己为子类实现原型的继承,这样子类依然有我们子类的方法。原理呢还是利用es5的组合继承。

在子类的构造函数中调用完父类后,再把原型链指回自身。

constructor(m: string) {
        super(m);

        // Set the prototype explicitly.
        Object.setPrototypeOf(this, FooError.prototype);
    }

这样,在在子类上定义的方法就不会丢失,因为我们又把原型指回了子类。

### HarmonyOS 中通过 `params` 传递数据的方法 在 HarmonyOS 开发中,可以通过 HTTP 请求中的参数(`params`)来实现数据的传递。以下是基于 HarmonyOS 提供的 `@ohos.net.http` 模块以及第三方库 Axios 的两种方式。 #### 使用 `@ohos.net.http` 进行 GET 请求并携带 `params` 鸿蒙官方提供了 `@ohos.net.http` 模块用于处理网络通信,支持多种 HTTP 方法,其中包括 GET 和 POST 等常见操作[^2]。下面是一个使用该模块发送带有查询参数的 GET 请求的例子: ```javascript import http from '@ohos.net.http'; function fetchData() { let request = http.createHttp(); let url = 'https://example.com/api/data'; // 替换为目标接口地址 // 构造 URL 参数 let params = new Map([ ['key1', 'value1'], ['key2', 'value2'] ]); // 将参数拼接到 URL 上 let queryString = Array.from(params.entries()).map(([k, v]) => `${encodeURIComponent(k)}=${encodeURIComponent(v)}`).join('&'); let fullUrl = `${url}?${queryString}`; request.request(fullUrl, (err, data) => { if (err) { console.error('Error:', err); return; } console.log('Response Data:', data.body.toString()); }); } ``` 上述代码片段展示了如何手动构建查询字符串并将之附加到目标 URL 后面,从而完成带参请求的操作。 --- #### 使用 Axios 库进行更简洁的数据传递 如果希望简化开发流程,则可以引入第三方库 Axios 来辅助完成这一过程。不过需要注意的是,在 HarmonyOS 平台上集成 Axios 需要借助其专用包管理工具 ohpm 完成安装工作[^5]。一旦成功配置好环境之后即可按照如下方式进行编码: ```typescript // 假设已正确设置 axios 实例 const axiosInstance = require('axios'); async function postDataWithParams() { try { const response = await axiosInstance.get('https://example.com/api/resource', { params: { keyA: 'valA', keyB: 'valB' } }); console.log(response.data); // 输出服务器返回的结果 } catch (error) { console.error(error.message || error.stack); } } ``` 此部分利用了 Axios 自动序列化对象为查询串的功能特性,使得开发者无需再单独编写逻辑去转换键值对形式的数据结构成为标准格式化的 URI 组件。 --- ### 总结 无论是采用原生 API (`@ohos.net.http`) 或者外部依赖项 (Axios),都可以有效地达成向远程服务提交额外信息的目的。对于初学者而言推荐优先熟悉前者以便于理解底层机制;而对于追求效率或者已有经验积累的技术人员来说后者无疑更加友好便捷。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值