如何在TypeScript中为React类型字面量Props设置默认值？

你遇到的错误A type literal property cannot have an initializer，是因为TypeScript不允许在类型字面量的属性中设置初始值——类型字面量只负责定义类型结构，不能直接赋值。针对你这种内联定义props类型的场景，推荐以下两种解决方案：

方案一：解构参数时设置默认值（最简洁） #

直接在函数参数解构时给可选属性设置默认值，同时在类型字面量里用?标记该属性为可选：

import { Button, Modal } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import { ReactNode } from 'react';

function DialogOk({ 
    children, 
    show, 
    setShow, 
    header, 
    onOk = undefined // 在这里设置默认值
}: { 
    children: ReactNode, 
    show: boolean, 
    setShow: (newShow: boolean) => void, 
    header: string, 
    onOk?: () => void // 用?标记为可选属性，自动包含undefined类型
}) {
    const [t] = useTranslation();

    const onHide = () => setShow(false);

    const handleOk = () => {
        setShow(false);
        onOk?.(); // 用可选链调用替代if判断，更简洁
    };

    return (
        <Modal show={show} onHide={onHide} centered>
            <Modal.Header>
                <Modal.Title>{header}</Modal.Title>
            </Modal.Header>
            <Modal.Body>{children}</Modal.Body>
            <Modal.Footer>
                <Button variant="primary" onClick={handleOk}>{t("common:ok")}</Button>
            </Modal.Footer>
        </Modal>
    );
}

export { DialogOk }

说明： #

• onOk?: () => void 表示该属性是可选的，TypeScript会自动将其类型推断为(() => void) | undefined，无需手动写| undefined。
• 解构时的onOk = undefined确保当父组件不传该属性时，组件内部拿到的默认值是undefined。
• 用onOk?.()替代原来的if (props.onOk !== undefined) props.onOk()，代码更简洁且安全。

方案二：提取Props接口 + defaultProps（兼容传统写法） #

如果更习惯用defaultProps的方式，可以先提取Props接口，再设置默认值：

import { Button, Modal } from 'react-bootstrap';
import { useTranslation } from 'react-i18next';
import { ReactNode } from 'react';

// 提取Props接口，标记onOk为可选
interface DialogOkProps {
    children: ReactNode;
    show: boolean;
    setShow: (newShow: boolean) => void;
    header: string;
    onOk?: () => void;
}

function DialogOk(props: DialogOkProps) {
    const [t] = useTranslation();

    const onHide = () => props.setShow(false);

    const handleOk = () => {
        props.setShow(false);
        props.onOk?.();
    };

    return (
        <Modal show={props.show} onHide={onHide} centered>
            <Modal.Header>
                <Modal.Title>{props.header}</Modal.Title>
            </Modal.Header>
            <Modal.Body>{children}</Modal.Body>
            <Modal.Footer>
                <Button variant="primary" onClick={handleOk}>{t("common:ok")}</Button>
            </Modal.Footer>
        </Modal>
    );
}

// 设置defaultProps，可选属性的默认值可以是undefined或空函数
DialogOk.defaultProps = {
    onOk: undefined
};

export { DialogOk }

说明： #

• 接口中的onOk?: () => void已经包含了undefined的情况，所以defaultProps里的onOk: undefined其实可以省略（不传该属性时默认就是undefined）；如果希望默认执行空操作，可以设置为onOk: () => {}。

内容的提问来源于stack exchange，提问作者Spook