Question

我想将类型导入反应脚本生成的文件中。

我创建了this minimal repo来显示问题。

到目前为止，我已经拥有了：

// import * as React from 'react';
// import { MemoryHistory } from 'history';
// import { RenderResult } from 'react-testing-library';

interface Window {
  env: any;
}

type ContextDefaultValue = [string, (val: string) => void];

/* global function for rendering with Router */
declare function renderWithRouter(ui: any, { route, history, }?: {
  route?: string;
  history?: any;
}): any;

如果取消注释任何导入语句并运行tsc，则renderWithRouter不再在全局名称空间中，并且出现此错误：

找不到名称“ renderWithRouter”。

我不能在.d.ts文件中导入类型吗？

Answer 1

在文件中添加导入文件使其成为一个模块。因此，在模块中，如果您声明接口Window，则该接口声明为该模块本地的。

如果要使用导入，但仍将声明保持全局，则有两个选择：

使用declare global

import * as React from 'react';
import { History } from 'history';
import { RenderResult } from 'react-testing-library';

declare global {
  interface Window {
    env: any;
  }

  declare function renderWithRouter(ui: any, { route, history, }?: {
    route?: string;
    history?: History;
  }): RenderResult;
}

使用import类型

interface Window {
  env: any;
}

declare function renderWithRouter(ui: any, { route, history, }?: {
  route?: string;
  history?: import('history').History;
}): import('react-testing-library').RenderResult;

无论哪个版本都可以使用，如果您使用其他模块中的很多类型，则declare global会更容易。

Answer 2

如果您查看打字稿的官方文档，则会非常清楚地说明工作逻辑（包括此错误）及其结构。 1，2

从模块导入

您可能会开始遇到诸如Cannot find name 'require'.和Cannot find name 'define'之类的错误。在这种情况下，您可能正在使用模块。虽然您可以通过写出文字来使TypeScript相信它们存在

//对于Node / CommonJS

declare function require(path: string): any;

或

//对于RequireJS / AMD

declare function define(...args: any[]): any;

最好摆脱这些调用，并使用TypeScript语法进行导入。

首先，您需要通过设置TypeScript的模块标志来启用某些模块系统。有效选项为commonjs，amd，system和umd。

如果您具有以下Node / CommonJS代码：

var foo = require("foo");

foo.doStuff();

或以下RequireJS / AMD代码：

define(["foo"], function(foo) {
    foo.doStuff();
})

然后您将编写以下TypeScript代码：

import foo = require("foo");

foo.doStuff();

导入react-scripts react-app-env.d.ts中断了tsc构建

2 个答案: