如何在 yarn package 中创建 index.d.ts 文件？

Question

I have created yarn package, but I can't create index.d.ts file.

This is my 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
  }
}

This is 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 files only appear in dist subfolders. For example, I have component 'Plug' in path components/app/Plug/Plug.tsx . After yarn build two files appear - Plug.js and Plug.d.ts . But file index.d.ts doesn't appear in dist folder.

Am I doing something wrong? How can I fix it?

Answer 1

TypeScript does not know that you want to generate an index.d.ts , because there is no index.ts file that it can compile.

A common way to let users of your library import directly from a package is by having an index.ts file that exports all your modules. Something like this:

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

While compiling, TypeScript generates a index.d.ts file with all the types that are in moduleA and moduleB .

Right now, there is no fancy way to generate automatically an index.d.ts file in TypeScript.