Я использовал 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
.