如何将其他类型导入我的 TypeScript 自定义声明文件？

Question

我的 TypeScript + React + Webpack + Jest + Enzyme 可以正常工作。

我觉得有必要在我的测试规范中提供一些可访问的全局函数。我可以通过将 Jest 配置中的 setupTestFrameworkScriptFile 选项指向 .js 文件来做到这一点，我有这样的东西：

const Enzyme = require("enzyme");
const React = require("react");

const getMuiTheme = require("material-ui/styles/getMuiTheme").default;

global.mountWithContext = (node) => {
    return Enzyme.mount(node, {
        context: {
            muiTheme: getMuiTheme()
        },
        childContextTypes: {
            muiTheme: React.PropTypes.object
        }
    });
};

在我的规范文件中，我可以调用mountWithContext()，它会在我运行测试时正常工作。但我的编辑器无法识别该功能。

为了解决这个问题，我创建了一个 /typings/declarations.d.ts 文件：

declare function mountWithContext(node: any): any;

现在我的规范文件可以识别mountWithContext 函数，但类型是“错误的”。正确的定义应该是这样的：

declare function mountWithContext(node: React.ReactElement<any>): Enzyme.ReactWrapper<P, S>;

React.ReactElement 被正确识别，因为@types/react/index.d.ts 文件包含以下内容：

export = React;
export as namespace React;

酶的情况并非如此。没有导出全局Enzyme。看着@types/enzyme/index.d.ts 有这样的东西：

export interface ReactWrapper<P, S> extends CommonWrapper<P, S> {
    (...)
}

但即使我这样做：

declare function mountWithContext(node: React.ReactElement<any>): ReactWrapper<P, S>;

它不起作用。 ReactWrapper 仍然无法识别。

我尝试在此 declarations.d.ts 文件中导入，这将允许我正确使用类型，但我的函数声明将停止在我的规范文件中被识别。我还尝试添加这样的三斜杠指令：

/// <reference path="../node_modules/@types/enzyme/index.d.ts" />

文件已被识别，但ReactWrapper 类型仍未识别。

那么...我怎样才能为我的自定义 mountWithContext 全局函数创建一个 TypeScript 函数声明，其中包含所有正确的类型，如下所示：

declare function mountWithContext(node: React.ReactElement<any>): ReactWrapper<P, S>;

Answer 1

函数签名错误，必须先声明泛型类型，例如：

function foo(T: bar): T // wrong
function foo<T>(T: bar): T // right
function foo<T extends K, K>(T: bar): K // right

在你的情况下，这样的事情应该可以工作：

declare function mountWithContext<P, S>(node: React.ReactElement<any>): ReactWrapper<P, S>;

如果您碰巧知道P 和S 是关于什么的，那么您可以更具体一些，例如使用<P extends React.Component, K>。

Answer 2

如果我们想要声明 global.mountWithContext 函数存在并且具有指定的类型，我们可以将以下内容添加到项目中的空声明文件中。

import React from 'react';
import enzyme from 'enzyme';

declare global {
  namespace NodeJS {
    interface Global {
      mountWithContext<P, S>(node: React.ReactElement<any>): enzyme.ReactWrapper<P, S>;
    }
  }
}

详情

以下是上述每个结构的分解：

1. declare global 块：此构造的目的是通过引入新声明或修改现有声明，从 内部修改或增加全局范围 非全局上下文，例如模块。我们的声明文件是一个模块，因为它包含一个从 Enzyme 导入 ReactWrapper 的顶级 import 子句。 这样的块称为“全局增强”，也可能出现在实现文件中。

2. interface Global 包装在 namespace NodeJS 结构中：在我们的测试中，我们将 mountWithContext 函数作为全局变量的成员访问，顺便命名为 global，它由 Node 环境提供.此变量已由 Node 的类型声明声明，与其他环境全局变量（例如 process）处于同一级别。但是，我们需要通过添加一个新成员来扩充它的 type。这个全局 global 的 type 是 interface Global 已经在 namespace NodeJS 中声明，由 Node 的官方声明。我们通过声明interfaceGlobal 的新成员来实现这一点。我们的扩充需要包裹在包含Global 的namespace 中，否则它将被视为单独的interface。粗略地说，词法作用域适用。 （回想一下，TypeScript 接口可以在同一范围内多次声明，并且这些声明将被合并）

备注

我们在哪里放置这个声明？ 任何会导致 TypeScript 将其拾取并将其包含在我们的编译上下文中的地方。 按照惯例，我们会将其放在项目根目录中名为 globals.d.ts 的文件中。 （从技术上讲，它可以命名为其他名称并放在较低的目录中）。

请务必注意，此声明文件是我们应用程序代码的一部分，应检查到源代码管理中。 它必须不与第三方声明一起放置在 typings、node_modules/@types 或 typings 等目录中strong>jspm_packages/npm/@types.

还需要注意的是，这种增强只影响 TypeScript 文件（.ts、.tsx、.d.ts）。如果我们宁愿声明这个函数由 TypeScript 语言服务获取，只是为了在处理 .js 或 .jsx, 文件时提供智能感知，那么这种方法将行不通。