Question

我遇到了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文件中？

Answer 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中的模块工作方式相同。

Answer 2

将下一行添加到 tsconfig.json

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

如果出现错误： Typescript error “Cannot write file … because it would overwrite input file.”

用 outDir 添加：

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

如何在.tsx文件

2 个答案: