如何在纱线包中创建 index.d.ts 文件？答案

【问题标题】：How to create index.d.ts file in yarn package?如何在纱线包中创建 index.d.ts 文件？
【发布时间】：2021-10-26 10:18:36
【问题描述】：

我已经创建了yarn包，但是我无法创建index.d.ts文件。

这是我的tsconfig.json：

{
  "include": ["src/**/*"],
  "exclude": ["node_modules", "**/*.spec.ts"],
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "declaration": true,
    "outDir": "dist",
    "strict": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6", "es2020"],
    "baseUrl": ".",
    "types": ["node"],
    "paths": {
      "assets/*": ["./src/assets/*"],
      "components/*": ["./src/components/*"],
      "services/*": ["./src/services/*"],
      "types/*": ["./src/types/*"],
      "utils/*": ["./src/utils/*"]
    },
    "typeRoots": ["./node_modules/@types/"],
    "skipLibCheck": true
  }
}

这是package.json：

{
  "name": "name",
  "version": "1.0.0",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "files": [
    "dist/**/*"
  ],
  "scripts": {
    "clean": "rm -rf ./dist",
    "build": "yarn run clean && tsc --project tsconfig.json && tscpaths -p tsconfig.json -s ./src -o ./dist",
    "publicate": "yarn version && yarn run build && yarn publish --access public"
  },
  "author": "author",
  "license": "MIT",
  "private": true,
  "devDependencies": {
    "@react-native-community/datetimepicker": "^3.5.2",
    "@react-navigation/native": "^6.0.2",
    "@types/react-native": "^0.64.13",
    "@types/react-native-htmlview": "^0.12.3",
    "@types/react-native-vector-icons": "^6.4.8",
    "axios": "^0.21.1",
    "formik": "^2.2.9",
    "react": "^17.0.2",
    "react-native": "^0.65.1",
    "react-native-barcode-mask": "^1.2.4",
    "react-native-document-picker": "^6.0.4",
    "react-native-dropdownalert": "^4.3.0",
    "react-native-fast-image": "^8.3.7",
    "react-native-floating-label-input": "^1.3.11",
    "react-native-heroicons": "^2.0.1",
    "react-native-htmlview": "^0.16.0",
    "react-native-image-picker": "^4.0.6",
    "react-native-location": "^2.5.0",
    "react-native-masked-text": "^1.13.0",
    "react-native-paper": "^4.9.2",
    "react-native-permissions": "^3.0.5",
    "react-native-size-matters": "^0.4.0",
    "react-native-svg": "^12.1.1",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^8.1.0",
    "rn-fetch-blob": "^0.12.0",
    "tscpaths": "^0.0.9",
    "typescript": "^4.3.5"
  }
}

**.d.ts 文件仅出现在 dist 子文件夹中。例如，我在路径components/app/Plug/Plug.tsx 中有组件“Plug”。在yarn build 之后出现两个文件-Plug.js 和Plug.d.ts。但是文件index.d.ts 没有出现在 dist 文件夹中。

我做错了吗？我该如何解决？

【问题讨论】：

您的目录中有 index.ts 文件吗？ TypeScript 只编译它看到的文件。
@FloWy Ahhh，我明白了......我现在在 src 中创建了 index.ts，在那里导出了我的组件，并且 index.d.ts 出现了。非常感谢！
没问题 :) 顺便说一句。您可以将我的答案标记为正确，以便澄清这个问题:)

标签： reactjs typescript react-native npm yarnpkg

【解决方案1】：

TypeScript 不知道你要生成一个index.d.ts，因为它没有可以编译的index.ts 文件。

让库的用户直接从包中导入的常用方法是拥有一个导出所有模块的index.ts 文件。像这样的：

export * from './moduleA';
export * from './moduleB';

在编译时，TypeScript 会生成一个 index.d.ts 文件，其中包含 moduleA 和 moduleB 中的所有类型。

目前，在 TypeScript 中自动生成 index.d.ts 文件并没有什么花哨的方法。

【讨论】：