Question

我想将组件类型分成单独的index.d.ts，然后将这些类型导入到我的src文件夹下的最终index.d.ts中。如何将这些类型导入单个index.d.ts而不出现错误[ts] Import or export declaration in an ambient module declaration cannot reference module through relative module name.？

文件：

src
 |__components  
 |  |__Text  
 |     |__index.js
 |     |__index.d.ts
 |  |__Button
 |     |__index.js
 |     |__index.d.ts
 |__index.js
 |__index.d.js

src / index.d.ts

declare module "my-module-name" { 
  export { default as Text } from "./components/Text/index.d.ts";
}

src / index.js

export { default as Text } from "./components/Text";
export { default as Button } from "./components/Button";

Answer 1

您不需要使用declare module。相对路径无论如何都不能在那儿工作-它们只能在模块增强中使用，也就是说，当您修改现有定义时。

首先在各个文件夹中声明组件。我只使用了React.ComponentType，但是您可以更具体一些。

./src/components/Button/index.d.ts

import * as React from 'react';

declare const Button: React.ComponentType;

export default Button;

./src/components/Text/index.d.ts

import * as React from 'react';

declare const Text: React.ComponentType;

export default Text;

接下来，创建一个桶文件以重新导出您的组件。

./src/index.d.ts

export { default as Text } from './components/Text'
export { default as Button } from './components/Button'

现在可以从./src及其各自的文件夹访问您的组件。如果我们在您项目的根目录中创建了另一个名为consumer的目录，它将有权访问您的组件：

./consumer/index.ts

/**
 * Import the re-exported components from `./src/index.d.ts`:
 */
import { Button } from '../src/';

/**
 * Or import from their respective folders:
 */
import Text from '../src/components/Text';

要牢记以这种方式解析路径，需要在"moduleResolution"中将"node"设置为tsconfig.json。

{
  "compilerOptions": {
    "baseUrl": ".",
    "moduleResolution": "node"
  }
}

TS将单独的类型文件导入单个index.d.ts文件

1 个答案: