Используйте fs в typescript

Я просто пытаюсь прочитать файл с помощью fs.readFileSync, хотя кажется, что его невозможно найти.

Я убедился, что объявляю его, добавил его в свой конструктор:

export default class Login extends React.Component<LoginProps, {}> {
    private webAuth: auth0.WebAuth;
    fs: any;

    constructor(props: any, context: any) {
        super(props, context);
        this.fs = require('fs');
        this.webAuth = new auth0.WebAuth({
            clientID: conf.auth0.clientId,
            domain: conf.auth0.domain,
            responseType: 'token id_token',
            redirectUri: `${window.location.origin}/login`
        });
    }
[...]

И использовал его в простой функции:

verifyToken = (token) => {

    console.log(this.fs);
    let contents = this.fs.readFileSync('../utils/public.key', 'utf8');
    console.log(contents);

}

Но это вызывает Uncaught TypeError: _this.fs.readFileSync is not a function. Есть ли специальный способ включить fs в Typescript?

Ответ 1

Первый. Я не могу представить ни одного случая, когда вы использовали бы fs внутри компонента React. Несмотря на то, что вы можете использовать React на сервере для рендеринга, тот же код должен выполняться на клиенте, но у вас нет способа получить доступ к fs на клиенте.

Если вы хотите использовать fs на сервере, это пример:

import * as fs from 'fs';
import * as path from 'path';
fs.readFile(path.join(__dirname, '../../client/index.html'), 'utf8', (error, data) => {
        // ...
    })

Убедитесь, что в вашем файле package.json есть зависимость от узла

"dependencies": {
 "@types/node": "^7.0.5"
}

А вот так выглядит мой файл tsconfig.json:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es5",
        "jsx": "react",
        "allowJs": true,
        "typeRoots": [
            "./node_modules/@types"
        ]
    },
    "include": [
        "./db/**/*",
        "./src/**/*"
    ]
}

Ответ 2

Использование node -v 10.15.0 и @types/node:

Кажется, декларация была переписана...

Определение fs объявлено как module, поэтому вы должны сделать:

import fs from "fs"; // Without star

скомпилирован:

var fs_1 = __importDefault(require("fs"));

или

const fs = require("fs"); вместо require("fs").default;

со звездочкой у вас будет fs.default.TheFunctionYouWant вместо fs.TheFunctionYouWant

Лучше всего console.log(fs); посмотреть, что именно импортируется.

{
  "compilerOptions": {
    "typeRoots": [],
    "types": [
      "node"
    ]
  }
}