React Native TypeScript外置类型定义配置故障与子目录导入问询

一、为什么配置typings后还是报TS2304错误？ #

你踩了一个常见的误区：package.json里的typings字段是给你的项目作为npm包被其他项目引用时提供类型入口用的，在当前项目内部全局使用类型，光靠这个配置完全不够！要让项目内的组件不用导入就能用类型，得做这几步：

1. 把类型改成全局声明

你的类型文件用了export，这会把它变成一个模块，而全局类型需要脱离模块作用域，有两种写法：

• 写法一：直接去掉export，变成全局声明

  // src/typings/index.d.ts
  declare enum EButtonType {
    primary= "PRIMARY",
    secondary= "SECONDARY",
    tertiary="TERTIARY"
  }
  declare interface ActionButtonProps {
    title: string
    submitting: boolean
    onPress: ()=>void
    hideLoading?: boolean
    loadingSize?:number | "small" | "large" | undefined
    loadingColor?: string
    type?: keyof typeof EButtonType
  }
  

• 写法二：如果需要保留模块特性（比如同时支持导入使用），用declare global包裹，最后加export {}让TS识别为模块

  // src/typings/index.d.ts
  declare global {
    enum EButtonType {
      primary= "PRIMARY",
      secondary= "SECONDARY",
      tertiary="TERTIARY"
    }
    interface ActionButtonProps {
      title: string
      submitting: boolean
      onPress: ()=>void
      hideLoading?: boolean
      loadingSize?:number | "small" | "large" | undefined
      loadingColor?: string
      type?: keyof typeof EButtonType
    }
  }
  
  // 必须加这行，否则declare global不生效
  export {}
  

2. 修正tsconfig.json配置

• 确保include包含你的类型目录，去掉无效的typeRoots（这个是用来指定npm包的类型目录，比如@types，本地类型不需要它）

  {
    "compilerOptions": {
      // 你的原有配置...
      "resolveJsonModule": true,
      "target": "esnext",
      "module": "commonjs",
      "lib": ["es6"],
      "allowJs": true,
      "jsx": "react-native",
      "noEmit": true,
      "incremental": true,
      "isolatedModules": true,
      "strict": true,
      "moduleResolution": "node",
      "baseUrl": "./",
      "allowSyntheticDefaultImports": true,
      "esModuleInterop": true
    },
    "include": [
      "src/**/*",
      "src/typings/**/*"
    ],
    "exclude": [
      "node_modules",
      "babel.config.js",
      "metro.config.js",
      "jest.config.js"
    ]
  }
  

3. 重启IDE验证

VS Code的TypeScript语言服务有时候会缓存旧配置，重启后再打开项目，应该就能识别全局类型了。如果还是报错，运行npx tsc --noEmit看终端输出的详细错误，排查路径或者语法问题。

二、如何在src/typings/index.d.ts中引入子目录的类型文件？ #

完全可以，推荐两种方式：

1. 三斜线引用（最简单）
   在index.d.ts里直接用相对路径引用子目录的类型文件，TS会自动合并这些全局类型：

   // src/typings/index.d.ts
   /// <reference path="./moduleA/index.d.ts" />
   /// <reference path="./moduleB/index.d.ts" />
   

   注意路径要和文件实际位置对应，比如moduleA在src/typings下，就用./moduleA/index.d.ts。

2. 模块导入+全局声明（适合需要模块化管理的场景）
   如果子目录的类型文件是模块（用了export），可以在index.d.ts里导入后，把它们挂载到全局作用域：

   // src/typings/moduleA/index.d.ts
   export interface ModuleAProps {
     id: string
     name: string
   }
   
   // src/typings/index.d.ts
   import { ModuleAProps } from './moduleA';
   import { ModuleBProps } from './moduleB';
   
   declare global {
     type ModuleAProps = typeof ModuleAProps;
     interface ModuleBProps extends typeof ModuleBProps {}
   }
   
   export {}
   

   这种方式既保留了子模块的独立性，又能让类型全局可用。

额外注意点 #

• 你的TypeScript版本3.6.4和Node.js 12.12.0都支持这些特性，版本没问题；
• isolatedModules选项开启时，每个文件都会被当作单独模块，所以全局类型必须用declare global或者纯全局声明（不能有模块级export，除非加export {}）。

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