When I look at the antd source code, I'm a little confused.



export interface IconProps {
  type: string;
  className?: string;
  title?: string;
  onClick?: React.MouseEventHandler<any>;
  spin?: boolean;
  style?: React.CSSProperties;
}

const Icon = (props: IconProps) => {
  const {type, className = "", spin} = props;

  const classString = classNames({
    anticon: true,
    "anticon-spin": !!spin || type === "loading",
    [`anticon-${type}`]: true,
  }, className);
  return <i {...omit(props, ["type", "spin"])} className={classString}/>;
};

export default Icon;

this is the simplest Icon component source code, see! spin here. I don"t understand why I use spin to write like this. At first, I thought that if spin is not passed in, then this value is undefined, so we need to use! undefined to convert to boolean type, but later I tested that undefined defaults to false, which does not seem to affect the result. I hope someone can solve the problem.
because it is written like this in many other components

Antdesign typescript react.js

Mar.13,2021

JavaScript is a weakly typed language, but sometimes it needs to be cast to the corresponding type in use. So,!! (), has the effect of converting weak types into strong types

! It means to convert the following variable to bool type, and then determine whether it is true

, that is, no matter what value forces to convert to boolean type, otherwise the code logic will write

! is reversed, and ! is cast to a Boolean value

just because the expected value of anticon-spin is bool, otherwise implicit type conversion is fine.

var a = 'a'||true; //'a'

! It is used to cast a value into a value of type boolean. The tsconfig of antd sets that the strictNullChecks,boolean type cannot be assigned to null and undefined, need to be strongly converted

Previous: How to design n-to-n MongoDB database

Next: How to use paramiko to send multiple commands to the switch and receive a long output?