TypeScript - how to deal with the types of third-party libraries

Original address

We use third-party libraries more or less when developing TypeScript projects. Generally, commonly used third-party libraries have corresponding type files, or type packages can be added. But if this third-party library does not have a corresponding type file to use, it will be a little troublesome. Let’s discuss how these are handled today.

The first type: the third-party library is developed by TypeScript

This is the best case, with its own type. Libraries developed using TypeScript are compiled into JS before being sent to npm, so that they can be run directly in the browser and node environment. At the same time, the types used internally are also packaged and released to npm. These types are in the index.d.ts file, and finally in the project directory under the node_modules

For example, react-content-loader is developed with TypeScript, and finally its type files are in the node_modules/react-content-loader directory.

Another advantage of this development method is that these types will be synchronized with changes in the code. Because the types are compiled from the actual code.

Unfortunately, not all projects are developed by TypeScript. Many of the benefits of encountering such a library are gone, such as smart prompts. . . So what should I do.

The second type: third-party libraries have @types type files

Many third-party libraries are not developed with TypeScript. In this case, you can use the way of DefinitelyTyped There is a github library: DefnitelyTyped . This is used to store type files. So the type files of the third-party JS library can be placed here. For React, you can use @types/react . styled-component can use @types/styled-component .

These types are maintained by the community, which means that the people who use these libraries are maintaining the types of these libraries. Although it is not completely uncontrollable, some people will review these types of files. However, it is inevitable that these types cannot evolve together with the library, and the type and library do not match. After all, the library itself does not support types.

The third type: the third-party library does not have type files, nor is it developed by TypeScript

TypeScript is very simple to create your own type. TypeScript default from node_modules directory @types subdirectories, there index.d.ts get the type of file. In other words, you can create a index.d.ts file anywhere in your project and add the type. You can also maintain the types types

In the index.d.ts file, you can define all types in your project. Remember to define the type under a specific module or namespace. for example:

declare module 'babel-plugin-relay/macro' {
  export { graphql as default } from 'react-relay';
}

Because this library is used like this:

import graphql from 'babel-plugin-relay/macro';

monkeypatch

Sometimes the type in DefinitelyType , which is @types/some-lib is wrong. To fix this error, you can only use monkeypatch. In fact, this is not a good idea, it is best to mention a pr for DefinitlyType. But this does not take effect so quickly. So I can only go monkeypatch.

The same is true at the beginning, create a new index.d.ts file to store the type of a certain library. Declare the module or namespace you want to process in this file. Then new types in this module. Then, if you want to overwrite the wrong type, you have to import the previous type first. For example, there is now @testing-library/react-hooks .

// inside types/testing-library__react-hooks/index.d.ts
import "@testing-library/react-hooks"

declare module "@testing-library/react-hooks" {
  interface RenderHookResult {
    // This function is not included in the typings as of 3.2.1
    wait(
      callback: (...args: any[]) => any,
      options?: { timeout?: number; suppressErrors?: boolean },
    ): Promise<void>
  }
}

Now @testing-library/react-hooks not only contains the original type, but also contains the type definition of the new method.

finally

Third-party types are very important, and this article also explains how the types in our project are handled. A stable type that keeps pace with the times is an important indicator for choosing a third-party library, because an accurate type can greatly help development. If a library does not have a type definition, TypeScript also provides a mechanism to deal with it.