javascript - 使用适当的键的字符串或对象类型 TypeScript

我的 languageSchema 可以是一个字符串或一个带有 'Etc' 键的对象。我有一个接口：

let getLanguageSchema = (language: string): string => languagesSchemas[language];

interface IReduxProps {
    languageSchema:
        string
        | {
              Etc: {
                  listEmpty: string;
              };
          };
}

组件：

let EmptyList: React.FC<IReduxProps> = (props) => {
    let { languageSchema } = props;

    return (
        <div className="mt-5 text-center grey">
            <i className="now-ui-icons files_paper fs-4" />
            <h3 className="mb-0">{languageSchema.Etc.listEmpty}</h3>
        </div>
    );
};

let mapStateToProps = (state: IReduxState): IReduxProps => ({
    languageSchema: getLanguageSchema(state.common.language),
});

TypeScript 编译器提示：'属性 'Etc' 在类型 'string | { Etc: { listEmpty: string; }; }' 上不存在。属性 'Etc' 在类型 'string' 上不存在。'

为可以是对象或字符串的属性设置合适类型的正确方法是什么？

答案＃1

可能解决这个问题的一个方法是

• 让 IReduxProps 属性只接受字符串
• 然后将变量转换为字符串，然后将其解析为对象 JSON.parse(JSON.stringify(languageSchema))。

接口 :

 let getLanguageSchema = (language: string): string => languagesSchemas[language];

 interface IReduxProps {
    languageSchema: string 
 }

组件

const EmptyList: React.FC<IReduxProps> = (props) => {
  const { languageSchema } = props;

  const laanguageSchemaObjectType: { Etc: { listEmpty: string } } = JSON.parse(JSON.stringify(languageSchema));

  return (
    <div className="mt-5 text-center grey">
      <i className="now-ui-icons files_paper fs-4" />
      <h3 className="mb-0">{laanguageSchemaObjectType.Etc.listEmpty}</h3>
    </div>
  );
};

const mapStateToProps = (state: IReduxState): IReduxProps => ({
  languageSchema: getLanguageSchema(state.common.language),
});