CODEWITHSUNDEEP
reactjstypescripttypescript-typings
d_theg
d_theg

Reputation: 53

Custom Typescript NPM Package Won't Generate Types

I've got an npm package that I've built that's Typescript and for some reason when building, it's not generating type definition files and when I try to run it I get the classic Could not find a declaration file for module...

I've tried adding types and typings to package.json with no luck.

package.json

{
  "name": "@org/mypackage",
  "version": "0.0.7",
  "description": "",
  "main": "index.js",
  "transform": {
    "^.+\\.(ts|tsx)?$": "<rootDir>/node_modules/babel-jest"
  },
  "scripts": {
    "build": "tsc"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/sample/sample.git"
  },
  "author": "Ken M",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/sample/sample/issues"
  },
  "homepage": "https://github.com/sample/sample#readme",
  "dependencies": {
    "@types/jest": "^24.0.13",
    "@types/node": "12.0.2",
    "@types/react": "16.8.17",
    "@types/react-dom": "16.8.4",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "3.0.1",
    "tachyons": "^4.11.1"
  },
  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-react": "^7.0.0",
    "@typescript-eslint/eslint-plugin": "^1.9.0",
    "@typescript-eslint/parser": "^1.9.0",
    "awesome-typescript-loader": "^5.2.1",
    "babel-jest": "^24.8.0",
    "babel-preset-react": "^6.24.1",
    "eslint": "^5.16.0",
    "eslint-config-prettier": "^4.3.0",
    "eslint-plugin-prettier": "^3.1.0",
    "prettier": "^1.17.1",
    "typescript": "^3.4.5"
  }
}

tsconfig.json

See tsconfig.json below. Adding declaration: true to it did not result in a file getting generated. For what it's worth, the main: index.js isn't getting generated either.

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": false,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "outDir": "./dist",
    "jsx": "react",
    "declaration": true
  },
  "include": ["src/**/*"]
}

Upvotes: 3

Views: 2582

Answers (1)

Shaun Luttin
Shaun Luttin

Reputation: 141712

Short Answer

Add declaration to the compilerOptions section of your tsconfig.json file.

"declaration": true, /* Generates corresponding .d.ts file. */

Alternatively, change your build script to include --declaration.

"build": "tsc --declaration"

Both options will cause npm run build to generate declaration files.

Then update your package.json file by adding a types property that points to the main declaration file. In the following example, I have assumed that your main declaration file is at ./index.d.ts. 

"main": "index.js",
"types": "index.d.ts",

Additional Details

The opening section of the Publishing docs have more detail about the answer.

There are also additional compiler options here. Here are three that might be useful in your situation:

  • declarationDir Output directory for generated declaration files.
  • declarationMap Generates a sourcemap for each corresponding .d.ts file.
  • emitDeclarationOnly Only emit .d.ts declaration files.

The last option in the list is handy when you are already using babel to transform files from TypeScript to JavaScript and only want to use TypeScript to generate declaration files and to perform type checking.

Upvotes: 1

Related Questions