Creating TypeScript type definitions for a CommonJS module

Question

Creating TypeScript type definitions for a CommonJS module

I've been grappling with getting xmllint to function correctly within Typescript.

Given that it's written in traditional JS, attempting to import the module directly into Typescript results in a compile error:

Cannot find module 'xmllint' or its corresponding type declarations.

To resolve this issue, I created an index.d.ts file in my root directory :

declare module 'xmllint'{
    export interface ValidationResult{
        errors: string[]
    };
    export interface Options{
        xml: string, xsd:string
    }
    export function validateXML(opts: Options): ValidationResult;
}

Although this now compiles without errors, I'm unable to successfully import the module into a Typescript class. It consistently either returns an empty object or undefined.

I have attempted:

```
import {validateXML} from "xmllint"
```
, resulting in an empty object for validateXML
```
import validateXML from "xmllint"
```
, causing validateXML to be undefined
```
import * as validate from "xmllint"
```
, leading to validateXML being an empty object

Shown below is my tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",
    "module": "esnext",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src"
  ]
}

It seems like the issue lies in my index.d.ts not properly referring to the native xmllint function, but I'm unsure of how to address this.

What am I overlooking?

typescript

Answer 1

Answer №1

The xmllint module is a default export in CommonJS, meaning it is exported as module.exports = xmllint, where xmllint is an object with the property validateXML as a function. To define its type in TypeScript, you can do something like this -

declare module "xmllint" {
  export interface ValidationResult {
    errors: string[];
  }

  type Options = { xml: Array<string>; xsd: Array<string> };

  type XMLLint = {
    validateXML(options: Options): ValidationResult;
  };

  const xmllint: XMLLint;

  export default xmllint;
}

After adding this definition, ensure that Typescript recognizes it by including an entry in your tsconfig.json. Then, you can use it by importing it as shown below -

import fs from "node:fs";
import xmllint from "xmllint";

const xml = fs.readFileSync("./src/test.xml").toString();
const schema = fs.readFileSync("./src/test.xsd").toString();

console.log(xmllint.validateXML({ xml: [xml, xml], xsd: [schema, schema] }));

The output for the test files using the package itself was:

{
  errors: [
    "file_0.xsd:1: parser error : Start tag expected, '<' not found",
    'undefined',
    '^',
    "Schemas parser error : Failed to parse the XML resource 'file_0.xsd'."
  ]
}

You can access the Codesandbox link here.

P.S - Take note that any type errors in Codesandbox are due to the environment, and you should not encounter them in IDEs like VS Code.

Answer 2

The xmllint module is a default export in CommonJS, meaning it is exported as module.exports = xmllint, where xmllint is an object with the property validateXML as a function. To define its type in TypeScript, you can do something like this -

declare module "xmllint" {
  export interface ValidationResult {
    errors: string[];
  }

  type Options = { xml: Array<string>; xsd: Array<string> };

  type XMLLint = {
    validateXML(options: Options): ValidationResult;
  };

  const xmllint: XMLLint;

  export default xmllint;
}

After adding this definition, ensure that Typescript recognizes it by including an entry in your tsconfig.json. Then, you can use it by importing it as shown below -

import fs from "node:fs";
import xmllint from "xmllint";

const xml = fs.readFileSync("./src/test.xml").toString();
const schema = fs.readFileSync("./src/test.xsd").toString();

console.log(xmllint.validateXML({ xml: [xml, xml], xsd: [schema, schema] }));

The output for the test files using the package itself was:

{
  errors: [
    "file_0.xsd:1: parser error : Start tag expected, '<' not found",
    'undefined',
    '^',
    "Schemas parser error : Failed to parse the XML resource 'file_0.xsd'."
  ]
}

You can access the Codesandbox link here.

P.S - Take note that any type errors in Codesandbox are due to the environment, and you should not encounter them in IDEs like VS Code.

Creating TypeScript type definitions for a CommonJS module

Answer №1

Similar questions

Looking to generate a temporary query in VSTS? The createquery() function is perfect for this task, but be cautious as using getquery()

Chart.js:9352 Error in generating chart. Dynamic chart creation unsuccessful

Navigating through alterations in intricate data utilizing the BehaviorSubject concept

Is it possible for a TypeScript interface to inherit from a Function?

What is the best way to pass on the isPending status (from useTransition) to parent components?

Incorporating a Script into Your NextJS Project using Typescript

Issue with Bot framework (v4) where prompting choice in carousel using HeroCards does not progress to the next step

What is the best way to adjust the Material Drawer width in Reactjs to match the width of its children?

What is the best way to programmatically define the value for the MaterialUI grid size property using TypeScript?

Exploring the world of TypeScript and JSON.stringify functions in JavaScript

Lazy loading in Angular - struggling to verify its functionality

Error encountered: Mongoosastic search doesn't work properly in TypeScript environment

How to access the types of parameters in a function type

Consistentize Column Titles in Uploaded Excel Spreadsheet

Tips for customizing the font color in Material UI Typography

The integration of react-color Saturation with @types/react-color is currently unavailable

typescript function intersection types

Using TypeScript to categorize items based on common characteristics and assigning them a unique group ID

Function returning promise asynchronously, but caller function failing to resolve the promise

Issue with the scoring algorithm using Angular and Spring Boot