【问题标题】：How to import .js file inside my .tsx file如何在我的 .tsx 文件中导入 .js 文件
【发布时间】：2016-10-07 18:54:13
【问题描述】：

我遇到了 webpack 告诉我的问题：

./app/app.tsx 中的错误 (4,25): 错误 TS2307: 找不到模块 './sample-data'。

我的导入看起来像这样：

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { InboxPane } from './components/Inbox';
import * as Samples from './sample-data';

最后这是我要导入的 sample-data.js 文件：

module.exports = {
  "humans": {
    "John Smith" : {
      "conversations": [
        {
          "who": "bot",
          "text": "Hello, can I take your order?",
          "time": new Date(2016, 4, 5, 15, 10, 0, 0)
        },
        {
          "who": "human",
          "text": "Can I have a small meat-lovers pizza?",
          "time": new Date(2016, 4, 5, 15, 10, 30, 0)
        }, 
        {
          "who": "bot",
          "text": "Where would you like it delivered?",
          "time": new Date(2016, 4, 5, 15, 11, 0, 0)
        },
        {
          "who": "human",
          "text": "123 Sesame Street, Montreal, Canada",
          "time": new Date(2016, 4, 5, 15, 11, 30, 0)
        },
      ],
      "orders": [
        {
          "time": new Date(2016, 4, 5, 15, 11, 45, 0),
          "pizzas": [{
            "toppings": ["Meat-Lovers"],
            "size": "S"
          }],
          "price": 15,
          "address": "321 Sesame Street, Montreal, Canada",
          "status": "Confirmed" // status := Open -> Confirmed -> In The Oven -> Delivered
        }
      ]
    },
    "Alan Foster" : {
      "conversations": [
        {
          "who": "bot",
          "text": "Hello, can I take your order?",
          "time": new Date(2016, 4, 4, 20, 30, 0, 0)
        },
        {
          "who": "human",
          "text": "I would like to order an extra-large cheese pizza",
          "time": new Date(2016, 4, 4, 20, 30, 15, 0)
        }, 
        {
          "who": "bot",
          "text": "Where would you like it delivered?",
          "time": new Date(2016, 4, 4, 20, 30, 30, 0)
        },
        {
          "who": "human",
          "text": "123 Sesame Street, Montreal, Canada",
          "time": new Date(2016, 4, 4, 20, 30, 45, 0)
        },
      ],
      "orders": [
        {
          "time": new Date(2016, 4, 4, 20, 31, 0, 0),
          "pizzas": [{
            "toppings": ["cheese"],
            "size": "XL"
          }],
          "price": 15,
          "address": "123 Sesame Street, Montreal, Canada",
          "status": "Delivered" // status := Open -> Confirmed -> In The Oven -> Delivered
        }
      ]
    }
  }
};

如果我将其更改为 sample-data.ts，我会被告知它不是一个模块。如何将其加载到我的 .tsx 文件中？

【问题讨论】：

所以你有sample-data 文件夹？
没有 sample-data.js 与我要导入它的 app.tsx 文件位于同一文件夹中。

标签： javascript reactjs typescript

【解决方案1】：

如果您想在不修改的情况下导入原始文件，请尝试在 tsconfig.json 文件中将 compilerOptions.allowJs 设置为 true：

...
  "compilerOptions": {
    "allowJs": true
...

如果您准备好修改文件，您可以使用模块语法将 sample-data.js 转换为 sample-data.ts，如下所示：

export default {
  "humans": {
    "John Smith" : {
      "conversations": [
        {
          "who": "bot",
          "text": "Hello, can I take your order?",
          "time": new Date(2016, 4, 5, 15, 10, 0, 0)
        },
        {
          "who": "human",
        ...
};

然后您需要通过以下方式导入文件：

import Samples from './sample-data';

您可以阅读更多关于 TypeScript 模块的信息 in the official docs。在许多情况下，TypeScript 中的模块的工作方式与 ES2015 中的相同。

【讨论】：

谢谢。使用第一种方法对我不起作用。它告诉我：cannot write file /sample-data.js because it would overwrite input file 第二种方法确实有效。现在我还有其他问题，但我认为它们与此文件的导入无关。
@j5juice，你使用 webpack 打包你的应用程序吗？
是的，我目前正在使用 webpack。
可能是problem with ts-loader。
您是否将文件写入同一目录？如果是这样，当它转译 sample-data.js 时，它会尝试再次编写它，即使不会进行任何更改。并且由于读取文件和写入文件的文件扩展名都是 .js，因此它会停止以避免覆盖读取文件。

【解决方案2】：

通过安装 .js 包的类型解决了这个问题

在我的 .tsx 文件中导入 react-helmet 时遇到了类似的问题。通过为它安装类型来解决它：

npm install --save @types/react-helmet

如果您想在站点范围内禁用它，您可以改为编辑 tsconfig.json 并将 noImplicitAny 设置为 false：

 "compilerOptions": {
      ...,
      "noImplicitAny": false,
 }

reference

【讨论】：

【解决方案3】：

将下一行添加到tsconfig.json

...
  "compilerOptions": {
    "allowJs": true
...

如果您收到错误： Typescript error “Cannot write file … because it would overwrite input file.”

添加outDir:

...
  "compilerOptions": {
    "allowJs": true,
    "outDir": "./dist/out-tsc",
...

【讨论】：