Javascript `从'；导入用户名/username.txt'；`使用typescript+；网页包提供了“未定义的”`

我正在用typescript+webpack制作一个以字符串形式导入.txt文件的演示，即将完成，但存在以下问题：

你好，ts

import username from './username.txt'

console.log(`Hello, ${username.trim()}!`)

declare module '*.txt' {
    const value: string
    export default value;
}

module.exports = {
    mode: 'development',
    entry: './hello.ts',
    devtool: 'inline-source-map',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [{
            test: /\.ts?$/,
            loader: 'ts-loader'
        }, {
            test: /\.txt$/,
            loader: 'raw-loader'
        }]
    }
}

报告：

TypeError: Cannot read property 'trim' of undefined

我的其他文件：

txt.d.ts

import username from './username.txt'

console.log(`Hello, ${username.trim()}!`)

declare module '*.txt' {
    const value: string
    export default value;
}

module.exports = {
    mode: 'development',
    entry: './hello.ts',
    devtool: 'inline-source-map',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [{
            test: /\.ts?$/,
            loader: 'ts-loader'
        }, {
            test: /\.txt$/,
            loader: 'raw-loader'
        }]
    }
}

webpack.config.js

import username from './username.txt'

console.log(`Hello, ${username.trim()}!`)

declare module '*.txt' {
    const value: string
    export default value;
}

module.exports = {
    mode: 'development',
    entry: './hello.ts',
    devtool: 'inline-source-map',
    output: {
        path: __dirname,
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.js']
    },
    module: {
        rules: [{
            test: /\.ts?$/,
            loader: 'ts-loader'
        }, {
            test: /\.txt$/,
            loader: 'raw-loader'
        }]
    }
}

tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "target": "es6",
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "types": [
      "node"
    ]
  }
}

{
  "scripts": {
    "demo": "webpack && node bundle.js"
  },
  "devDependencies": {
    "@types/jquery": "^3.3.9",
    "@types/node": "^10.10.3",
    "raw-loader": "^0.5.1",
    "ts-loader": "^5.1.0",
    "ts-node": "7.0.0",
    "typescript": "^3.0.3",
    "webpack": "^4.18.0",
    "webpack-cli": "^3.1.0"
  }
}

package.json

{
  "compilerOptions": {
    "strict": true,
    "target": "es6",
    "module": "commonjs",
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "types": [
      "node"
    ]
  }
}

{
  "scripts": {
    "demo": "webpack && node bundle.js"
  },
  "devDependencies": {
    "@types/jquery": "^3.3.9",
    "@types/node": "^10.10.3",
    "raw-loader": "^0.5.1",
    "ts-loader": "^5.1.0",
    "ts-node": "7.0.0",
    "typescript": "^3.0.3",
    "webpack": "^4.18.0",
    "webpack-cli": "^3.1.0"
  }
}

如果我将

hello.ts

中的导入代码更改为：

import * as username from './username.txt'

console.log(`Hello, ${username.trim()}!`)

它将有另一个类型错误：

console.log(`Hello, ${username.trim()}!`)
                               ^^^^^^
TS2339: Property 'trim' does not exist on type 'typeof import("*.txt")'

虽然我能找到一种方法让它工作：

const username = require('./username.txt')

但我仍然想知道如何使用

import

样式修复它

---

此的演示项目：，您可以克隆并运行它

看起来

原始加载程序

正在生成一个模块，该模块将文本字符串作为CommonJS样式的导出分配，而不是默认导出。您应该更新类型声明和代码以使用：

declare module '*.txt' {
    const value: string
    export = value;
}

import username = require('./username.txt')

---

或者启用

tsconfig.json

中的

esModuleInterop

编译器选项，使默认导出与导出分配互操作。您可以阅读更多有关此问题的信息。

作为调试步骤，您是否尝试过

console.log（用户名类型）

此过程完全正确，问题可能出现在

.d.ts

中，因为typescript不知道

用户名

是字符串。您可以通过执行以下操作（使用import*as）来解决问题：

console.log（`Hello，${（username as any.trim（）}！`）

。否则，您需要填充类型定义，但我不知道如何完成。不过，使用用户名也可以：（并且不会引发任何与编译相关的问题）。您为.txt文件做模块声明有什么原因吗？@briosheje，谢谢您的回答。是的，

username作为任何一个

都可以工作，但不优雅，也会丢失类型检查。我这样做是因为我的测试应该在浏览器中运行，并且我需要从文件中导入一些数据作为测试的输入。我想应该是出了什么问题，但不确定它在哪里。@Freewind您使用txt文件进行输入有什么原因吗？还有，您有什么理由需要声明类型吗？使用JSON并解析它不是更容易吗？@briosheje我想测试的函数是将一些文本转换成另一种格式，它们不是一直都是JSON，可以是纯文本。使用新的

declare module'*.txt'

，我现在可以从'/username.txt以用户名的形式编写

import*！谢谢