V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
coderabbit
V2EX  ›  TypeScript

刚上手 typescript 这个类型我真不知道咋定义了!

  •  
  •   coderabbit · 2020-03-19 22:45:51 +08:00 · 2590 次点击
    这是一个创建于 1469 天前的主题,其中的信息可能已经有所发展或是发生改变。

    之前 webpack 配置的 jsx.后面上了 ts,再到后来开启了 eslint. 没有开启 eslint 的时候都能正常不报错。后面开启后我始终不知道这个应该怎么定义了! 代码:

    import * as React from 'react';
    import {BaseProps} from '../commonProps';
    import {Config, ClassNames, PropTypes} from '../component';
    
    interface IIconProps extends BaseProps {
      name: string,
      color?: string,
      size?: number | string,
      onClick?: (e: React.MouseEvent<HTMLElement>) => void
    }
    
    const Icon: React.FC<IIconProps> = (props: IIconProps) => {
      const prefixCls = `${Config.prefix}-icon`;
      const {className, style, name, color, size, onClick} = props;
      const iconStyles = (): object => {
        const sty: React.CSSProperties = {fontSize: null, color: null};
        if (Number.isInteger(size as number)) {
          sty.fontSize = `${size}px`;
        } else {
          sty.fontSize = size;
        }
        if (color) {
          sty.color = color;
        }
        return Object.assign(sty, {...style});
      };
      const cls = ClassNames(
        `${prefixCls}__${name}`,
        className
      );
      const sty = iconStyles();
      const handleClick = (e: React.MouseEvent<HTMLElement>) => {
        if (typeof onClick === 'function') {
          onClick(e);
        }
      };
    
      return <i className={cls} style={sty} onClick={handleClick}/>;
    };
    
    Icon.propTypes = {
      className: PropTypes.string,
      style: PropTypes.objectOf(PropTypes.object),
      name: PropTypes.string,
      color: PropTypes.string,
      size: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
      onClick: PropTypes.func
    };
    
    export default Icon;
    
    

    然后 eslint 报

    Failed to compile.
    
    [at-loader] ./src/components/icon/Icon.tsx:39:6 
        TS2339: Property 'propTypes' does not exist on type '(props: any) => DetailedReactHTMLElement<{ className: any; style: any; onClick: (e: any) => void; }, HTMLElement>'.
    

    我怎么定义它都是报这个错特来向大家请教,谢谢!

    6 条回复    2020-03-27 16:15:57 +08:00
    seki
        1
    seki  
       2020-03-19 23:06:54 +08:00
    从 ../components 里面 import 的 PropTypes 是啥
    yuang
        2
    yuang  
       2020-03-19 23:33:09 +08:00 via Android
    用了 ts 之后就不需要 PropTypes 了,直接把后面那坨删掉就好
    dremy
        3
    dremy  
       2020-03-20 00:32:56 +08:00 via iPhone
    楼主你这么写 FC,性能堪忧啊
    举个最简单的例子,onClick 就不用自己再包装一层了吧,真的是负优化…
    coderabbit
        4
    coderabbit  
    OP
       2020-03-20 08:52:51 +08:00
    @seki 就是个 interface @yuang 我看别的也定义了 propTypes @dremy 谢谢 之前在额外的 click 里做了事情没有删除完!看来我得去补一波 ts 了
    seki
        5
    seki  
       2020-03-20 16:59:34 +08:00
    PropTypes 不是直接从 prop-types 里面 import 进来就好了吗
    llb123
        6
    llb123  
       2020-03-27 16:15:57 +08:00
    用 ts 就是为了不写后面那坨 propTypes 啊。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   3317 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 11:24 · PVG 19:24 · LAX 04:24 · JFK 07:24
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.