使用 TypeScript 2.0 导入 js 文件

2023-12-26

Abstract

我正在尝试从外部位置导入“.js”文件(即节点模块)我正在尝试使用 commonjs 模块模式来做到这一点,但是import不想使用“.js”文件类型,直到我在同一文件夹中的“.js”文件附近添加“.d.ts”文件。

但问题是我不想影响任何人节点模块与我的“.d.ts”文件。我希望它位于另一个文件夹中,与节点模块但一旦我这样做,打字稿编译器就会抛出一个错误:

Example

我有以下文件夹结构:

|- DTS
|   |- y.d.ts
|- main.ts
|- y.js

y.js有以下内容

module.export = function (x) {
    console.log(x);
};

y.d.ts有以下内容

export interface Y {
    (x): any;
}
declare let y: Y;
export default y;

main.ts有以下内容

import * as y from './y'

现在当我尝试编译时main.ts with:

tsc -m commonjs -t ES2015 main.ts

我会得到一个错误:

x.ts(1,20): error TS2307: Cannot find module './y'.

Question

如何导入“.js”文件并能够定义其“.d.ts”声明,同时使两个文件位于不同位置。


Edit

这是示例项目的链接 https://dl.dropboxusercontent.com/u/51743054/tsc/tsc.zip。请务必使用 TypeScript 2.0 版编译器。还有tsc上面的命令可以看到错误。


注:证明类型定义的官方建议 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/README.md#test-a-new-package采用与下面介绍的方法略有不同的方法。 我相信下面的方法稍微好一些,因为 *.d.ts 文件实际上与最终产品相同。

