NPM Custom Package : Compile And Export TypeScript Interfaces

Question

Question: Am I missing some TS configuration, or some TS build step?

I have created a new npm package:

Custom-NPM-Package /
- src
-- index.js
-- index.d.ts
-- IType.ts

with this tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "CommonJS", 
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": false,
    "declaration": true,
    "declarationDir": "./dist",
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",

    "outDir": "./dist", 
    "rootDir": "./src", 
    "allowSyntheticDefaultImports": true, 
  },
  "include": [
    "./src/**/*.ts", 
    "./src/**/*.tsx", 
    "./src/**/*.jsx" 
  ],
  "exclude": [
    "node_modules", 
    "dist"
  ]
}

The goal is to import the Types from other projects (React),

Install the package:

npm install Custom-NPM-Package

Import TS Type:

import { IType } from 'Custom-NPM-Package'

but I'm having an error:

./node_modules/Custom-NPM-Package/dist/index.js export 'IType' (reexported as 'IType') was not found in './IType' (possible exports: IType, __esModule)

In the custom package, is the types or typings field set in its package.json? — adsy
– adsy, Commented Sep 9, 2023 at 6:15
@adsy yes i have created a folder types containing index.js and index.d.ts and in package.json i point to it like this : "types": "dist/index.d.ts", but my problem is that i have a types subfolder in each folder ex : src/stack/types/ITypeA.ts, src/stack/types/ITypeB.ts ... so the error is only for the ts files and not the tsx — KA-Yasso
– KA-Yasso, Commented Sep 11, 2023 at 16:43

KA-Yasso · Accepted Answer · 2023-09-12 13:16:46Z

I finally found the solution here:

How to create npm package with definition files?

Set "declaration" to true in tsconfig.json. This tells TypeScript to generate *.d.ts
Set "types" in package.json. This tells TypeScript where to find generated *.d.ts files.

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "declaration": true  <--
  }
}

package.json

{
  "name": "my-package",
  "version": "1.0.0",
  "main": "index.js",
  "types": "index.d.ts", <--
  "license": "ISC",
  "devDependencies": {
    "typescript": "^3.8.3"
  }
}

Note if you have a multiple ts interfaces exemple:

src
-- componentA/Types/
-- componentA/Types/ IntefacesA.TS

-- componentB/Types/
-- componentB/Types/ IntefacesB.TS

you can create another (types for exemple) folder in src:

src
-- src/types

and create an index.ts file inside; import your types and exports them :

index.ts:

import { IIntefacesA } from './componentA/Types/IntefacesA';
import { IIntefacesB } from './componentA/Types/IntefacesB';

export type { IIntefacesA, IIntefacesB };

and point to this folder from your src/index.d.ts and index.js:

index.d.ts / index.js

export * from './ReactComponent1';
export * from './ReactComponentX';
export * from './types';

Collectives™ on Stack Overflow

NPM Custom Package : Compile And Export TypeScript Interfaces

Question: Am I missing some TS configuration, or some TS build step?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Question: Am I missing some TS configuration, or some TS build step?

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related