Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use an node module without typings from Typescript

I'm trying to import an external module from node_modules by just doing:

import { offline } from 'redux-offline';

From a file /src/store/store.ts. However, I get the following error:

Cannot find module redux-offline

I've read that we can declare a module, something like redux-offline.d.ts where we define sort of a dummy declaration that we can then use from our source code. Yet, I don't get it at all:

  • In which folder should that file be defined?
  • How does Typescript know that that module is declaring the interface of an external module?

I'd appreciate your help to understand how it works.

like image 918
Pedro Piñera Buendia Avatar asked Apr 20 '17 20:04

Pedro Piñera Buendia


People also ask

Does TypeScript use CommonJS?

TypeScript supports the following 4 Modules: commonjs, amd, system and umd.

How do I use external plain JavaScript libraries in TypeScript projects?

First include the library source file before the compiled TypeScript file of your project, using script tag in your HTML file. declare var libGlobal: any; You need to replace libGlobal with your library global object which gives access to the library API. Then just use any library function just like normal.

How do I fix ts7016 error?

You can fix the error by writing typings yourself, or preferably by installing the types (if they do exist) using npm install --save-dev @types/react-native-material-color .

How do I use ES module in TypeScript?

To use TypeScript with ES Modules, the TypeScript compiler configuration in tsconfig. json can be updated to process code in ES Module format. Additionally, Babel can be used for TypeScript compilation, and the TypeScript compiler will be used for type checking, as Babel can not type check TypeScript code.


1 Answers

In which folder should that file be defined?

The files could really be declared in any folder however, it's good to put them together, in a directory that describes what they are. In our projects, we have a folder called "ambient-types" and within that we have an "external-modules" folder.

I've read that we can declare a module, something like redux-offline.d.ts

You're right, This would sit within the external-modules folder.

How does Typescript know that that module is declaring the interface of an external module?

In you're redux-offline.d.ts file we declare what's called an ambient declaration, it would look as follows:

declare module 'redux-offline';

redux-offline will now be available for import from your own files.

import { redux-offline } from 'redux-offline';

This basically tells Typescript that at runtime you expect that there will be a file/library called redux-offline available. Note that the import will have an "any" type.

Ambient declarations is a promise that you are making with the compiler. If these do not exist at runtime and you try to use them, things will break without warning.

For more reference see - https://basarat.gitbooks.io/typescript/docs/types/ambient/d.ts.html https://www.typescriptlang.org/docs/handbook/modules.html

like image 182
Nick Avatar answered Nov 15 '22 22:11

Nick