Преобразовать сокращенно-сокращенную запись connect в JS / TypeScript

Question

Пока я искал и перечитывал, я все еще новичок (или, если быть точным, ржавый, частично занятый разработчик JS), и мой вопрос может быть ужасно простым.

Я пытаюсь преобразовать существующий проект JS в TypeScript. Я изо всех сил пытаюсь понять комбинацию connect-redux-decorator, сокращенной нотации JS и номенклатуры стрелок в одной строке:

@connect(({session: { loggedIn }}) => ({loggedIn}), {establishConnection})

Буду очень признателен, если кто-то сможет перевести его на подход «экспорт по умолчанию для подключения» или просто на запись функций / классов.

В следующем коде строка приводит к сообщению об ошибке TypeScript:

[ts]
Unable to resolve signature of class decorator when called as an expression.
Type 'ComponentClass<Pick<{}, never>, any> & { WrappedComponent: ComponentType<{}>; }' is 
not assignable to type 'typeof AuthenticatedApp'.
Type 'Component<Pick<{}, never>, any, any>' is not assignable to type 'AuthenticatedApp'.
Property 'componentDidMount' is optional in type 
'Component<Pick<{}, never>, any, any>' but required in type 'AuthenticatedApp'.`

код:

import * as React from 'react';
import { connect } from 'react-redux'
import Connecting from '../components/Connecting'
import { establishConnection } from '../actions/login'

@connect(({session: { loggedIn }}) => ({loggedIn}), {establishConnection})
export default class AuthenticatedApp extends React.Component {
  componentDidMount() {
    this.props.establishConnection()
  }

  componentWillReceiveProps(nextProps) {
    if(!nextProps.loggedIn) {
      this.props.establishConnection()
    }
  }

  render() {
    const { loggedIn, children } = this.props
    const appContent = loggedIn ? children : <Connecting />

    return (
      <div>
        {appContent}
      </div>
    )
  }
}

Хотя само сообщение об ошибке также может быть решено совершенно по-разному, я хотел заменить декоратор «простым» кодом, надеясь, что это решит проблему.

Моя попытка выглядела как-то так (совершенно неправильно, я знаю):

function mapStateToProps(loggedIn) {
   return {loggedIn} = session: { loggedIn };
}
...
class AuthenticatedApp extends React.Component {
...
export default connect(mapStateToProps, establishConnection)(AuthenticatedApp);

Я использую Код Visual Studio (1.26.1) "@ types / реагировать": "^ 16.4.13" "@ types / реагировать на дом": "^ 16.0.7" "машинопись": "^ 3.0.3"

Спасибо!

HerrB92

Answer 1

В качестве отправной точки вы должны взять точно такое же выражение вызова connect и применить его к компоненту вручную вместо использования декоратора:

export default connect(({session: { loggedIn }}) => ({loggedIn}), {establishConnection})(AuthenticatedApp);

(И удалите export default из класса.) Теперь вы получите (не очень понятную) ошибку, потому что TypeScript не может определить тип параметра функции mapStateToProps. Вы можете комментировать это так:

export default connect(({session: { loggedIn }}: {session: {loggedIn: boolean}}) => ({loggedIn}), {establishConnection})(AuthenticatedApp);
//                                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

(Возможно, у вас уже есть тип, определенный в вашей кодовой базе, который содержит {session: {loggedIn: boolean}} или даже больше.)

Кроме того, вы можете отключить функцию mapStateToProps, оставив ее в виде функции стрелки:

const mapStateToProps =
  ({session: { loggedIn }}: {session: {loggedIn: boolean}}) => ({loggedIn});
export default connect(mapStateToProps, {establishConnection})(AuthenticatedApp);

или преобразовать его в традиционное function определение:

function mapStateToProps({session: { loggedIn }}: {session: {loggedIn: boolean}}) {
  return {loggedIn};
}
export default connect(mapStateToProps, {establishConnection})(AuthenticatedApp);

В конечном счете, для успешной компиляции компонента вам необходимо указать тип его реквизита, например:

class AuthenticatedApp extends React.Component<{establishConnection: () => void, loggedIn: boolean}> { ... }

но это отдельная проблема от connect.