Javascript Typescript 不尊重组件 defaultProps

发布于04月06日

我很难弄清楚这里出了什么问题:

export type PackageLanguage = "de" | "en";
export interface ICookieConsentProps {
    language?: PackageLanguage ;
}

function CookieConsent({ language }: ICookieConsentProps) {
    useEffect(() => {
        LanguageHelper.setLanguageFile(language || "en"); <--- PROBLEM HERE !
    }, [language]);

    return <div className="cc__gimme-cookies"></div>;
}

CookieConsent.defaultProps = {
    language: "en",
} as Partial<ICookieConsentProps>;

我想在一些函数中使用language属性.为什么TypeScript会忽略我为语言属性设置的DefaultProp，并让我判断未定义的属性？

LanguageHelper.setLanguageFile(language);

LanguageHelper.setLanguageFile(language || "en");

提前谢谢你的建议！

亲切的问候，

推荐答案

因为language是可选的，所以很可能是未定义的.

你可以把Pick和Required个效用函数结合起来，得到你需要的结果.

export type PackageLanguage = "de" | "en";
export interface ICookieConsentProps {
    language?: PackageLanguage;
    otherProp: string;
    propNotInterestedIn: string;
}

type Props = Pick<ICookieConsentProps, 'language' | 'otherProp'>

function CookieConsent({ language }: Required<Props>) {
    useEffect(() => {
        LanguageHelper.setLanguageFile(language || "en"); <--- PROBLEM HERE !
    }, [language]);

    return <div className="cc__gimme-cookies"></div>;
}

CookieConsent.defaultProps = {
    language: "en",
    otherProp: "another prop"
} as Required<Props>;