Question

我使用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)

似乎一切都应该工作，无论是linter还是编译器都不会抛出任何错误，但这是在运行时发生的情况：

TypeError： WEBPACK_IMPORTED_MODULE_2_shared_Functions_AuthFilters 。AuthFilters不是构造函数

实际上，当我尝试在console.log(AuthFilters)中访问HeaderContainer时，它是undefined。我发现的另一个问题是，当您使用编译器的--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时起作用。

为什么TS仅在运行时不加载我的npm链接类？

0 个答案: