In the d.ts file, Typescript simply creates the line "export {};"

After executing the tsc command to compile my project into the dist directory, I noticed that typescript is generating an incorrect or empty d.ts file.

Here is a snippet of my tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "esModuleInterop": true,
    "target": "es2020",
    "moduleResolution": "Node",
    "noImplicitAny": true,
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "outDir": "dist",
    "strict": true,
    "declaration": true,
    "declarationMap": true
  },
  "lib": ["es2020"],
  "compileOnSave": true,
  "include": [
    "src"
  ]
}

This code snippet represents my src/index.ts:

class Test {
   method = (string: string) => {
      console.log(string)
   }
}

module.exports = Test

Upon running the $ tsc command, the resulting content in my dist/index.d.ts file is as follows:

export {};
//# sourceMappingURL=Test.d.ts.map

Although importing the package into another project as an npm dependency works without issues, when attempting to import Test and calling

const test = new Test; test.method('hello world')
, it's evident that there is an issue with the .d.ts file generated.

I'm currently utilizing typescript v4.0.5

Answer №1

I was able to resolve the issue by taking the following steps:

  1. Modified the tsconfig.json file to update
    "module": "commonjs"
    to
    "module": "es2020"
  2. Adjusted the .ts file by changing from module.exports = Test to export default Test

Once these modifications were made, the .d.ts files were generated correctly. The root cause of the issue was identified as a mismatch between commonjs and ES2020 syntax/settings.

Answer №2

I encountered a similar issue with an empty index.d.ts file, but I was able to resolve it by making the following adjustments: I realized that I had forgotten to include "src" in my tsconfig file:

"include": [ "src" ]
Additionally, for building purposes, I switched to using "react-native-builder-bob" in my package.json. Instead of
"types": "dist/typescript/index.d.ts",
, I used
"types": "dist/typescript/src/index.d.ts",
. This allowed me to use typing outside of the package without any issues. I hope this solution can benefit others facing a similar problem in the future.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The challenges of dealing with duplicate identifiers caused by nesting npm packages in TypeScript

I am facing an issue with my project structure where I have a node_modules folder at the root level and another one within a subfolder named functions. The directory layout looks like this, ├── functions │   ├── index.js │   ├── ...

When a function is passed as an argument in Typescript, it may return the window object instead of the constructor

I'm still getting the hang of typescript, and I've come across a situation where a function inside a Class constructor is calling another function, but when trying to access this within sayHelloAgain(), it returns the window object instead. With ...

incorporating my unique typographic styles into the MUI framework

I'm currently working on customizing the typography for my TypeScript Next.js project. Unfortunately, I am facing difficulties in configuring my code properly, which is causing it to not work as expected. Can someone kindly provide assistance or guida ...

Typescript's confidential variables

Currently, I am delving into the world of Angular2 and familiarizing myself with working with classes in javascript for the first time. I'm curious about the significance of using the private parameter in the constructor, as opposed to simply writing ...

Leverage the VTTCue Object in an Angular2 project using Typescript

I am looking to dynamically load subtitles onto a video. let subs:TextTrack = video.addTextTrack('subtitles'); for (let dataSrt of dataSrts) { let cue: any = new VTTCue( dataSrt['startTime'], da ...

Record the variable as star symbols in the VSTS Extension

I am working on a VSTS extension using Typescript and utilizing the vsts-task-lib Currently, I am encountering an issue with the execSync function, which displays the command being executed. However, I need to hide a token obtained from a service by displ ...

Leveraging Inversify for implementing a Multiinject functionality for a class with both constant and injected parameters

In my Typescript code, I have an insuranceController class that takes a multi inject parameter: @injectable() export class InsuranceController implements IInsuranceController { private policies: IInsurancePolicy[]; constructor(@multiInject("IInsu ...

Is it possible to integrate TypeScript 5.0 decorators into React components?

Every time I add decorators to my class, they always get called with the arguments specified for legacy decorators: a target, property key, and property descriptor. I am interested in using TypeScript 5.0 decorators. Is this feasible, and if so, how can I ...

Unable to access member function of Typescript class

I recently started using typescript and encountered an issue while working on a problem. I initially created the following class: export class ModuleInfoContainer extends Array<ModuleInfo> { constructor() { super(); } search(id: number) { ...

Bringing Typescript functions into the current module's scope

Is it possible to import and reference a module (a collection of functions) in typescript without the need for the Module. prefix? For instance: import * as Operations from './Operations'; Can I access Operations.example() simply as example()? ...

Steps to create a TypeScript function that mimics a JavaScript function

As I look at this javascript code: // find the user User.findOne({ name: req.body.name }, function(err, user) { if (err) throw err; if (!user) { res.json({ success: false, message: 'Authentication failed. User not found.' ...

Upon the initial loading of GoJS and Angular Links, nodes are not bypassed

Hey there, I'm currently working on a workflow editor and renderer using Angular and GoJS. Everything seems to be in order, except for this one pesky bug that's bothering me. When the page first loads, the links don't avoid nodes properly. H ...

Redirect user to the "Confirm Logout" page in Keycloak after refreshing the page before logging out

While working on a project with keycloak, I've encountered an issue that I can't seem to figure out. After logging in and navigating to my project's page, everything operates smoothly. However, if I happen to refresh the page before logging ...

React component state remains static despite user input

I am currently in the process of developing a basic login/signup form using React, Typescript (which is new to me), and AntDesign. Below is the code for my component: import React, { Component } from 'react' import { Typography, Form, Input, But ...

Asynchronous function in TypeScript is restricting the return type to only one promise type

Using node version 14.7.0, npm version 6.14.7, and typescript version 3.7.3. I have a function that interacts with a postgres database and retrieves either the first row it finds or all results based on a parameter. It looks something like this: async fet ...

Ways to implement logging in an NPM package without the need for a specific logging library

Currently, I am in the process of developing a company npm package using TypeScript and transferring existing code to it. Within the existing code, there are instances of console.log, console.warn, and console.error statements, as shown below: try { c ...

Can the detectChanges() method in Angular cause any issues when used with the form control's valueChanges event?

Within my parent Component, I am working with a formGroup and updating its value using patchValue method. ngAfterViewInit() { this.sampleform.controls['a'].patchValue ...} I then pass this form to a child component in the parent component's ...

Utilizing an external TypeScript class without the need for importing it

Let's consider a scenario where we have a class named Constant. The requirement is to make this class accessible globally without the need for importing, is there a way to achieve this? In the constant.ts file: class Constant { public stati ...

What are the TypeScript types needed for a React component that accepts an array of objects as a prop?

I am currently working on a React component that includes a prop named propWhichIsArray. This prop is expected to be an array of objects. Each object in the array will contain properties such as id (an ID) and text (a string). How do I properly define this ...

Encountering difficulties during the migration process from a JavaScript to a TypeScript React Component

I've encountered some challenges with configuring TypeScript in my project. Initially, I developed my application using plain JavaScript. However, eager to learn TypeScript, I decided to convert my JavaScript project into a TypeScript one. To achiev ...