TypeScript中的循环类型引用

Question

我是打字稿的新手,我想了解如何在两种类型之间设置循环引用.引用不必是完整的代码引用,只需要接口,但接口定义在单独的文件中.例如,假设我有两个接口:Parent和Child.它们是双重关联的,因此父母有一个孩子的集合,每个孩子都有父母的参考(如下所示).如何设置导入或依赖项,以便可以在单独的文件中定义它们？

interface Parent {
  children: Child[]
}

interface Child {
  parent: Parent
}

Answer 1

我也遇到过类似的情况。

我可以通过使用来解决import type。

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html

Answer 2

以下两种解决方案 我更喜欢后者,因为它提供了与Node JS模块的干净接口,但遗憾的是我的IDE还没有像我那样喜欢它...

使用参考

创建一个definitions.d.ts仅包含对类/接口的引用的文件

/// <reference path="Parent.ts" />
/// <reference path="Child.ts" />

在Parent.ts和中Child.ts,指向单个引用,即definitions.d.ts文件

/// <reference path="definitions.d.ts" />

使用import ... require

在传递--module commonjs标志tsc,然后import你require和export你想暴露什么

在Parent.ts中

 import Child = require('Child')

 interface Parent { 
     children: Child[]
 }

 export = Parent

在Child.ts

 import Parent = require('Parent')

 interface Child {
     parent: Parent
 }

 export = Child

请注意,您未指定扩展名".ts" require

编辑2016年9月

现在最好使用ES6样式导入(并避免默认导出):

Parent.ts

import { Child } from './Child'

export interface Parent { 
    children: Child[]
}

Child.ts

import { Parent } from './Parent'

export interface Child {
    parent: Parent
}

Answer 3

我有大约 10 个 ts 文件，位于 Circular-Dependency-Hell 中。

\n\n

常用的方法已经帮不了我了，因为10个文件之间的依赖关系太复杂了。

\n\n

最后，我解决了。使用以下2种方法：

\n\n

\n

1. 安装仓库 \xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94 "circular-dependency-plugin": "5.0.2"

   \n\n

   这个仓库将帮助我找到循环发生的地方。

\n

2. 使用设计的internal.ts来管理我的导入和导出

   \n\n

   我尝试了这篇文章的方法：

   \n\n

   如何一劳永逸地解决 JavaScript 和 TypeScript 中令人讨厌的循环依赖问题

   \n\n

   这篇精彩的文章告诉我创建internal.ts。

   \n\n

   并使用 likeexport * form \'file-A\' ; export * from \'file-B\'来管理我的循环依赖项。

   \n\n

   当我使用与我的 10 个文件相关的依赖项时，它工作得非常好，就像这样import classA from \'../internal.ts\'。

\n

\n\n

\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2 \x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80 \x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94 \xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2 \x80\x94\xe2\x80\x94\xe2\x80\x94

\n\n

如果上面的方法对你没有效果，我找到了另一个通用的解决方案：

\n\n

使用

\n\n

const File_Promise = import (\'yourFilePath\')"导入其他文件或模块。

\n\n

当你需要使用这个时，使用

\n\n

File_Promise.then (file => { file.xxx(file.yyy) })\n，就像使用 Promise 语法一样。\n`

\n\n

这将打破循环深度链！

\n\n

如果我是你，我将继续此操作，直到“循环依赖插件”报告没有错误为止。

\n\n

\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2 \x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80 \x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94 \xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2\x80\x94\xe2 \x80\x94\xe2\x80\x94\xe2\x80\x94

\n\n

希望对您有所帮助\xef\xbc\x81

\n