どのように私の.tsxファイル

Question

内の.jsファイルをインポートするために、私はWebPACKのが私に語っている問題を抱えています：./app/app.tsx （4,25）で

ERROR：エラー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'; 

そして最後に、これは私が輸入しようとしている私のサンプル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 
     } 
     ] 
    } 
    } 
}; 

-data.tsモジュールではないと言われます。このファイルを.tsxファイルにロードするにはどうしたらいいですか？

Answer 1

あなたは変更せずに元のファイルをインポートする場合は、あなたのtsconfig.jsonファイルにtrueへcompilerOptions.allowJsを設定しよう：あなたはあなたが変えることができ、ファイルを変更する準備が整いました場合には

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

そのように、モジュールの構文を使用して、サンプルdata.js サンプル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'; 

あなたは活字体モジュールin the official docsの詳細を読むことができます。多くの場合、TypeScriptのモジュールはES2015と同じように動作します。