React Native TypeScript项目导入JS库（含xhook）及生成类型声明文件方法

Hey there! Let's walk through how to handle importing JavaScript libraries in a React Native TypeScript project—including specific cases like xhook—and how to create TypeScript type declarations for untyped external libraries.

1. Importing Regular JS Libraries with Existing Type Declarations #

Most popular JS libraries already have community-maintained TypeScript type definitions available via the @types/ npm scope. Here's how to use them:

• First, install the corresponding type package as a dev dependency:

  # Example: installing types for lodash
  npm install @types/lodash --save-dev
  # Or with yarn
  yarn add @types/lodash --dev
  

• Then import and use the library just like you would in a vanilla JS project—TypeScript will provide full type checking and autocompletion:

  import _ from 'lodash';
  const cleanedText = _.trim('  Hello React Native!  ');
  

2. Importing xhook (or Similar Untyped JS Libraries) #

xhook doesn't come with official TypeScript types, so you have a few options to get it working:

Option 1: Quick Fix with // @ts-ignore #

If you need a temporary solution and don't mind skipping type checks for this import, add the // @ts-ignore comment:

// @ts-ignore
import xhook from 'xhook';

// Use xhook normally
xhook.before((request) => {
  console.log('Intercepted request:', request.url);
});

Note: This is not ideal for long-term use, as you lose TypeScript's type safety benefits.

Option 2: Minimal Type Declaration with any #

To avoid // @ts-ignore while still getting basic import support, create a simple type declaration file. For example, make a typings/xhook.d.ts file with:

declare module 'xhook' {
  const xhook: any;
  export default xhook;
}

Now you can import xhook without errors, and while the type is any, you won't get TypeScript complaints about missing modules.

3. Creating Proper Type Declarations for External JS Libraries #

For full TypeScript support, you can write a detailed type declaration file that describes the library's API. Here's how to do it for xhook:

1. Create a .d.ts file (e.g., src/types/xhook.d.ts or typings/xhook.d.ts).
2. Define the types that match xhook's actual API (refer to the library's documentation for details):

   declare module 'xhook' {
     // Define the structure of a request object
     interface XHookRequest {
       method: string;
       url: string;
       headers: Record<string, string>;
       body?: string;
       timeout?: number;
     }
   
     // Define the structure of a response object
     interface XHookResponse {
       status: number;
       statusText: string;
       headers: Record<string, string>;
       body?: string;
     }
   
     // Define callback types for before/after hooks
     type XHookBeforeCallback = (
       request: XHookRequest,
       callback: (modifiedRequest?: XHookRequest) => void
     ) => void;
   
     type XHookAfterCallback = (
       request: XHookRequest,
       response: XHookResponse,
       callback: (modifiedResponse?: XHookResponse) => void
     ) => void;
   
     // Define the xhook instance type
     const xhook: {
       before(callback: XHookBeforeCallback): void;
       after(callback: XHookAfterCallback): void;
       enable(): void;
       disable(): void;
       clear(): void;
     };
   
     export default xhook;
   }
   

3. Update your tsconfig.json to include the folder where your type declarations live, so TypeScript can pick them up:

   {
     "include": [
       "src/**/*",
       "typings/**/*" // Add this line if you used the typings folder
     ]
   }
   

Now when you import xhook, you'll get full autocompletion and type checking for all its methods and properties.

内容的提问来源于stack exchange，提问作者JaSHin