问题来源于 React.component的第二个参数的类型定义问题,我构建了以下简化demo,方便描述问题:

class P<STATE> {
public state: STATE;
} interface Obj {
arr: Obj[];
} class Test1 extends P<Obj> {
public state = {arr: []}; func(obj: Obj) {
this.state.arr.push(obj);// 这里ts在obj上抛错 Error:(51, 29) TS2345: Argument of type 'Obj' is not assignable to parameter of type 'never'.
}
}

这里主要产生的问题是,我们认为 this.state.arr 应该是Obj[] 类型,所以可以往里面push进去Obj类型的数据,然而this.state.arr却被识别为never[]类型,所以push会抛错。

分析后,发现虽然Test1的state在设置默认值的时候可以使用父类 P 中state的类型定义,但是,在函数中 this.state的类型定义却是使用 默认值 {arr: []} 的类型推断。推断出的类型为{arr:never[]}。

所以产生以上问题。

于是,我们可以这样处理:

class Test2 extends P<Obj> {
public state: Obj = {arr: []}; // 子类同时定义state类型为Obj func(obj: Obj) {
this.state.arr.push(obj);
}
}

但是这就导致Obj需要定义两次。

我们又注意到,在构造函数中直接赋值,也可以解决该问题:

class Test3 extends P<Obj> {
constructor() {
super();
this.state = {arr: []}; // 直接在constructor中赋值
} func(obj: Obj) {
const str: string = this.state;
this.state.arr.push(obj);
}
}

但是写起来是比较麻烦的,每次都要写构造函数。

最后,我们按赋值的思想,考虑使用中间类方式:

// 中间类,继承P<T> 这里P类通常为第三方类,如React.Component
abstract class Middle<T> extends P<T> {
protected constructor() {
super();
if (this.initState) {
this.state = this.initState();
}
} abstract initState(): T;
} class Test2 extends Middle<Obj> {
initState() {// 通过方法来初始化state
return {arr: []};
} func(obj: Obj) {
const str: string = this.state;
this.state.arr.push(obj);
}
}

我们在中间类中定义了构造函数来默认调用initState函数,然后让state的初始值作为函数的返回值,可以解决属性默认值的类型覆盖了父类对属性参数的定义。

引进来的代价是我们需要一个中间类。

不过,考虑中间类的引入,可以带来比较多的扩展性,权衡之下,还是可取的。

typescript 关于class属性类型定义被属性默认值覆盖的问题及解决方式的更多相关文章

  1. ReferenceError: Error #1069: 在 spark.components.RadioButtonGroup 上找不到属性 label,且没有默认值

    1.错误描写叙述 ReferenceError: Error #1069: 在 spark.components.RadioButtonGroup 上找不到属性 label,且没有默认值. at Ch ...

  2. Java 创建数组的方式, 以及各种类型数组元素的默认值

    ①创建数组的方式3种 ①第1种方法 public class MyTest { public static void main(String[] args){ //method 1 int[] arr ...

  3. MySql折腾小记二:text/blog类型不允许设置默认值,不允许存在两个CURRENT_TIMESTAMP

    From: http://www.cnblogs.com/cyq1162/archive/2011/05/17/2049055.html 在 CYQ.Data 数据框架的反向工程中,遇到MySQL的问 ...

  4. C++入门经典-例9.5-为具体类型的参数提供默认值

    1:默认模板参数是指类模板中由默认的数据类型作为参数的参数,在模板定义时,还可以为默认的数据类型声明,变量,并为变量赋值.代码如下: // 9.5.cpp : 定义控制台应用程序的入口点. #incl ...

  5. mysql5.7 date类型无法设置'0000-00-00'默认值

    现象: mysql5.7之后版本datetime默认值设置'0000-00-00',出现异常:Invalid default value for 'create_time' 原因: mysql5.7之 ...

  6. Swift学习之方法定义参数有默认值的时候

    func testParms(first fir:String, options opt:JSONSerialization.ReadingOptions = []) -> Bool { ret ...

  7. odoo开发笔记 -- 模型字段定义中设置默认值

    例如: company_id = fields.Many2one('res.company', string='Company', default=lambda self: self.env['res ...

  8. SpringMVC,Controller的返回页面类型以及路径设置默认值

    一般设置在spring-servlet.xml里面设置 <!-- 对转向页面的路径解析.prefix:前缀, suffix:后缀 --> <bean class="org. ...

  9. java字符串转换数值类型出现异常赋予默认值

    http://blog.csdn.net/w47_csdn/article/details/77855126 可以自定义工具方法,例如: public static int parseInt(Stri ...

随机推荐

  1. 启动Weblogic问题集锦

    报错1:Could not obtain the localhost address. The most likely cause is an error in the network configu ...

  2. Oracle rac 监听状态异常远程连接问题解决(TNS-12541 TNS-12560 TNS-00511 Linux Error:111 ORA-12502)

    问题1现象 数据导出脚本执行失败,报错如下 ORA-12537 到服务器上查看,报错: [oracle@test ~]$ lsnrctl status LSNRCTL - Production on ...

  3. Codeforces 101623E English Restaurant - 动态规划

    题目传送门 传送门 题目大意 餐厅有$n$张桌子,第$i$张桌子可以容纳$c_i$个人,有$t$组客人,每组客人的人数等概率是$[1, g]$中的整数. 每来一组人数为$x$客人,餐厅如果能找到最小的 ...

  4. 软件测试4gkd

    一.性能测试有几种类型,它们之间什么关系? (1)性能测试包括:负载测试.压力测试.配置测试.并发测试.容量测试.可靠性测试.失败测试. 负载测试:通过逐渐增加系统的负载,测试系统性能的变化,并最终确 ...

  5. 2019-4-23 plan

    需要制作springcloud es6的技术文档和demo

  6. ASP.NET MVC WebAPI Put和Delete请求出现405(Method not allowed)错误

    解决办法: 在站点根目录下的web.config设置如下(主要参考添加项): <system.webServer> <modules> <remove name=&quo ...

  7. Windows 7环境下网站性能测试小工具 Apache Bench 和 Webbench使用和下载

    1.简要说明: Apache Bench 是Apache的网站性能测试小程序,Windows平台下的程序名简称ab.exe,要想获得这个80k的可执行程序,用户需要下载整个Apache Httpd软件 ...

  8. toFixed()精度丢失;复选框全选、取消

    一.精度丢失和重写toFixed()函数 1.重写toFixed() Number.prototype.toFixed = function(length){ var carry = 0; //存放进 ...

  9. LoRa无线技术介绍

    什么是LoRa LoRa是semtech公司创建的低功耗局域网无线标准,低功耗一般很难覆盖远距离,远距离一般功耗高,要想马儿不吃草还要跑得远,好像难以办到.LoRa的名字就是远距离无线电(Long R ...

  10. 自己封装的一个类似axios的请求

    下载:https://pan.baidu.com/s/1k0-CpGGtfDTsCm85NMfuHA 使用: axios({ method:'post', baseURL:baseAddress, u ...