--- title: Bitovi Academy - Modules description: Learn how to export and import values from a file. --- - ![AI implementation](https://www.bitovi.com/hubfs/AIConsultingIcon.svg) [AI implementation](https://www.bitovi.com/services/ai-consulting?hsLang=en-us) - ![Systems engineering](https://www.bitovi.com/hubfs/icon%20-%20backend.svg) [Systems engineering](https://www.bitovi.com/services/systems-engineering-consulting?hsLang=en-us) - ![Project management](https://www.bitovi.com/hubfs/icon%20-%20PM.svg) [Project management](https://www.bitovi.com/services/agile-project-management-consulting?hsLang=en-us) - ![Product design](https://www.bitovi.com/hubfs/icon%20-%20design.svg) [Product design](https://www.bitovi.com/services/product-design-consulting?hsLang=en-us) - ![Frontend development](https://www.bitovi.com/hubfs/icon%20-%20frontend.svg) [Frontend development](https://www.bitovi.com/services/frontend-development-consulting?hsLang=en-us) - [View more → ](https://www.bitovi.com/digital-consulting-services?hsLang=en-us) We're Experts in... - [JavaScript](https://www.bitovi.com/services/frontend/javascript-consulting?hsLang=en-us) - [AI training](https://www.bitovi.com/ai-training-for-software-engineers?hsLang=en-us) - [Angular](https://www.bitovi.com/services/frontend/angular-consulting?hsLang=en-us) - [Design Systems](https://www.bitovi.com/services/axure-figma-migration?hsLang=en-us) - [React](https://www.bitovi.com/services/frontend/react-consulting?hsLang=en-us) - [Temporal](https://www.bitovi.com/services/backend/temporal-consulting?hsLang=en-us) - [React Native](https://www.bitovi.com/services/frontend/react-consulting/react-native?hsLang=en-us) - [Node.js](https://www.bitovi.com/services/backend/nodejs-consulting-1?hsLang=en-us) Showcase ![Yum! Brands](https://www.bitovi.com/hubfs/yum-showcase-link-1.png) [View case study](https://www.bitovi.com/en/bitovi-yum-case-study?hsLang=en-us) More Projects - [![Levi's](https://www.bitovi.com/hubfs/levis.svg)](https://www.bitovi.com/web-application-consulting-work/levis-ecommerce-responsive-redesign?hsLang=en-us) - [![Christie's International Real Estate](https://www.bitovi.com/hubfs/christies.svg)](https://design.bitovi.com/christies) - [![BAFS](https://www.bitovi.com/hubfs/bafs.svg)](https://www.bitovi.com/ux-design-consulting/ux-case-studies/bafs-ppp?hsLang=en-us) - [View more → ](https://www.bitovi.com/our-software-consulting-work?hsLang=en-us) Open Source Tools We build powerful tools and open source them to support the community. [See what we've built →](https://www.bitovi.com/open-source?hsLang=en-us) - [![Blog](https://www.bitovi.com/hubfs/icon%20-%20blog.svg) BlogWe post about perfecting software delivery ](https://bitovi.com/blog) - [![Partnerships](https://www.bitovi.com/hubfs/Handshake-1.svg) PartnershipsLearn about Bitovi's technology partners ](https://www.bitovi.com/partnerships?hsLang=en-us) - [![Academy](https://www.bitovi.com/hubfs/limbo/icons/icon-academy.svg) AcademyFree courses to build delivery skills ](https://www.bitovi.com/academy/?hsLang=en-us) - [![Open source tools](https://www.bitovi.com/hubfs/icon%20-%20open%20source.svg) Open source toolsUse our tools or contribute to our open source mission. ](https://www.bitovi.com/open-source?hsLang=en-us) Let's Connect - [![Discord](https://www.bitovi.com/hubfs/DiscordLogo.svg) Discord ](https://discord.gg/J7ejFsZnJ4) - [![LinkedIn](https://www.bitovi.com/hubfs/LinkedinLogo.svg) LinkedIn ](https://www.linkedin.com/company/bitovi/) - [![GitHub](https://www.bitovi.com/hubfs/GithubLogo.svg) GitHub ](https://github.com/bitovi/) ![Eggbot](https://www.bitovi.com/hubfs/build_assets/bitovi-limbo-cms-react/338/js_client_assets/assets/eggbot-LTGhdSGL.png) Name * Work Email * Phone What's your project? Send ### Contact Us (312) 620-0386contact@bitovi.com - [ Advanced JavaScript ](https://www.bitovi.com/academy/learn-advanced-javascript.html?hsLang=en-us) - [ DOM and jQuery ](https://www.bitovi.com/academy/learn-dom-jquery.html?hsLang=en-us) - [ Debug JavaScript ](https://www.bitovi.com/academy/learn-to-debug-javascript.html?hsLang=en-us) - [ Learn TypeScript ](https://www.bitovi.com/academy/learn-typescript.html?hsLang=en-us) - [ Why TypeScript ](https://www.bitovi.com/academy/learn-typescript/why-typescript.html?hsLang=en-us) - [ IDE Support ](https://www.bitovi.com/academy/learn-typescript/ide-support.html?hsLang=en-us) - [ Setting Up Your Environment ](https://www.bitovi.com/academy/learn-typescript/setting-up-your-environment.html?hsLang=en-us) - [ Modules ](https://www.bitovi.com/academy/learn-typescript/modules.html?hsLang=en-us) - [ Types ](https://www.bitovi.com/academy/learn-typescript/types.html?hsLang=en-us) - [ Functions ](https://www.bitovi.com/academy/learn-typescript/functions.html?hsLang=en-us) - [ Classes ](https://www.bitovi.com/academy/learn-typescript/classes.html?hsLang=en-us) - [ Interfaces ](https://www.bitovi.com/academy/learn-typescript/interfaces.html?hsLang=en-us) - [ Keyof and Typeof ](https://www.bitovi.com/academy/learn-typescript/keyof-typeof.html?hsLang=en-us) - [ Generics ](https://www.bitovi.com/academy/learn-typescript/generics.html?hsLang=en-us) - [ Utility Types ](https://www.bitovi.com/academy/learn-typescript/utility-types.html?hsLang=en-us) - [ Learn React Native ](https://www.bitovi.com/academy/learn-react-native.html?hsLang=en-us) - [ Learn Web Components ](https://www.bitovi.com/academy/learn-web-components.html?hsLang=en-us) - [ Agile Program Management With Jira ](https://www.bitovi.com/academy/learn-agile-program-management-with-jira.html?hsLang=en-us) - [ Learn RxJS ](https://www.bitovi.com/academy/learn-rxjs.html?hsLang=en-us) - [ Giving a Training ](https://www.bitovi.com/academy/training.html?hsLang=en-us) - [ Learn Technology Consulting ](https://www.bitovi.com/academy/learn-technology-consulting.html?hsLang=en-us) - [ Learn React ](https://www.bitovi.com/academy/learn-react.html?hsLang=en-us) - [ Learn NgRx ](https://www.bitovi.com/academy/learn-ngrx.html?hsLang=en-us) - [ Learn Graphql ](https://www.bitovi.com/academy/learn-graphql.html?hsLang=en-us) - [ Learn Docker ](https://www.bitovi.com/academy/learn-docker.html?hsLang=en-us) - [ Learn CanJS ](https://www.bitovi.com/academy/learn-canjs.html?hsLang=en-us) - [ Learn Angular ](https://www.bitovi.com/academy/learn-angular.html?hsLang=en-us) - [ Advanced TypeScript ](https://www.bitovi.com/academy/advanced-typescript.html?hsLang=en-us) [View More Courses](https://www.bitovi.com/academy/#courses) [ ] # Modules `page` Learn how to export and import values from a file. ## Overview In this section, you will: - Export values from a file. - Import values from another file. - Learn why named exports are preferred over default exports. - Import and export functions between modules. ## Objective 1: Export and import values A fundamental part of writing code is creating values that you can use across multiple files. Modules are a way of grouping code to be executed within their own scope, opposed to a global scope. Modules give us a way to write DRY code, scope our variables, re-use parts of our code, test our code in discrete units, and avoid writing applications full of dreadful spaghetti code. Let’s break down how to [export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export) and [import](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) values in TypeScript. In TypeScript, you can export any type of value: variables, functions, classes, interfaces, etc. There are two types of exports: default exports and named exports. ### Default exports Imagine we have a `config.ts` file: ``` const config = { name: "Bitovi Academy", url: "https://www.bitovi.com/academy/", }; export default config; ``` In the example above, we create a `config` variable and then use `export default` to export it. Then, we could consume the value in another file: ``` import appConfig from "./config.ts"; const appName = appConfig.name; ``` In the code above, the `appConfig` variable is the same as the `config` variable exported from `config.ts`. Note that the `appConfig` variable name does not need to match the name in the file that has the `export`. ### Named exports Named exports are called that because there is an explicit name in the file with the `export`. Let’s imagine we have a `helpers.ts` file: ``` export function constrain(value: number, min: number, max: number): number { return Math.min(Math.max(value, min), max); } ``` In the example above, we export a `constrain` function from our `helpers.ts` file. We can import the `constrain` function like so: ``` import { constrain } from "./helpers.ts"; const constrained = constrain(-18, 0, 100); ``` In the code above, we can import the `constrain` function by name from `helpers.ts` and use it in our code. ### Default exports vs. named exports While you can prefer one style of export over the other, each serves a different purpose. - Use default exports for the primary output of a module. - Use named exports for secondary outputs or when there is no primary output. **For example:** - If you have a module called `AuthProvider` that exports a React component and several helper hooks, the component would be the primary (default) export and the hook would be secondary (named). - If you have a module called `transforms` that exports the functions `formatPercent` and `formatCurrency`, both of these would be named exports; there is no primary export. ### Importing types From time to time, you may need to only import the `type` from another file and not the full implementation. TypeScript provides a special syntax, `import type`, which is used specifically to import type declarations. This can help to make the import intention clearer and can also have some performance benefits during compilation. Let’s imagine we have a `user.ts` file: ``` export type User = { age: number; name: string; }; export const createUser = (name: string, age: number): User => { return { name, age }; }; ``` In the code above, we defined a `User` type and a `createUser` function. The `User` type describes the shape of user objects. We can import just the `User` type (and use it) like so: ``` import type { User } from "./user"; import { createUser } from "./user"; const logUser = (user: User): void => { console.info(`User: ${user.name}, Age: ${user.age}`); }; const user = createUser("Alice", 30); logUser(user); ``` In the code above, the `User` type import will not be included in the JavaScript output after compilation (because it’s only used for static type checking by TypeScript). Use `import type` whenever you are importing types like interfaces, types, or type aliases from another module and you do not need to import any runtime variables, classes, or functions. This not only makes your imports cleaner and more specific, but it also optimizes your project’s output size and compilation time. ### Setup ✏️ Create **src/modules/exporter.ts** and update it to be: ``` function greeter(person: string) { return "Hello, " + person; } // Exercise: export greeter ``` ✏️ Create **src/modules/importer.ts** and update it to be: ``` // Exercise: import greeter export default function () { return greeter("Earth"); } ``` ### Verify ✏️ Create **src/modules/importer.test.ts** and update it to be: ``` import assert from 'node:assert/strict'; import { describe, it } from 'node:test'; import getMessageWithGreeting from "./importer"; describe('Importer', () => { it('should return a greeting', () => { const message = getMessageWithGreeting(); assert.strictEqual(message, "Hello, Earth", "message should be correct"); }); }); ``` ### Exercise Use your knowledge of named exports and imports to do the following: - Export `greeter` from `exporter.ts` - Import `greeter` in `importer.ts` **Having issues with your local setup?** You can use either [StackBlitz](https://stackblitz.com/fork/github/bitovi/academy/tree/main/exercises/typescript/05-modules/01-problem?file=src/modules/exporter.ts) or [CodeSandbox](https://codesandbox.io/p/devbox/github/bitovi/academy/tree/main/exercises/typescript/05-modules/01-problem?file=src/modules/exporter.ts) to do this exercise in an online code editor. ### Solution If you’ve implemented the solution correctly, the tests will pass when you run `npm run test`! Click to see the solution ✏️ Update **src/modules/exporter.ts** to be: ``` export function greeter(person: string) { return "Hello, " + person; } ``` ✏️ Update **src/modules/importer.ts** to be: ``` import { greeter } from "./exporter" export default function () { return greeter("Earth"); } ``` **Having issues with your local setup?** See the solution in [StackBlitz](https://stackblitz.com/fork/github/bitovi/academy/tree/main/exercises/typescript/05-modules/01-solution?file=src/modules/exporter.ts) or [CodeSandbox](https://codesandbox.io/p/devbox/github/bitovi/academy/tree/main/exercises/typescript/05-modules/01-solution?file=src/modules/exporter.ts). ### Bonus exploration What does your IDE show when you try to: - Hover over `greeter`? - Pass a number to `greeter`? ## Next steps Next, let’s learn how to [declare types](https://www.bitovi.com/academy/learn-typescript/types.html?hsLang=en-us) in TypeScript. ###### On this page... ###### Get help If you need [help](https://discord.gg/J7ejFsZnJ4) with an exercise, please reach out to us on [Discord](https://discord.gg/J7ejFsZnJ4) If you find a bug, please [create an issue](https://github.com/bitovi/academy/issues/new) or email [contact@bitovi.com](mailto:contact@bitovi.com?Subject=Training%20Suggestion) ## Join the Bitovi Newsletter Do you want to receive updates about new Bitovi Academy courses, Bitovi open source projects, and dev community news? If so, please provide your email. We won’t spam you or give it away for any reason! *By providing your email you agree to receive communications from Bitovi* ![](https://bitovi.github.io/academy/static/img/close.svg) ```json { "@context": "http://schema.org", "@type": "Organization", "mainEntityOfPage":{ "@type":"WebPage", "@id":"https://www.bitovi.com/academy/learn-typescript/modules.html", "description": "Learn how to export and import values from a file. " }, "url": "http://bitovi.com", "logo": "https://www.bitovi.com/hubfs/bitovi-logo-23-1.svg", "image": "https://www.bitovi.com/hubfs/bitovi-logo-x2.png", "name": "Bitovi Web App Consulting", "alternateName": "Bitovi", "naics": "541511", "description": "Bitovi is a UX, UI design and front-end JavaScript development consulting company", "address": { "@type": "PostalAddress", "streetAddress": "1134 Pine Tree Lane ", "addressLocality": "Libertyville", "addressRegion": "IL", "addressCountry": "United States", "postalCode": "60048" }, "areaServed": { "@type": "GeoCircle", "geoMidpoint": { "@type": "GeoCoordinates", "latitude": "41.8781", "longitude": "87.6298" }, "geoRadius": "5000 km" }, "telephone": "312-620-0386", "email": "contact@bitovi.com", "sameAs": [ "https://www.facebook.com/BitoviLLC/", "https://twitter.com/bitovi", "https://www.linkedin.com/company/bitovi" ] } ```