Typescript: .d.ts文件未被识别

Question

这个问题可能非常简单，但我正在疯狂地尝试解决它。

在外部index.ts文件中有一个非常简单的自执行函数，需要在window对象上注册一个全局变量。我想这样赋值：

(() => {
  window.myCustomGlobal = new MyCustomGlobal();
})()

我在index.ts旁创建了index.d.ts:

import { MyCustomGlobal} from './classes';

declare interface Window {
  myCustomGlobal: MyCustomGlobal;
}

以上没有任何错误，看起来一切都很好。应用程序编译正常。

然而，在IDE中，我遇到了一个错误： ts2339: Property 'myCustomGlobal' does not exist on type 'Window'

我真的无法弄清楚Typescript究竟是如何“找出”要包含哪个.d.ts文件的。在某些库中，将.d.ts文件与.js文件放在一起会导致它被捡起来，并且它可以正常工作。实际上，我使用了与上面完全相同的接口与全局第三方库一起使用，效果很好；只是我的IDE似乎不会捡起它。

我尝试将index.d.ts添加到tsconfig.json的include和files中，但都没有成功。

有人能够像对待孩子一样解释一下是什么原因导致TS捡起声明文件吗？有些日子我感觉我已经明白了，但是在像这样愚蠢简单的例子中，我感觉自己像个傻瓜。

谢谢

- dudewad

Answer 1

这里可能有两个问题：

1.) 你需要在全局范围内增加Window接口。

要么删除所有的import/export关键字，使包含文件成为非模块/脚本。或者，你可以在一个模块中使用declare global将其中所有内容标记为全局声明：

import { MyCustomGlobal} from './classes';

declare global {
  interface Window {
    myCustomGlobal: MyCustomGlobal;
  }
}

2.) 同名的文件，只是它们的扩展名不同，无法正常工作。 引用文档：

请注意，编译器不会包含可能的输出文件；例如，如果输入包括 index.ts，则排除 index.d.ts 和 index.js。通常情况下，不建议将仅在扩展名上区别的文件相邻放置。

确保给index.d.ts一个不同的名称（例如global.d.ts），这样编译器就不会只选择index.ts。如果将global.d.ts放置在通过 tsconfig.json标记的TS项目中并且未指定"files"和"include"配置选项，则会自动包含global.d.ts。

- ford04

---

就是这样——那就是文件名。浪费了几个小时来尝试搞清楚这个问题，真是够了。我已经尝试使用declare global语法，但它没有起作用，只是因为文件名的原因。 非常感谢！ - dudewad

但是如果我想手动编写d.ts文件来匹配某个.js文件，该怎么办呢？ - pery mimon

@kuanyui 在一个模块（带有 import/export 的文件）中，你只需要使用 declare global。对于脚本文件，你可以直接省略它。 - ford04

顺便提一下：文档链接的内容已经更改，不再包括引用的段落。我仍然会将其保留在这里，因为我认为它仍然是一个精确的描述。 - ford04

第二部分非常有帮助。我将我的定义文件命名为 index.d.ts，并花了一个小时检查我的配置是否正确。你救了我的一天！ - SiegeSailor

Answer 2

我们在 tsconfig.json 中声明了 "include": ["src"]，这导致位于根目录 ("/") 下的 declarations.d.ts 未被检测到。

- xRiot

Answer 3

这真是太奇怪了，但为了使它起作用，我需要在tsconfig.json的include部分中包含types文件夹。

- shamaseen

---

这是一个技巧：` - mewc

Answer 4

在我的端上，我必须在tsconfig.json中的lib下添加DOM，以便typescript编译器能够识别window对象。

- The.Wolfgang.Grimmer