无需导入即可使用类型和接口

Posted 2023-03-13

【中文标题】无需导入即可使用类型和接口

【英文标题】：Usage of types and interface without importing

【发布时间】：2019-01-29 16:16:40

【问题描述】：

我最近转向 typescript 来编写 React-Native 应用程序，我注意到的一件事是，我可以使用类型而无需导入/导出它。我已将所有定义文件放在@types 文件夹下。

不导出和导入类型的使用方法是否正确？

如果我从“node_modules”导入一个外部类型（比如来自 react-native 的 ViewStyle）并在我的界面中使用它，它在 IDE 中显示“找不到名称”，我必须导出界面并在需要的地方导入它解决这个问题。

注意：我正在尝试减少导入，IDE：vscode

【问题讨论】：

请在问题中添加相关代码。

您应该导入类型。它们是文件的依赖项，应明确列出。全局类型只能用于全局变量

见***.com/questions/42233987/…

【参考方案1】：

第一个选项：

您可以使用TS namespaces - 它会减少您应用中的导入量（您不必手动从命名空间导入每种类型）。例如，假设我们有app.namespace.ts 文件：

export namespace AppConfig 
  export interface BaseConfig 
    url: string;
    port: number;
  

  export type MyMap<T> = 
    [key: string]: T;
  

  export class Settings 
    public p1: boolean;
    public p2: number;
  

用法：

import  AppConfig  from './app.namespace';
// ...
baseConfig: AppConfig.BaseConfig;
myMap: AppConfig.MyMap<number>;
// ...

第二个选项：

只需在您的项目中创建.d.ts 文件（通常每个应用程序子模块都有自己的模型文件，因此您可以在功能文件夹中创建some-feature.d.ts）。在这种情况下，您可以使用 d.ts 文件中的任何类型而无需导入。

检查这个Stackblitz demo

【讨论】：

如果我有大量的接口并且我不想在我的主文件夹中挂出 20-30 个 interfacename.d.ts 文件怎么办？我也不想将它们全部放在同一个文件中。您建议如何处理？