• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

react+typescript报错集锦持续更新

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

typescript报错集锦

  • 错误:Import sources within a group must be alphabetized.tslint(ordered-imports)

原因:import名称排序问题,要求按照字母从小到大排序;

解决方案:修改 tslint.json 中 rules 的规则 “ordered-imports” 为 false 即可。

"rules": {
  "ordered-imports": false
}
  • vscode打开ts项目,cpu爆满,温度升高

原因:code helper进程占用过高,系统与软件问题
解决方案:修改vs code用户设置

"files.exclude": {
        "**/.git": true,
        "**/.svn": true,
        "**/.hg": true,
        "**/CVS": true,
        "**/.DS_Store": true,
        "**/tmp": true,
        "**/node_modules": true,
        "**/bower_components": true,
        "**/dist": true
    },
    "files.watcherExclude": {
        "**/.git/objects/**": true,
        "**/.git/subtree-cache/**": true,
        "**/node_modules/**": true,
        "**/tmp/**": true,
        "**/bower_components/**": true,
        "**/dist/**": true
    }
  • 对象属性赋值报错

原因:在JavaScript中,我们经常会声明一个空对象,然后再给这个属性进行赋值。但是这个操作放在TypeScript中是会发生报错的:

let a = {};

a.b = 1;

// 终端编译报错:TS2339: Property 'b' does not exist on type '{}'.
// 编辑器报错:[ts] 类型“{}”上不存在属性“b”。

解决方案:

这是因为TypeScript不允许增加没有声明的属性。
因此,我们有两个办法来解决这个报错:
在对象中增加属性定义(推荐)。具体方式为:let a = {b: void 0};。这个方法能够从根本上解决当前问题,也能够避免对象被随意赋值的问题。
给a对象增加any属性(应急)。具体方式为:let a: any = {};。这个方法能够让TypeScript类型检查时忽略这个对象,从而编译通过不报错。这个方法适用于大量旧代码改造的情况。

  • react-redux react-router4在typescript类型检查下报类型错误
    原因:在react项目中,页面需要获取路由信息,且在用了react-redux的情况下,需要将路由与redux做关联
    正常写法:
import { connect } from 'react-redux';
import { actionCreators } from './store'
import { withRouter } from 'react-router-dom';

export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

react使用了typescript情况下:会报错:
错误提示:类型“ConnectedComponentClass<typeof Login, Pick<LoginProps, "handleNameChange" | "handlePassWordChange" | "handleSubmit">>”的参数不能赋给类型“ComponentType<RouteComponentProps<any, StaticContext, any>>”的参数。 不能将类型“ConnectedComponentClass<typeof Login, Pick<LoginProps, "handleNameChange" | "handlePassWordChange" | "handleSubmit">>”分配给类型“ComponentClass<RouteComponentProps<any, StaticContext, any>, any>”。 属性“propTypes”的类型不兼容。

解决方案:router4会给我们提供一个RouteComponentProps接口,在文档中没说明,自己去代码中看,将类型加入到代码中

import { connect } from 'react-redux';
import { withRouter, RouteComponentProps } from 'react-router-dom';
interface Props {
}
class Login extends Component<RouteComponentProps & Props>{}
withRouter(connect(mapStateToProps, mapDispatchToProps)(Login));

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
TypeScript联合类型发布时间:2022-07-18
下一篇:
【翻译】在TypeScript中,Extends和Implements一个抽象类有什么不同 ...发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap