How to import JS library to typescript in React Native project

Question

How can I import js library (in my case xhook library) into my react native project written in typescript? Or How can I create typescript header file for external js library?

Answer 1

You can simply use:

const signalrLib = require("react-native-signalr").default

Answer 2

TypeScript compiles to plain Javascript just like Babel or any other extended Javascript language.

So when you add example xhook to your project, project owner has already compiled his/her TypeScript code into plain JS and you import it just like any other library.

eg. import xhook from 'xhook' or so on how library author has specified.

You can see it yourself if you visit xhook's git page https://github.com/jpillora/xhook you can see compiled code in folder dist and in package.json -file, attribute main points to that file.

TypeScript is not itself language that is runned in browser, but that it is always compiled to plain JavaScript. Hopefully this helps out making a grasp how this works.

edit. seems like xhookis actually written in CoffeeScript but this same rule applies to it as well.

Answer 3

As suggested, You can use any ES6/ES2015 notation in typescript. With the new typescript, import will be

import xhook from 'xhook';

Older version:

import * as xhook from 'xhook'

Some module doesnt have type support. You can look for type support as

yarn add @types/xhook

If you dont find type support you can use, node require syntax

const xhook = require('xhook');

For that you may have to declare, require definition like:

declare const require: any;