【问题标题】:In TypeScript v2.2.2, how do you create a definition file for a Javascript library that doesn't have a tsd?在 TypeScript v2.2.2 中,如何为没有 tsd 的 Javascript 库创建定义文件?
【发布时间】:2023-03-28 07:23:01
【问题描述】:

我正在寻找一个完整的示例,或者至少是为 @types 中没有或包含在包中的 JavaScript 库创建定义文件(不一定必须是 tsd)的最佳实践.

到目前为止,我已经能够将基本解决方案放在一起 here,但它似乎没有遵循 TypeScript 网站上“定义”部分中给出的确切指导。

在上面的存储库中,我使用的是包@google-cloud/datastore,据我所知,它还没有 tsd 文件。文档足够好,我应该能够为我感兴趣的部分创建手动定义文件,但我很难弄清楚手动导出此类定义的最佳做法是什么。

具体来说,来自here,它说:

/*~ This is the module template file for class modules.
 *~ You should rename it to index.d.ts and place it in a folder with the same name as the module.
 *~ For example, if you were writing a file for "super-greeter", this
 *~ file should be 'super-greeter/index.d.ts'
 */

/*~ Note that ES6 modules cannot directly export class objects.
 *~ This file should be imported using the CommonJS-style:
 *~   import x = require('someLibrary');
 *~
 *~ Refer to the documentation to understand common
 *~ workarounds for this limitation of ES6 modules.
 */

/*~ If this module is a UMD module that exposes a global variable 'myClassLib' when
 *~ loaded outside a module loader environment, declare that global here.
 *~ Otherwise, delete this declaration.
 */

根据上面的说明,听起来我应该能够将index.d.ts 文件放入我的node_modules/@types 目录之外的文件夹中,该文件夹与我的模块具有相同的文件夹结构。例如,在我的存储库中,我有一个顶级目录@google-cloud/datastore,其中包含一个 index.ts 文件,但从文档中听起来我应该能够使用 index.d.ts 文件;但是,我的模块和编译器都无法找到它。我需要一个编译器选项吗?

其次,我在存储库中采用的方法是否正确。这种方式在他们的网站上没有记录,在找到解决方案之前我不得不猜测它。我实际上是将 JavaScript 包 google-cloud/datastore 导入 index.ts,添加我的类型,然后将其导出以供我的模块使用。但是,我的模块必须通过 ./@google-cloud/datastore 引用包,因为这是 TypeScript 定义的实际位置。

简而言之,在 TypeScript v2.2.2 中,为不包含 tsd 的 JavaScript 库创建小型本地 TypeScript 定义文件的最佳实践是什么?

后果

我使用Alex 建议的解决方案更新了我的存储库,一切似乎都按预期工作。我想指出,它似乎也可以通过添加 { "baseUrl": "types" } 参数来工作,但我不清楚为什么这是正确的,所以我采用了建议的方法。 --traceResolution 标志对此非常有帮助。

在此示例中,我确保还包含另一个具有 TypeScript 定义的模块 lodash,以确保正常的模块分辨率仍然正确。

我的目录/文件结构:

+ js
  ...
+ node_modules
  + @google-cloud
    + datastore
  + lodash
  + @types
    + lodash
  + ...
+ types
  + @google-cloud
  - index.d.ts
  + datastore
    -  index.d.ts 
- index.ts
- package.json
- tsconfig.json

跟踪解析

出于好奇,我想发布一个调用tsc --traceResolution 的错误/正确结果示例。为了清楚起见,我对结果进行了缩写。

不正确没有paths参数TypeScript将@google-cloud/datastore解析为index.js文件,这是错误的。

======== Module name '@google-cloud/datastore' was successfully resolved to 'C:/Users/Kory/Documents/Repos/playground/manual-typescript-definition/node_modules/@google-cloud/datastore/src/index.js'. ========

正确使用paths 参数。请注意,@google-cloud/datastore 解析为 index.d.ts 文件,而不是 JavaScript 文件。

======== Module name '@google-cloud/datastore' was successfully resolved to 'C:/Users/Kory/Documents/Repos/playground/manual-typescript-definition/types/@google-cloud/datastore/index.d.ts'. ========

【问题讨论】:

标签: typescript tsd


【解决方案1】:

您可以使用 compilerOptions pathstypeRoots 获取 tsc 以检测自定义 .d.ts 文件。它将在列出的目录中搜索与您的包匹配的文件夹(即@google-cloud/datastore

例如

"paths": {
  "*": [
    "types/*"
  ]
},
"typeRoots": [
  "./types"
]

其中types 是目录结构根目录下的一个文件夹,您创建了一个文件types/@google-cloud/datastore/index.d.ts

您可以使用tsc --traceResolution 快速查看tsc 在搜索类型定义时考虑的文件/文件夹

【讨论】:

  • 优秀的答案! TypeScript 对你来说并不容易。根据文档,您可能认为它可以解决使用没有额外“路径”参数的正确类型。感谢--traceResolution 标志,它让事情变得更加清晰。
猜你喜欢
  • 2015-11-17
  • 2017-03-02
  • 1970-01-01
  • 2019-04-16
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多