How to export multiple Variables in TypeScript

Export multiple Variables in TypeScript #

Use named exports to export multiple variables in TypeScript, e.g. export const A = 'a' and export const B = 'b'. The exported variables can be imported by using a named import as import {A, B} from './another-file'. You can have as many named exports as necessary in a single file.

Here is an example of exporting multiple variables from a file called another-file.ts.

Copied!
// 👇️ named export
export const greeting = 'hello';

// 👇️ named export
export const name = 'James';

Note that using export on the same line as the variable's definition is the same as exporting the variables as an object after they have been declared.

Copied!
const greeting = 'hello';

const name = 'James'

// 👇️ named exports (same as code snippet above)
export {greeting, name};

Here is how we would import the variables in a file called index.ts.

Copied!
// 👇️ named import
import { greeting, name } from './another-file';

console.log(greeting); // 👉️ "hello"
console.log(name); // 👉️ "James"

Make sure to correct the path that points to the another-file module if you have to. The example above assumes that another-file.ts and index.ts are located in the same directory.

For example, if you were importing from one directory up, you would do import {greeting, name} from '../another-file'.

TypeScript uses the concept of modules, in the same way that JavaScript does.

The example above uses named exports and named imports.

The main difference between named and default exports and imports is - you can have multiple named exports per file, but you can only have a single default export.

If you try to use multiple default exports in a single file, you would get an error.

Copied!
const greeting = 'hello';

const name = 'James';

// ⛔️ Error: A module cannot
// have multiple default exports.ts(2528)
export default greeting;

export default name;

IMPORTANT: If you are exporting a variable (or an arrow function) as a default export, you have to declare it on 1 line and export it on the next. You can't declare and default export a variable on the same line.

Having said that, you can use 1 default export and as many named exports as you need in a single file.

Let's look at an example that exports multiple variables and uses both - default and named exports.

Copied!
const greeting = 'hello';

// 👇️ named export
export const name = 'James';

// 👇️ default export
export default greeting;

And here is how you would import the two variables.

Copied!
// 👇️ default and named imports
import greeting, { name } from './another-file';

console.log(greeting); // 👉️ "hello"
console.log(name); // 👉️ "James"

Notice that we didn't wrap the default import in curly braces.

We used a default import to import the greeting variable and a named import to import the name variable.

You can only have a single default export per file, but you can have as many named exports as necessary.

You also don't have to think about which members are exported with a default or named export.