这与jsx语法的布尔快捷方式有关：

type ButtonOptionnalProps = {
        isChecked?: boolean
    };
    
    export const ButtonWithDefaultWithOptionnal: React.FC<ButtonOptionnalProps> = ({ isChecked = false }) => (
        <button className={isChecked ?
            "checked" :
            "unchecked"} />
    );
    
    export const ATestComponent1: React.FC<{}> = ({}) => (<>
        <ButtonWithDefaultWithOptionnal isChecked={false} />
        <ButtonWithDefaultWithOptionnal isChecked={true} />
        <ButtonWithDefaultWithOptionnal isChecked />
        <ButtonWithDefaultWithOptionnal />
    </>);

这样，每个语法都是有效的，并且isChecked在控件中具有布尔类型。
另一方面，你有：

type ButtonProps = {
        isChecked: boolean
    };
    
    export const ButtonWithoutDefaultWithoutOptionnal: React.FC<ButtonProps> = ({ isChecked }) => (
        <button className={isChecked ?
            "checked" :
            "unchecked"} />
    );
    
    export const ATestComponent2: React.FC<{}> = ({}) => (<>
        <ButtonWithoutDefaultWithoutOptionnal isChecked={false} />
        <ButtonWithoutDefaultWithoutOptionnal isChecked={true} />
        <ButtonWithoutDefaultWithoutOptionnal isChecked />
        <ButtonWithoutDefaultWithoutOptionnal />
    </>);

这样最后一个语法就错了。
最后一条路：

type ButtonOptionnalProps = {
        isChecked?: boolean
    };
    
    export const ButtonWithoutDefaultWithOptionnal: React.FC<ButtonOptionnalProps> = ({ isChecked }) => (
        <button className={isChecked ?
            "checked" :
            "unchecked"} />
    );
    
    export const ATestComponent3: React.FC<{}> = ({}) => (<>
        <ButtonWithoutDefaultWithOptionnal isChecked={false} />
        <ButtonWithoutDefaultWithOptionnal isChecked={true} />
        <ButtonWithoutDefaultWithOptionnal isChecked />
        <ButtonWithoutDefaultWithOptionnal />
    </>);

这种方法语法很好，但isChecked是布尔值|未定义，它可能导致isChecked === false等条件下的细微错误。

这是一个很好的实践，因为你可以更容易地调用组件，包括isChecked或不作为prop，因为prop是一个布尔值，或者如果有状态，你可以用状态来控制它。

const [open, setOpen] = useState<boolean>(false); 

// it is not checked (in a simple way)
<Button />

// it is checked (again in a simple way)
<Button isChecked />

// you can use a state variable, which is a boolean
<Button isChecked={open} />

这就是为什么该做法可被视为更好的做法。