網站搜尋

javascript - 無法在 TypeScript 中匯入 NPM 套件(例如 Faker)


我目前正在嘗試將 Faker 匯入我的專案中。

我有一個類似以下的檔案:

import * as faker from 'faker';

interface Test {
    FirstName: String,
    LastName: String
}

function create() {
    let account: Test = {
        FirstName: faker.name.firstName(),
        LastName: faker.name.lastName()
    }
}

當我運行這個時,我收到一個錯誤:SyntaxError: Cannot use import statement outside a module

我在另一個文件中導入這個沒有任何問題,但一旦嘗試導入 Faker 就會收到這個錯誤。我已經嘗試了一些應該能解決這個問題的方法,比如修改 tsconfig 和 package.json 添加 type: modules 或更改 tsconfig 中的 lib 和 target,但都沒有成功。

我應該注意這適用於硬編碼的值,但我需要使用 faker。

編輯:僅提到我已經嘗試了 const/var faker=require('faker'); 以及 import faker=require('faker')

答案#1

這裡有一個可運作的範例。

你還必須安裝 @types/faker 套件來獲取型別定義。

import React, { Component } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
import './style.css';

import faker from 'faker';

interface AppProps { }
interface AppState {
  name: string;
}

class App extends Component<AppProps, AppState> {
  constructor(props) {
    super(props);
    this.state = {
      name: faker.name.firstName()
    };
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />

      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

這是 tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react"
  },
  "include": [
    "src"
  ]
}

答案#2

我遇到了相同的問題,並嘗試了上述建議的解決方案,但沒有成功。對我有效的方法,是修改 tsconfig.json 中的以下行:

//"module": "esnext", "module": "commonjs",

或者,在命令列傳遞它:

ts-node -O '{"module": "commonjs"}' ./server/generate.ts > ./server/database.json

解釋 [1]:

當前的 node.js 穩定版本不支援 ES 模組。此外,ts-node 並沒有在 node.js 中所需的掛鉤來支援 ES 模組。您需要在 tsconfig.json 中設置 "module": "commonjs",才能讓您的程式碼運行。

[1] https://github.com/TypeStrong/ts-node#import-statements