Question

我有一个基于Typescript的{{1}}项目，我想在其中将文件（或也许是一个文件）中的类型定义（如React Native，interface等）外部化并重新使用目录中的几个文件）。

我的理解是，如果我在enum中定义了types或typings条目，这应该可以工作。由于我的IDE抱怨在尝试简单的package.json集成时找不到名称，因此这似乎不起作用。我当然可以在文件中Interface进行必需的定义，但是我认为作为一个“正式”打字稿项目（使用import提供的模板），这些应该可以立即使用。

我的package.json：

@react-native-community

我的tsconfig.json

{ 
  "name": "appname",
  "typings": "./src/typings/index.d.ts",
  ...
  "scripts": {
    ...
  },
  "dependencies": {
    ...
  },
  "devDependencies": {
    ...
    "@types/jest": "^24.0.18",
    "@types/react-native": "^0.60.22",
    ....
    "typescript": "^3.6.3"
  },
  ....
}

一个组件的用法示例：

{ 
  "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                  
  },
  "exclude": [
    "node_modules", "babel.config.js", "metro.config.js", "jest.config.js"
  ]
}

export const ActionButton:React.FC<ActionButtonProps> =(props)=>{ ... }读为：

ActionButtonProps

我想将以上内容外部化到一个单独的文件中（在export enum EButtonType { primary= "PRIMARY", secondary= "SECONDARY", tertiary="TERTIARY" } export interface ActionButtonProps { title: string submitting: boolean onPress: ()=>void hideLoading?: boolean loadingSize?:number | "small" | "large" | undefined loadingColor?: string type?: keyof typeof EButtonType }的{{1}}属性中定义或类似的内容），而不必在我要使用的每个文件中导入所需的类型定义

当前，我的IDE抱怨typings：即使我在package.json的{{1}}属性中引用的文件已经定义了条目，“也找不到名称ActionButtonProps”。

我认为这只是缺少某些配置或更改条目的情况。

我尝试了以下方法，但均无效：

在组件文件的顶部具有一个三斜杠参考条目，其路径属性指向该文件：TS error 2304
在组件文件的顶部具有一个三斜杠参考条目，其path属性指向位于旁边的文件：typings
将具有通配符值的package.json属性添加到/// <reference path="../../../../../typings/index.d.ts" />：/// <reference path="./ActionButton.d.ts" />
将具有通配符和非通配符值的include属性添加到tsconfig.json："include": ["src/**/*","./src/typings/**/*"],

任何指针将不胜感激。如果有解决方案，我也有其他相关查询。有没有一种方法可以让typeRoots调用位于其内部目录中的单独文件？即tsconfig.json调用在"typeRoots": ["src/typings/", "src/typings/**/*"],和index.d.ts

中定义的条目

修改

我的TS版本是3.6.4，节点版本是12.12.0

Answer 1

不导入类型就包括类型的标准方法是在typeRoots中使用tsconfig.json。根据您提供的代码，您尝试执行此操作时似乎没有从node_modules添加类型，这可能就是为什么它不起作用的原因。

此配置已在多个项目中为我工作：

"typeRoots" : [
  "./node_modules/@types",
  "./src/typings"
]

有关更多详细信息，请参见https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types。

如何在React Typescript项目中集成在外部文件中定义的类型

1 个答案: