Как в React/Redux с Typescript передать в аргумент JSX?

Question

[Дмитрий Тиркай]

Решил попробовать использовать TS для разработки на React и столкнулся с весьма не понятной мне проблемой.
Хочу пробросить в аргументы action-creator'а модального окна код JSX (чтобы в дальнейшем передавать туда разные view по необходимости), но TS почему то ругается и ведет себя не адекватно.
Аргументирует он это вот этим:

[ts] Тип "boolean" не может быть назначен для типа "Element". [2322]
modal.ts(63, 5): The expected type comes from property 'message' which is declared here on type 'IModalOptions'

Вот код откуда я вызываю action-creator

export const logout = () => {
    return (dispatch: Dispatch<any>) => {
        dispatch({
            type: AUTH_LOGOUT
        });
        dispatch(modalOpen({
            message: <div>TEST</div>
        }));
    }
}

Вот сам action-creator

interface IModalOptions{
    message: JSX.Element;
    isCanClose?: boolean
}
export const modalOpen = ({message, isCanClose = true} : IModalOptions) => {
    return (dispatch: Dispatch<any>) => {
        dispatch({
            type: MODAL_OPEN,
            message,
            isCanClose
        });
    }
}

Пробовал ставить тип any, но это не возымело эффекта.

[ts] Не удается найти имя "div". [2304]

Подскажите пожалуйста как с этим бороться, может быть для этого какой то отдельный тип или надо как-то оборачивать? А возможно это в целом фундаментально не правильная идея кидать JSX в аргументы? На обычном React такая реализация вполне себе работала.

Answer 1

[Дмитрий Тиркай]

Нашел решение сам. Если поменять формат файла с экшеном с .ts на .tsx то div появляется в его контексте и может обрабатываться как JSX.Element или React.ReactNode.

Answer 2

[Василий Мажекин]

message: '<div>TEST</div>'

Кавычки фундаментально возымеют эффект

Comments

[Дмитрий Тиркай]

Но это будет string типом и соответственно на вывод придет просто строкой, а не разметкой. Плюс ко всему через string нельзя будет прокинуть полноценный компонет, тобишь он так и придет на выход как без всех внутренностей.

[Василий Мажекин]

да строкой, потому что в тайпскрипте это выражение без кавычек не имеет смысла, или попросту не корректно
message: <div>TEST</div>

[Interface]

Василий Мажекин, TS вполне поддерживает JSX (причем именно JSX, который необязательно реакт). Почитать можно тут https://www.typescriptlang.org/docs/handbook/jsx.html

[Василий Мажекин]

Interface, И там тоже кроме реакта нигде не описано где использется. Имхо, пока это только приблуда реакта, который грубо нарушает основопологающую концепцию любого программирования - separation of concerns, и смешивает html и js. Но для начинающих пойдет, react вроде позиционируется с низким порогом входа.