在类型检查(构建时)期间,TypeScript 使用 *.ts 文件并且(大部分)忽略 *.js 文件。 让我举一个例子来激发你(我相信)你的提议。 假设存在一个完美的 JavaScript 库,遗憾的是没有类型(例如N3 https://github.com/RubenVerborgh/N3.js/)。 它是通过 npm 安装的,因此:

npm install n3 --save

正如典型的那样,这被添加到./node_modules/n3/...和项目.json。 如前所述,类型不存在,需要手动添加。 我创建一个./@types/n3.d.ts为此目的而归档。 就我们的目的而言,定义实际上是什么并不特别重要,但如下所示是一个好的开始:

declare namespace N3 {
}

declare module "n3" {
    export = N3;
}

现在回答你的问题。 更新'tsconfig.json':

...
"compilerOptions": {
    "typeRoots": [
      "node_modules/@types",
      "@types"
    ],
...
"paths": {
  "*": [
    ...
    "./@types/*"
  ]

仍然需要处理运行时解析来查找相应的 *.js 文件,但这与您提出的问题不同。

作为参考,您可能会发现TypeScript 中的新功能 https://github.com/Microsoft/TypeScript/wiki/What's-new-in-TypeScript and 这个讨论话题 https://github.com/Microsoft/TypeScript-Handbook/issues/213 useful.

这种方法在处理全局变量时效果很好,但在处理模块时效果不佳。

更新'tsconfig.json':

...
"paths": {
  "*": [
    ...
    "./@types/*"
  ],
  "foo": [ "./@types/foo.d.ts" ]
  },
 ...
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

使用 TypeScript 2.0 导入 js 文件 的相关文章

  • 从 DOM 中删除后,动态添加的 JavaScript 脚本会继续执行

    因此 我正在创建一个 SPA 并使用 AJAX 将 HTML 页面加载到我网站的索引页面中 问题是 当包含我的一个页面时 它似乎会徘 徊并执行其中的 JavaScript 代码 即使它随后从 DOM 中删除 索引 html 正文 div d
  • 如何从 URL 字符串中删除某些参数?

    我有这个var存储表示充满参数的 URL 的字符串 我正在使用 AngularJS 我不确定是否有任何有用的模块 或者可能使用纯 JavaScript 来删除不需要的 URL 参数而无需使用正则表达式 例如我需要删除 month 05并且
  • 使用 easyXDM 调整 IFrame 大小

    我将 iFrame 代码提供给客户 以便他们可以显示我网站上的动态内容 我希望其页面上的 iFrame 能够调整大小以适合我的内容 我按照 easyXDM 网站的说明进行操作 但也许我遗漏了一些东西 我没有收到任何错误 但 iFrame 保
  • 为什么我的 onclick 事件自动触发

    加载页面时最初显示 Hello World 我希望它仅在单击按钮后显示 我知道我可以通过向按钮添加内联事件侦听器来做到这一点 我可以只用脚本编写所有这些代码吗
  • “brew升级节点”后“node -v”显示错误版本

    我升级了 Node js 版本brew upgrade node其中安装了v5 3 0 但是当我得到节点的版本时node v它显示 v0 10 29 I tried brew link overwrite node但这没有用 Brew 已链
  • NodeJS 无法加载 css 文件

    所以我正在尝试制作一个 NodeJS 服务器 并且我尝试保留尽可能少的附加组件 但是 我遇到了一个问题 我似乎无法加载任何内容CSS我调用的文件HTML文件 该调用似乎确实由服务器处理 但它不会显示在浏览器中 My 网络服务器 js fil
  • 如何在参数上使用 .reduce() 而不是特定的数组或对象?

    我想定义一个函数 flatten 将多个元素展平为一个数组 我知道以下是不可能的 但本质上我想这样做 var flatten function var flattened arguments reduce function acc elem
  • t /= d 是什么意思? Python 和错误

    t current time b begInnIng value c change In value d duration def easeOutQuad swing function x t b c d alert jQuery easi
  • django ajax post 403被禁止

    使用 django 1 4 当我尝试从我的 javascript 做我的 django 服务器上的帖子时 我收到 403 错误 我的 get 工作正常 尽管问题仅出在帖子上 也尝试过 csrf exempt但没有运气 更新 我现在可以发布我
  • 在外部单击时关闭弹出 div

    我有一个弹出 div 仅在单击特定按钮时显示 单击同一按钮时它甚至会隐藏 我的问题是 我还想在单击外部任何地方时隐藏 div 我无法这样做 因为弹出 div 位于主包装类内部 并且无法通过在包装类上使用 click 事件并使其隐藏来做到这一
  • 如何使用 .append() 将 React 组件附加到 HTML 元素

    我正在尝试对我的博客实现无限滚动 我有 const articlesHTML document querySelector articles 作为容器 每次点击装载更多按钮 我想将新文章附加到主 html 元素 如下所示 const res
  • Jade(当前称为“Pug”)模板引擎中的循环

    我想使用一个简单的循环 例如for int i 0 i lt 10 i 如何在 Jade 引擎中使用它 我正在使用 Node js 并使用expressjs 框架 例如 for var i 0 i lt 10 i li array i 你可
  • 如何在 JavaScript 中设置/更新 String 对象的值

    我有一个具有一些属性的对象字符串对象 var obj foo new String bar 我在用字符串对象因为我需要在对象上存储额外的子属性 同时仍然能够获取字符串值 obj foo baz baz obj foo gt bar 我觉得问
  • 如何在 ChartJS 中创建自定义图例

    我需要使用 ChartJS 库为我的圆环图创建自定义图例 我已经使用 ChartJS 提供的默认图例创建了甜甜圈 但我需要一些修改 我希望其价值高于汽车名称 另外 我不喜欢粘性图例 我想将其与甜甜圈分开 这样我就可以更改字体 框的样式 例如
  • 地址更改时如何停止 Angular 重新加载

    我正在使用 Angular 的scrollTo and anchorScroll像这样 app controller TestCtrl function scope location anchorScroll scope scrollTo
  • Chrome Prerender 功能每次都会被取消

    我正在尝试 Chrome 中的预渲染功能 但是当我检查网络时 我可以看到任何链接的请求都被取消 我使用以下语法 我尝试了现场演示http prerender test appspot com http prerender test apps
  • 未处理的拒绝:发送后无法设置标头

    我正在 Dialogflow 中创建一个聊天机器人 当我尝试将数据添加到数据库时 它抛出了 未处理的拒绝 错误 这是我的index js文件 use strict const functions require firebase funct
  • 如何在 jQuery 中检查复选框是否被选中?

    我需要检查checked复选框的属性 并使用 jQuery 根据选中的属性执行操作 例如 如果age复选框被选中 然后我需要显示一个文本框来输入age 否则隐藏文本框 但下面的代码返回false默认情况下 if isAgeSelected
  • jQuery fadeOut 一个 div,fadeIn 另一个 div 在其位置

    我正在尝试一个简单的 jQuery 脚本来淡出一个 div 并淡入另一个 div 但由于某种原因 第一个 div 永远不会淡出 这可能是代码的一个明显问题 但我似乎无法弄清楚 div div div div
  • 我可以防止将 Leaflet 地图平移到世界边缘之外吗?

    有没有办法限制平移到世界边缘之外 在这幅画中 棕色是世界 灰色是虚空 我想让它不可能像这样平移 Leaflet 允许您控制地图抵抗被拖出边界的程度maxBoundsViscosity选项 值 0 到 1 将其设置为最大值会完全禁用拖动出界

随机推荐