在javascript文件中导入typescript文件

时间:2018-01-22 19:41:03

标签: javascript reactjs typescript babeljs create-react-app

我将react-create-app作为我项目的样板。

然后我决定使用打字稿,所以我希望能够同时编写TS和JS文件。

我移动了所有必要的文件(tsconfig,config-overrides等),所以我的项目已经构建并运行良好,但只有一个问题:每当我在routes.js文件中尝试/static/media/Component.4c25ef27.tsx时,组件变量看起来像这个var paths = require('react-scripts-ts/config/paths') module.exports = function override(config) { config.module.rules.push({ test: /\.(js|jsx)$/, include: paths.appSrc, loader: require.resolve('babel-loader'), options: { babelrc: false, presets: [require.resolve('babel-preset-react-app')], cacheDirectory: true, }, }); config.module.rules.push({ test: /\.(ts|tsx)$/, include: paths.appSrc, loader: ['ts-loader'], }); return config } ,我的应用程序失败了,因为我将变量作为路径组件传递。

我做错了什么?

配置-overrides.js

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

tsconfig.json

{
  "name": "src",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "jss": "^6.5.0",
    "jss-camel-case": "^3.0.0",
    "jss-nested": "^3.0.1",
    "jss-px": "^1.0.0",
    "jss-vendor-prefixer": "^4.0.0",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-redux": "^5.0.6",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.17",
    "react-scripts-ts": "^2.12.0",
    "react-virtualized": "^9.16.1",
    "recompose": "^0.26.0",
    "redux": "^3.7.2",
    "redux-act": "^1.5.1",
    "redux-form": "^7.2.0",
    "redux-thunk": "^2.2.0"
  },
  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env=jsdom",
    "eject": "react-app-rewired eject"
  },
  "devDependencies": {
    "@types/react": "^16.0.34",
    "babel-eslint": "^8.1.2",
    "eslint": "^4.15.0",
    "eslint-config-airbnb": "^16.1.0",
    "eslint-plugin-import": "^2.8.0",
    "eslint-plugin-jsx-a11y": "^6.0.3",
    "eslint-plugin-react": "^7.5.1",
    "react-app-rewired": "^1.4.0"
  }
}

的package.json

{{1}}

0 个答案:

没有答案