将 Typescript 逻辑拆分为多个文件答案

【问题标题】：Split Typescript logic into several files将 Typescript 逻辑拆分为多个文件
【发布时间】：2019-11-06 08:50:33
【问题描述】：

我的项目中有几个打字稿文件和一个入口文件index.ts（输出文件由webpack创建）。

逻辑export 没有的单个文件。

例如。 file-one.ts:

document.getElementById('btn').onclick = function() {
    console.log('Hello world');
}

如何将上述文件导入主入口文件？

例如。 index.ts:

import `./file-one`

返回错误：

ERROR in ./src/index.ts
Module not found: Error: Can't resolve './file-one.ts' in './src/index.ts'

【问题讨论】：

也许没有扩展名：import "./file-one".
一个函数或变量需要导出才能导入另一个函数或变量。你想出口什么？功能（console.log）或设置onclick的动作
你的语法很好（尽管其他 cmets 说什么）。此错误仅表示您的构建无法解析文件路径。需要有关您的设置的更多信息（webpack、tsconfig、使用的命令等）。
@Paleo 我在这里复制代码时犯了错误。我刚收到import ./file-one`，这是一个问题来源。
@AaronBeall 谢谢。你有权利。是配置问题。我在 webpack.config.js 文件中错过了resolve: {extensions: ['.ts']}

【解决方案1】：

例如。 file-one.ts:

export click() {
    console.log('Hello world');
}

如何将上述文件导入主入口文件？

例如。 index.ts:

import {click} from  `./file-one.ts`

document.getElementById('btn').onclick = click;

【讨论】：

【解决方案2】：

您应该可以毫无问题地做到这一点...即使没有导出任何内容，也可以导入模块。

我注意到您在这里使用了反引号...它应该是一个类似于 import './file-one.ts' 的字符串（尽管在这种情况下反引号会引发另一个错误）

无论如何，只要确保你的 webpack 配置可以加载 typescript 文件，并且你的文件路径是正确的，它应该可以工作。

【讨论】：

您使用的扩展名无效。
你说得对。是配置问题。我在 webpack.config.js 文件中错过了resolve:{extensions:['.ts']}
@AluanHaddad 我不明白...你是什么意思？
@ehab 使用以 .ts 结尾的模块说明符是 TypeScript 错误。模块说明符可以明确地以.js 结尾或省略扩展名并完全依赖加载程序配置来推断它，但import './module.ts'; 是一个错误。
@AluanHaddad 无论打字稿规范如何，我确信您可以在 webpack 中加载扩展名为 .ts 的文件。实际上你在 webpack 中说的不正确，如果文件没有特定的扩展名，并且你没有配置 webpack 来加载这些文件，那么你的构建过程将会失败。