如何导出命名空间中的打字稿接口以在另一个模块中使用？答案

【问题标题】：How Can I export typescript interface which in namespace to use in another module?如何导出命名空间中的打字稿接口以在另一个模块中使用？
【发布时间】：2019-10-16 17:50:11
【问题描述】：

我有一个这样的界面：

x.ts:

 namespace Basex {
    export interface AddressDto  {
        AddressDetail?: string;
        AddressName?: string;
        AddressType?: number;
        City?: string;
        CityCode?: number;
        CountryCode?: number;
        DexjustizCode?: string;
        District?: string;
        HouseNumber?: number;
        HouseNumberDetail?: string;
        Id?: number;
        IsMainAddress?: boolean;
        LastAddressInterval?: string;
        Street?: string;
        Text?: string;
        Town?: string;
        ValidationLevel?: number;
        ValidityEndDate?: Date;
        ValidityStartDate?: Date;
     }  
}
    
// I use this object on my screen in this way;

const {Basex}  = require('../../src/model/dto/x');

我可以像这样访问AddressDto Basex.AddressDto

但我无法从另一个依赖项目访问此命名空间。我已经尝试使用上述方法在依赖项目的index.ts中导出。但它不可能。很快如何从另一个依赖项访问这个命名空间的接口？

【问题讨论】：

标签： reactjs typescript interface namespaces typescript-typings

【解决方案1】：

您必须导出界面。请参考here

【讨论】：

我认为他已经导出了接口，但他也必须导出命名空间

【解决方案2】：

你也可以在需要的位置导入你的接口模块，从那里你可以把它作为一个道具传递，我认为这将是一种方便的方式

例如：按钮.props.ts

import { ViewStyle, TextStyle, TouchableOpacityProps } from "react-native"
import { ButtonPresetNames } from "./button.presets"

export interface ButtonProps extends TouchableOpacityProps {
  /**
   * Text which is looked up via i18n.
   */
  tx?: string

  /**
   * The text to display if not using `tx` or nested components.
   */
  text?: string

  /**
   * An optional style override useful for padding & margin.
   */
  style?: ViewStyle | ViewStyle[]

  /**
   * An optional style override useful for the button text.
   */
  textStyle?: TextStyle | TextStyle[]

  /**
   * One of the different types of text presets.
   */
  preset?: ButtonPresetNames

  /**
   * One of the different types of text presets.
   */
  children?: React.ReactNode
}

在 button.tsx 中将其作为道具传递

import * as React from "react"
import { TouchableOpacity } from "react-native"
import { Text } from "../text"
import { viewPresets, textPresets } from "./button.presets"
import { ButtonProps } from "./button.props"
import { mergeAll, flatten } from "ramda"

/**
 * For your text displaying needs.
 *
 * This component is a HOC over the built-in React Native one.
 */
export function Button(props: ButtonProps) {
  // grab the props
  const { preset = "primary", tx, text, style: styleOverride, textStyle: textStyleOverride, children, ...rest } = props

  const viewStyle = mergeAll(flatten([viewPresets[preset] || viewPresets.primary, styleOverride]))
  const textStyle = mergeAll(flatten([textPresets[preset] || textPresets.primary, textStyleOverride]))

  const content = children || <Text tx={tx} text={text} style={textStyle} />

  return (
    <TouchableOpacity style={viewStyle} {...rest}>
      {content}
    </TouchableOpacity>
  )
}

在 index.ts 中，只需简单地导出 button.tsx

export * from "./button"

【讨论】：