Typescript 不尊重组件 defaultProps

Question

我无法弄清楚这里出了什么问题：

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>;

我想在某些 function 中使用语言属性。为什么 TypeScript 会忽略我为语言道具设置的 defaultProps 并要我检查是否未定义？

LanguageHelper.setLanguageFile(language); 'PackageLanguage | 类型的参数 undefined' 不可分配给 'PackageLanguage' 类型的参数。 类型“undefined”不可分配给类型“PackageLanguage”.ts(2345)

LanguageHelper.setLanguageFile(language || "en"); 这工作正常但有点多余，因为我定义了 defaultProps。

感谢您提前提出任何建议！

亲切的问候，安德烈亚斯 | asdf1414

Answer 1

因为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>;