使用动态道具解构将基于 Class 的 js 组件转换为 typescript 组件

Question

I have a class based component like this

class ArInput extends React.Component {
  render() {
    const { shadowless, success, error } = this.props;

    const inputStyles = [
      styles.input,
      !shadowless && styles.shadow,
      success && styles.success,
      error && styles.error,
      {...this.props.style}
    ];

    return (
      <Input
        placeholder="write something here"
        placeholderTextColor={argonTheme.COLORS.MUTED}
        style={inputStyles}
        color={argonTheme.COLORS.HEADER}
        iconContent={
          <Icon
            size={14}
            color={argonTheme.COLORS.ICON}
            name="link"
            family="AntDesign"
          />
        }
        {...this.props}
      />
    );
  }
}

I'm trying to convert above class to functional based component with react hooks. This is the best I came up with in typescript

const ArInput =({ shadowless, success, error, style }:any)=> {

    const inputStyles = [
      styles.input,
      !shadowless && styles.shadow,
      success && styles.success,
      error && styles.error,
      {...style}
    ];

    return (
      <Input
        placeholder="write something here"
        placeholderTextColor={argonTheme.COLORS.MUTED}
        style={inputStyles}
        color={argonTheme.COLORS.HEADER}
        iconContent={
          <Icon
            size={14}
            color={argonTheme.COLORS.ICON}
            name="link"
            family="AntDesign"
          />
    }
    { ...shadowless, ...success, ...error, ...style }
  />
);

}

but I'm getting an error on this line {...shadowless, ...success, ...error, ...style }

The error is Expression expected.ts(1109)

In javascript code this the respectful line is {...this.props}

How can I convert my javascript class to typescript?

And am I correct with the way I converted this line {...this.props.style} in javascript code?

Answer 1

Inside a prop list, doing

{...this.props}

will extract each individual property from the object and list it as an object. If this.props is { foo: 'foo' } , for example, then

{...this.props}

is equivalent to

foo="foo"

in the props list.

You want the props to be inside of the <Input props list, so either do something like this:

return (
  <Input
    placeholder="write something here"
    placeholderTextColor={argonTheme.COLORS.MUTED}
    style={inputStyles}
    color={argonTheme.COLORS.HEADER}
    iconContent={
      <Icon
        size={14}
        color={argonTheme.COLORS.ICON}
        name="link"
        family="AntDesign"
      />
    }
    shadowless={shadowless}
    success={success}
    error={error}
    style={style}

Or make an object from the props, then spread the object (don't spread the individual props):

return (
  <Input
    placeholder="write something here"
    placeholderTextColor={argonTheme.COLORS.MUTED}
    style={inputStyles}
    color={argonTheme.COLORS.HEADER}
    iconContent={
      <Icon
        size={14}
        color={argonTheme.COLORS.ICON}
        name="link"
        family="AntDesign"
      />
    }
    {...{ shadowless, success, error, style }}

If you're going to use TS, I'd also highly recommend using a more precise type than any - using any effectively disables type-checking for the expression, which defeats the purpose of TS.

Answer 2

You can try something like this:

interface ArInputProps{
shadowless:string; //i am assuming all of them to be of type string,you can use boolean,Function or whatever you like
success:string;
error:string;
style:string
}

const ArInput =({ shadowless, success, error, style }:ArInputProps)=> {

    const inputStyles = [
      styles.input,
      !shadowless && styles.shadow,
      success && styles.success,
      error && styles.error,
      {...style}
    ];

    return (
      <Input
        placeholder="write something here"
        placeholderTextColor={argonTheme.COLORS.MUTED}
        style={inputStyles}
        color={argonTheme.COLORS.HEADER}
        iconContent={
          <Icon
            size={14}
            color={argonTheme.COLORS.ICON}
            name="link"
            family="AntDesign"
          />
    }
    shadowless={shadowless}
    success={success}
    error={error}
    style={style}
  />
);