How to Declare and Use Custom Types in TypeScript Declarations for Importing Other Types

How to import other types into my TypeScript custom declarations file?

When working with TypeScript and creating custom declaration files, you might come across the need to import types from external libraries. In this blog post, we will explore how to import these types into your custom declarations file to ensure proper type checking and recognition in your code editor. Specifically, we will focus on importing types for the Enzyme library in a React project.

Problem: Incorrect recognition of custom function in code editor

Let’s start by describing the problem at hand. You have a fully functional TypeScript + React + Webpack + Jest + Enzyme project that includes a custom global function called mountWithContext. This function is accessible in your test specs and works fine when running the tests. However, your code editor does not recognize this function, resulting in incorrect suggestions and error highlighting.

To resolve this issue, you created a custom declarations file named declarations.d.ts in your project’s /typings directory. In this file, you declared the mountWithContext function with the following signature:

declare function mountWithContext(node: any): any;

While this declaration makes the function recognizable in your spec files, the types are still incorrect. You require the function to accept a React.ReactElement and return an Enzyme ReactWrapper. However, directly adding the correct type annotation to the declaration doesn’t work.

Solution: Augmenting the global type

To properly declare the mountWithContext function with the correct types, we need to augment the global type in TypeScript. Here’s how you can achieve that:

import React from 'react';
import enzyme from 'enzyme';

declare global {
  namespace NodeJS {
    interface Global {
      mountWithContext<P, S>(node: React.ReactElement<any>): enzyme.ReactWrapper<P, S>;
    }
  }
}

Let’s break down the above code to understand each construct:

• The declare global block allows us to modify the global scope within a non-global context like a module.
• We import the required modules, React and enzyme, to properly type the mountWithContext function.
• Inside the declare global block, we use the namespace NodeJS to access the global type. This type is already provided by the Node environment.
• We then augment the Global interface to include our custom mountWithContext function with the correct type annotations.

Once you have implemented this solution, your code editor should recognize the mountWithContext function with the proper types. This allows for accurate suggestions and error checking while working with your tests.

Final thoughts

In this blog post, we explored how to import types from external libraries into a custom declarations file in TypeScript. Specifically, we focused on importing types for the Enzyme library in a React project. By augmenting the global type, we can ensure that our custom functions are recognized with the correct type annotations in our code editor.

Remember to place the declarations file in the appropriate location and include it in your TypeScript compilation context. By following this approach, you can leverage the power of TypeScript’s type checking and improve your development workflow.

reference : 

reactjs