尝试导入 typescript 文件。 （未定义导出）

Question

完全错误：未捕获的 ReferenceError ReferenceError：未在 (c:\Users\user\Documents\vsCode\Slider\src\script.js:2:23) @ c:\Users\user\Documents\vsCode\Slider\ 定义导出src\script.js:2:23

我花了大约 3 个小时来寻找任何可能引导我走向正确方向的东西。 我对 web 开发不是很熟练。 我有这个在纯 JavaScript 中工作，但后来决定尝试在 TypeScript 中重做这个。 我对 TS 的了解还不够，无法确定问题所在。

我有一个 typescript 文件，其中有：

import nouislider from "./nouislider";

//import * as nouiSlider from "./nouislider"
var dataElements = document.getElementsByClassName('data');

var coll = Array.from(dataElements);
coll.forEach(dataElement => InitializeSlider
  (dataElement));

 function InitializeSlider(data: Element) {}

我在同一个文件夹中有一个nouislider.d.ts文件。 我想它正在导入该文件。

然后我从 vsCode 中运行这个任务：

{
    // See https://go.microsoft.com/fwlink/?LinkId=733558
    // for the documentation about the tasks.json format
    "version": "2.0.0",
    "tasks": [
        {
            "label": "tsc build",
            "type": "shell",
            "command": "npx tsc",
            "problemMatcher": [],
            "group": {
                "kind": "build",
                "isDefault": true
            }
        }
    ]
}

然后它吐出这个：

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
//import * as nouiSlider from "./nouislider"
var dataElements = document.getElementsByClassName('data');
var coll = Array.from(dataElements);
coll.forEach(dataElement => InitializeSlider(dataElement));
function InitializeSlider(data) { }

这是我的项目结构：项目结构

Object.defineProperty(exports, "__esModule", { value: true }); 是错误发生的地方。 如果我不导入nouislider然后 typescript 抱怨它找不到它。 我错过了什么？ 有不同的导入方式吗？ 我不应该进口吗？ 我做的编译都错了吗？ 帮助！

Answer 1

这不是 Typescript 中的编程方法。

nouislider.d.ts只是类型定义文件，它不会转换为 javascript。 该错误表明您没有导出您尝试导入的内容。

因此，为了使其发挥作用，我建议：

• 将 nouslider.js 重命名为 nouslider.ts
• 删除 nouslider.d.ts （因为它可能不需要）
• 最后在 nouslider.ts 中调用default export （这会将代码导出为模块）