How to Reference External Modules in Typescript

Aug 3, 2020 • 5 Minute Read

Introduction

The ES6 is a significant enhancement for the JavaScript language that makes software development more accessible and more robust by following coding standards.

Modules in TypeScript are just scripts written in separate files, or they can be used as third-party libraries in the existing app, import allows you to reference their source into an existing file. In this guide, you will learn different ways to import external modules and how to use imported scripts.

Ways of Referencing External Modules

Whether it’s an independent script file or a third-party library, there are several ways of importing external modules, and below are possible ways to do that.

Import by Class/Module Name

Any class/module could be imported by providing its location from the existing app.

      import { component_name } from 'modules_name/location';

Import by Default Class/Module Name

The module can also be imported by the default name, followed by the module location.

      import component_name from 'module_name';

Import Library for Side Effects Only

A library is a group of various components/modules; thus, you can import it with side effects only as below.

      import 'library_name';

Import Everything from the Module/Library

Sometimes, it could be possible that you need to access each component/module from the specific library, then you can use the below syntax for that.

      import * as lib from 'library_name';

If you want to access the components/modules of the library, then the object called lib can be useful to access it. Alternatively, you can use the below syntax as well.

      import lib = require('library_name');

Above are the common ways to inject and use external modules; you can choose any of them based on the architecture requirement.

Referencing External NPM Packages

The components in React with TypeScript could be easily exported and imported anywhere. But at the same time, various third-party NPM libraries are also imported.

Use the import statement for this and you are good to go! Try a straightforward example to install and use a third-party library.

Install given NPM packages into your app.

          npm install reactstrap
npm install bootstrap
    

After installing the library, import it into the component as given below.

      import { Breadcrumb, BreadcrumbItem } from "reactstrap";

You can use the breadcrumb component as in the example below.

          render() {
    return (
      <div>
        <p>Importing external NPM modules</p>
        <Breadcrumb>
          <BreadcrumbItem>
            <a href="#">Home</a>
          </BreadcrumbItem>
          <BreadcrumbItem>
            <a href="#">Profile</a>
          </BreadcrumbItem>
          <BreadcrumbItem active>XYZ User</BreadcrumbItem>
        </Breadcrumb>
      </div>
    );
}
    

There are two different components of the reactstrap that are imported. One is <Breadcrumb> and another one is <Breadcrumbitem>.

Please find the complete example to get the exact idea of how the external NPM library called reactstrap could be used.

          import React, { Component } from "react";
import { Breadcrumb, BreadcrumbItem } from "reactstrap";
import "bootstrap/dist/css/bootstrap.min.css";

interface AppProps {}
interface AppState {
  name: string;
}

class ImportModule extends Component<AppProps, AppState> {
  render() {
    return (
      <div>
        <p>Importing external NPM modules</p>
        <Breadcrumb>
          <BreadcrumbItem>
            <a href="#">Home</a>
          </BreadcrumbItem>
          <BreadcrumbItem>
            <a href="#">Profile</a>
          </BreadcrumbItem>
          <BreadcrumbItem active>XYZ User</BreadcrumbItem>
        </Breadcrumb>
      </div>
    );
  }
}

export default ImportModule;
    

Note

With the release of TypeScript 2.1, the packages listed in the package.json file and installed with the node_modules folder could be imported from any component.

Using an External Custom JavaScript Module

Sometimes, it could be possible that you have to implement the shared logic throughout the app, such as a validation helper, a string procession, and so on.

For that, you can create a separate JavaScript module and can reference it in TypeScript with JSX code.

Create one file named addition.js. The source code is given below.

          export default function addition(x, y) {
  console.log("Addition is :=  ", x + y);
}
    

Now, the next step is to import the external module into the existing TypeScript component.

      import addition from "./addition";

After importing the module, it could be consumed into the component as given below.

          componentDidMount() {
    console.log(addition(1,1))
}
    

The above example shows how external custom modules are created and used with the TypeScript component by using the import statement.

Conclusion

Modules are the independent unit of logic that consists of several functionalities, like a business logic procession, a static user interface, or full-fledged components.

External modules are handy to export and import in the component using the import statement. They could be consumed quickly. I hope this guide will drive you to your expected answer. Happy learning!