时间戳

首页 > 解决方案 > 如何解构打字稿中的类型？

typescript - 如何解构打字稿中的类型？

问题描述

目录解构是这样的：

在此处输入图像描述

首先，我在repository模块中暴露了一些子模块：repository/index.ts

    import { CachePlugin } from "./plugins/cache-plugin";
    import { EsPlugin } from "./plugins/es-plugin";
    const plugin = { EsPlugin, CachePlugin };
    export { FindResultPageNext, plugin };

其次，我将存储库的所有子模块（包括类型）公开给 index.ts 作为一个集合 index.ts

    import * as repository from "./repository";
    export { repository };

如果我使用EsPlugin，参考会很长，其他文件的介绍：test.ts

   class A extends repository.plugin.EsPlugin {
   }

这只是一个例子。实际使用中，还有嵌套更深的模块，如respository.xxx.xxx.a。引入一个模块。有没有解决这个问题的好方法？您希望直接引用 a 吗？

标签： typescript

解决方案

导出时，您可以导出默认导出：

export default { data: 123 }

或命名导出：

export const data = { data: 123 }

// or

const data = { data: 123 }
export { data } // equivalent

导入时，您可以导入默认导出：

import data from './data'

或命名导出：

import { data } from './data'

或您重命名的命名导出：

import { data as myData } from './data'

或者所有命名的导出都封装到一个对象中：

import * as data from './data'

你不能做的是在import语句中使用解构。如果命名导出不够具体，那么您需要深入了解导入的值：

import { something } from './something'
const myValue = something.foo.bar.baz
// now use mValue instead of something.foo.bar.baz

但是您是添加此嵌套的人。通常不建议采用这种进口和再出口的方式。它使得有很多方法可以导入相同的值，这可能会造成混淆。

例如，这里有三种方法可以导入完全相同的值。

import { CachePlugin } from "./plugins/cache-plugin";

import { plugin } from './repository'
const { CachePlugin } = plugin

import { respository } from '.'
const { plugin: { CachePlugin } } = repository

那不是很好。

关键是：

import * as repository from "./repository";
export { repository };

通常是没有充分理由的不良模式。您现在可以使用另一种深度嵌套的方式来导入可以从另一个文件导入的完全相同的值。

推荐阅读