Tillitsdone
down Scroll to discover

TypeScript Modules and Import/Export Syntax

Master TypeScript modules with this comprehensive guide covering import/export syntax, named exports, default exports, and best practices for organizing your TypeScript code effectively.
thumbnail

Understanding TypeScript Modules and Import/Export Syntax

A minimalist abstract composition of interconnected geometric shapes floating in space featuring bright yellow and cobalt blue gradients viewed from a 45-degree angle perspective high-quality ultra-realistic cinematic 8K UHD high resolution sharp and detail

If you’re diving into TypeScript, understanding modules and how to structure your code is crucial. Today, let’s explore TypeScript modules and master the import/export syntax in a way that’ll make your code more organized and maintainable.

What are TypeScript Modules?

Think of modules as containers for your code. Just like how we organize our clothes in different drawers, modules help us organize our code into manageable, reusable pieces. Each module can contain functions, classes, interfaces, or variables that we can share between different parts of our application.

An aerial view of a complex maze pattern made of bright red and light blue geometric shapes captured from directly above showcasing interconnected pathways high-quality ultra-realistic cinematic 8K UHD high resolution sharp and detail

Export Syntax: Sharing Your Code

TypeScript provides several ways to export your code. Let’s look at the most common approaches:

Named Exports

The most straightforward way to share your code is through named exports. You can export multiple items from a single module:

math.ts
export const add = (a: number, b: number): number => a + b;
export const subtract = (a: number, b: number): number => a - b;
export interface MathOperation {
(x: number, y: number): number;
}

Default Exports

When you want to export a single main thing from a module, use a default export:

calculator.ts
export default class Calculator {
add(a: number, b: number): number {
return a + b;
}
}

A close-up macro shot of abstract crystalline structures featuring ochre and off-white colors with black accents captured from a low angle perspective high-quality ultra-realistic cinematic 8K UHD high resolution sharp and detail

Import Syntax: Using Shared Code

Now that we know how to export code, let’s see how to import it:

Importing Named Exports

app.ts
import { add, subtract, MathOperation } from './math';
const result = add(5, 3);

Importing Default Exports

app.ts
import Calculator from './calculator';
const calc = new Calculator();

Import Aliases

You can rename imports to avoid naming conflicts:

import { add as addNumbers } from './math';
import * as MathUtils from './math';

Best Practices

  1. Keep one module per file to maintain clarity
  2. Use meaningful names for your modules
  3. Prefer named exports for better code discoverability
  4. Use barrel files (index.ts) to consolidate exports
  5. Be consistent with your import/export style

Remember, good module organization is like having a well-organized toolbox – it makes your work smoother and more efficient.

An abstract representation of flowing data streams featuring grapeseed and light blue colors creating dynamic patterns shot from a dutch angle perspective high-quality ultra-realistic cinematic 8K UHD high resolution sharp and detail

icons/code-outline.svg Typescript Blogs
Superset of JavaScript adding static types for improved code quality and maintainability.
icons/logo-tid.svg
Talk with CEO
Ready to bring your web/app to life or boost your team with expert Thai developers?
Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!
🖐️ Contact us
Let's keep in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.