What is the process of using TypeScript to import a constant exported in JavaScript?

Question

What is the process of using TypeScript to import a constant exported in JavaScript?

In the environment I'm using typescript 2.6.1. Within react-table's index.js file, there is a declaration that looks like this:

import defaultProps from './defaultProps'
import propTypes from './propTypes'

export const ReactTableDefaults = defaultProps
export default class ReactTable extends Methods(Lifecycle(Component)) ...

In my typescript file, I am interested in accessing the ReactTableDefaults member. However, I'm having trouble figuring out the correct way to access it. I have already imported the react-table types from their @types/react-table/index.d.ts file. When I attempt to access ReactTableDefaults, my IDE cannot locate it. Can anyone provide me with the correct import statement?

import ReactTable, {Column as RTColumn} from 'react-table'; // pulling from index.d.ts
import RT = require('react-table'); // only showing 'default'

I have also attempted:

import ReactTableDefaults from 'react-table';

Unfortunately, the transpiler for typescript indicates that ReactTableDefaults cannot be found.

EDIT: It appears that ReactTableDefaults is not defined in the index.d.ts file. I am attempting to access it from the module file.

javascript typescript import

Answer 1

Answer №1

If you are looking to access the external definitions provided under ReactTableDefaults, you can follow these steps:

import * as ReactTableDefaults from 'react-table';

Once imported, you can access it like ReactTableDefaults.myAttribute.

However, it is important to take note:

There is a possibility of encountering an unintended outcome: If the imported sources already contain an attribute similar to the one you are importing as, you will need to access it as

ImportedAsThisName.ImportedAsThisName

, for example:

import * as MyLib from 'my-lib'
//assuming that the "MyLib" library had an attribute like "methodA", you would access it as MyLib.methodA

Consider the scenario:

import * as methodA from "my-lib"

To access the methodA attribute in this case, you would have to do something like:

methodA.methodA()

I hope this explanation is clear.

Answer 2

If you are looking to access the external definitions provided under ReactTableDefaults, you can follow these steps:

import * as ReactTableDefaults from 'react-table';

Once imported, you can access it like ReactTableDefaults.myAttribute.

However, it is important to take note:

There is a possibility of encountering an unintended outcome: If the imported sources already contain an attribute similar to the one you are importing as, you will need to access it as

ImportedAsThisName.ImportedAsThisName

, for example:

import * as MyLib from 'my-lib'
//assuming that the "MyLib" library had an attribute like "methodA", you would access it as MyLib.methodA

Consider the scenario:

import * as methodA from "my-lib"

To access the methodA attribute in this case, you would have to do something like:

methodA.methodA()

I hope this explanation is clear.

Answer 3

Answer №2

ReactTableDefaults is actually a named export. The mistake you made in your question is trying to import it as if it were the default import.

If you're looking at index.js and seeing it as 'react-table', you can import it like this:

import ReactTable, {Column as RTColumn, ReactTableDefaults} from 'react-table';
// -----------------------------------^^^^^^^^^^^^^^^^^^^^

Alternatively, you can import it on its own like this:

import {ReactTableDefaults} from 'react-table';

Answer 4

ReactTableDefaults is actually a named export. The mistake you made in your question is trying to import it as if it were the default import.

If you're looking at index.js and seeing it as 'react-table', you can import it like this:

import ReactTable, {Column as RTColumn, ReactTableDefaults} from 'react-table';
// -----------------------------------^^^^^^^^^^^^^^^^^^^^

Alternatively, you can import it on its own like this:

import {ReactTableDefaults} from 'react-table';

Answer 5

Answer №3

Rediscovering a solution provided by a colleague, I was surprised by how unconventional it seemed to me when I revisited it.

import * as RT from 'react-table';

const defaultProps = (RT as any).ReactTableDefaults;

Answer 6

Rediscovering a solution provided by a colleague, I was surprised by how unconventional it seemed to me when I revisited it.

import * as RT from 'react-table';

const defaultProps = (RT as any).ReactTableDefaults;

What is the process of using TypeScript to import a constant exported in JavaScript?

Answer №1

Answer №2

Answer №3

Similar questions

Is there a way in Rollup.js to substitute a dependency package's imported module with a local file?

Change the location of an html td element with JavaScript

Developing mongoose models using TypeScript for subdocuments

Switch Object to WebElement or SearchContext in JavaScript

"Validation with Express-validator now includes checking the field in cookies instead of the request

Disabling the "Master Detail" feature in MUI

Reducing Image Size in JavaScript Made Easy

Ways to confirm the presence of specific keys in a JSON:

Automatically generate the first user on the Parse Server system

Retrieving multiple checkbox values using JavaScript

Substitute data types for certain keys within a Typescript interface

NodeJS can be used to convert JSON data into an XLSX file format and allow for

Preventing memory leaks in unmounted components: A guide

Utilize Angular's $location to add or update the current URL parameter

Guide to successfully verifying the correct value in ReactJS unit tests

Having issues with ASP.NET MVC AJAX PartialView not loading Telerik UI components

Is there a way to retrieve the current object as a JSON string from inside the object using either jquery or javascript?

After refreshing the page, the local storage does not appear

The query fails to retrieve results for the specified date and the beginning of the month

Creating a Rails application that dynamically fills a table with data from a