TypeScript如何嵌套类型与接口以优化代码组织？

你想要的Animals.Fish.Shark这种嵌套类型引用是完全可行的，但你之前写的嵌套接口语法不符合TypeScript规则——TypeScript不允许在接口内部定义其他接口。下面是几种正确的实现方案：

方案一：使用命名空间（Namespace） #

这是传统的类型组织方式，适合在非模块（无import/export）的环境下使用，需要注意每个层级的成员都要加export才能被外部访问：

namespace Animals {
  export namespace Mamals {
    export interface Bat {
      kind: string;
      wings: number;
    }
  }
  export namespace Fish {
    export interface Shark {
      variant: string;
      color: string;
      fins: number;
    }
  }
}

// 类型声明示例
let greatwhite: Animals.Fish.Shark = {
  variant: "great white",
  color: "gray",
  fins: 5
};

方案二：使用类型别名（Type Alias）嵌套 #

这种方式更符合现代TypeScript的风格，尤其适合模块环境，通过索引访问类型获取嵌套层级：

type Animals = {
  Mamals: {
    Bat: {
      kind: string;
      wings: number;
    }
  };
  Fish: {
    Shark: {
      variant: string;
      color: string;
      fins: number;
    }
  };
};

// 类型声明示例
let greatwhite: Animals["Fish"]["Shark"] = {
  variant: "great white",
  color: "gray",
  fins: 5
};

方案三：模块拆分（推荐大型项目使用） #

将不同类型拆分到独立的模块文件中，再通过统一入口导出，既能保持代码结构清晰，也符合模块化开发规范：

1. 拆分文件：

   • src/animals/mamals/bat.ts：

     export interface Bat {
       kind: string;
       wings: number;
     }
     

   • src/animals/fish/shark.ts：

     export interface Shark {
       variant: string;
       color: string;
       fins: number;
     }
     

2. 统一导出入口src/animals/index.ts：

   import * as Mamals from "./mamals/bat";
   import * as Fish from "./fish/shark";
   
   export const Animals = {
     Mamals,
     Fish
   };
   
   // 也可直接导出单个类型方便直接引用
   export type Bat = Mamals.Bat;
   export type Shark = Fish.Shark;
   

3. 使用示例：

   import { Animals } from "./animals";
   
   let greatwhite: Animals.Fish.Shark = {
     variant: "great white",
     color: "gray",
     fins: 5
   };
   

补充说明 #

你最初尝试的嵌套接口写法错误的原因是：TypeScript的接口内部仅允许定义属性、方法或索引签名，不能嵌套声明其他接口或类型，因此会触发语法错误。

内容的提问来源于stack exchange，提问作者Abraham