Почему TS не загружает мой класс, связанный с npm, только во время выполнения? - PullRequest
0 голосов
/ 04 октября 2018

Я использовал create-react-app с настройкой TypeScript для создания шаблона приложения, после этого не изменился tsconfig.json.У меня есть некоторый код вне моего каталога src, поэтому для его использования я использовал npm link, поэтому он доступен в моем локальном node_modules по символической ссылке.

Вот класс, о котором идет речь:

import { AuthState } from '../DataTypes/AuthState'

export class AuthFilters {
  constructor(private authState: AuthState) {}

  signedIn() {
    return this.authState.isSignedIn
  }

  guest() {
    return !this.signedIn()
  }
}

Вот как я пытаюсь его использовать:

import { connect } from 'react-redux'
import { Header, HeaderStateProps, HeaderDispatchProps } from './Header'
import { AuthFilters } from 'shared/Functions/AuthFilters'
import { AppState } from '../../redux/root'

export const HeaderContainer = connect<HeaderStateProps, HeaderDispatchProps>(
  (state: AppState) => ({
    // other props
    authFilters: new AuthFilters(state.auth)
  })
)(Header)

Кажется, что все должно работать, ни линтер, ни компилятор не выдают никаких ошибок, но вот что происходит во время выполнения:

TypeError: WEBPACK_IMPORTED_MODULE_2_shared_Functions_AuthFilters .AuthFilters не является конструктором

На самом деле, когда я пытаюсь console.log(AuthFilters) в HeaderContainer, это так1023 *.Другой вопрос, который я обнаружил, говорит, что такие ошибки могут быть вызваны тем, что вы используете параметр --outFile компилятора и не размещаете импорт в правильном порядке.Однако, поскольку я не настраивал компилятор, я не уверен, как и где именно проверить параметры компилятора, или в каком порядке должен быть импорт ...

На всякий случай, вот мойtsconfig.json, в нем нет упоминания outFile:

{
  "compilerOptions": {
    "baseUrl": ".",
    "outDir": "build/dist",
    "module": "esnext",
    "target": "es5",
    "lib": [
      "esnext",
      "dom"
    ],
    "sourceMap": true,
    "allowJs": true,
    "jsx": "react",
    "moduleResolution": "node",
    "rootDir": "src",
    "forceConsistentCasingInFileNames": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "importHelpers": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "exclude": [
    "node_modules",
    "build",
    "scripts",
    "acceptance-tests",
    "webpack",
    "jest",
    "src/setupTests.ts"
  ]
}

Обновление: Я попытался физически переместить папку shared в проект, но это не помогло устранить проблему,Странно, однако, что когда содержимое папки извлекается в каталог src, она начинает работать ...

Это означает, что она работает, когда вместо импорта ./shared/Functions/AuthFilters она импортирует ./Functions/AuthFilters.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...