打字稿不尊重组件 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>;

我想在某些功能中使用语言属性。为什么 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>;

打字稿不尊重组件 defaultProps

Typescript not respecting components defaultProps

javascript

typescript

reactjs

react-props