Modules & Packages - Java to TypeScript | codemirr

Introduction

In this lesson, you'll learn about modules & packages in TypeScript. Coming from Java, you already have a foundation for understanding this concept. We'll build on that knowledge while highlighting the key differences.

Mirror Card

From Java:

In Java, you're familiar with modules to packages.

In TypeScript:

TypeScript has its own approach to modules to packages, which we'll explore step by step.

The TypeScript Way

Let's see how TypeScript handles this concept. Here's a typical example:

TypeScript Example

// File: utils/stringUtils.ts
export function capitalize(s: string): string {
    return s.charAt(0).toUpperCase() + s.slice(1);
}

export const VERSION = "1.0.0";

// File: main.ts
import { capitalize, VERSION } from "./utils/stringUtils";
import type { User } from "./types"; // type-only import

console.log(capitalize("hello"));

// Default export
export default class App { }

// Import default
import App from "./app";

Comparing to Java

Here's how you might have written similar code in Java:

Java (What you know)

// File: com/example/utils/StringUtils.java
package com.example.utils;

public class StringUtils {
    public static String capitalize(String s) {
        return s.substring(0, 1).toUpperCase() + s.substring(1);
    }
}

// File: com/example/Main.java
package com.example;

import com.example.utils.StringUtils;
import java.util.List;

public class Main {
    public static void main(String[] args) {
        System.out.println(StringUtils.capitalize("hello"));
    }
}

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

Java packages are tied to directory structure and declared at the top of every file; TypeScript/ES modules are simply files — no declaration needed

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

Java import uses the fully qualified name; TypeScript uses destructured imports: import { x } from './module'

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

TypeScript has default exports (export default); Java has no equivalent

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

TypeScript has type-only imports (import type { X }) which are stripped at compile time

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

Java has no package.json; TypeScript projects use package.json for dependency management

Step-by-Step Breakdown

1. Named Exports and Imports

Export individual declarations with the export keyword. Import them with destructuring syntax.

Java

// Java - public means exported
public class MathUtils {
    public static int add(int a, int b) { return a+b; }
}

TypeScript

// TypeScript - explicit export keyword
export function add(a: number, b: number): number {
    return a + b;
}

export const PI = 3.14159;

// In another file:
import { add, PI } from "./mathUtils";

2. Default Exports

A module can have one default export, imported without braces.

TypeScript

// logger.ts
export default class Logger {
    log(msg: string) { console.log(`[LOG] ${msg}`); }
}

// main.ts
import Logger from "./logger"; // no braces for default
import MyLogger from "./logger"; // can rename freely

const log = new Logger();

Rule of Thumb

Prefer named exports for libraries and utilities. Default exports are common for React components and main class files.

3. Re-exports and Barrel Files

Create an index.ts that re-exports from multiple files — the TypeScript equivalent of a Java package-info.

TypeScript

// utils/index.ts — barrel file
export { capitalize } from "./stringUtils";
export { formatDate } from "./dateUtils";
export type { FormatterOptions } from "./types";

// Now consumers import from the folder:
import { capitalize, formatDate } from "./utils";

4. Module Resolution

TypeScript resolves modules based on paths, not package declarations. The tsconfig paths option maps aliases.

TypeScript

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@utils/*": ["src/utils/*"],
      "@models/*": ["src/models/*"]
    }
  }
}

// Now instead of:
import { User } from "../../models/user";
// You can write:
import { User } from "@models/user";

Common Mistakes

When coming from Java, developers often make these mistakes:

Java packages are tied to directory structure and declared at the top of every file; TypeScript/ES modules are simply files — no declaration needed
Java import uses the fully qualified name; TypeScript uses destructured imports: import { x } from './module'
TypeScript has default exports (export default); Java has no equivalent

Common Pitfall

Don't assume TypeScript works exactly like Java. While the concepts may be similar, the syntax and behavior can differ significantly.

Key Takeaways

TypeScript modules are files — no package declaration needed
Named exports use the export keyword; import with destructuring
Default exports are imported without braces and can be renamed
Barrel files (index.ts) group related exports like Java packages

Rule of Thumb

The best way to learn is by doing. Try rewriting some of your Java code in TypeScript to practice these concepts.

Introduction

Mirror Card

From Java:

In Java, you're familiar with modules to packages.

In TypeScript:

TypeScript has its own approach to modules to packages, which we'll explore step by step.

The TypeScript Way

Let's see how TypeScript handles this concept. Here's a typical example:

TypeScript Example

// File: utils/stringUtils.ts
export function capitalize(s: string): string {
    return s.charAt(0).toUpperCase() + s.slice(1);
}

export const VERSION = "1.0.0";

// File: main.ts
import { capitalize, VERSION } from "./utils/stringUtils";
import type { User } from "./types"; // type-only import

console.log(capitalize("hello"));

// Default export
export default class App { }

// Import default
import App from "./app";

Comparing to Java

Here's how you might have written similar code in Java:

Java (What you know)

// File: com/example/utils/StringUtils.java
package com.example.utils;

public class StringUtils {
    public static String capitalize(String s) {
        return s.substring(0, 1).toUpperCase() + s.substring(1);
    }
}

// File: com/example/Main.java
package com.example;

import com.example.utils.StringUtils;
import java.util.List;

public class Main {
    public static void main(String[] args) {
        System.out.println(StringUtils.capitalize("hello"));
    }
}

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

Java packages are tied to directory structure and declared at the top of every file; TypeScript/ES modules are simply files — no declaration needed

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

Java import uses the fully qualified name; TypeScript uses destructured imports: import { x } from './module'

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

TypeScript has default exports (export default); Java has no equivalent

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

TypeScript has type-only imports (import type { X }) which are stripped at compile time

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

Java has no package.json; TypeScript projects use package.json for dependency management

Step-by-Step Breakdown

1. Named Exports and Imports

Export individual declarations with the export keyword. Import them with destructuring syntax.

Java

// Java - public means exported
public class MathUtils {
    public static int add(int a, int b) { return a+b; }
}

TypeScript

// TypeScript - explicit export keyword
export function add(a: number, b: number): number {
    return a + b;
}

export const PI = 3.14159;

// In another file:
import { add, PI } from "./mathUtils";

2. Default Exports

A module can have one default export, imported without braces.

TypeScript

// logger.ts
export default class Logger {
    log(msg: string) { console.log(`[LOG] ${msg}`); }
}

// main.ts
import Logger from "./logger"; // no braces for default
import MyLogger from "./logger"; // can rename freely

const log = new Logger();

Rule of Thumb

Prefer named exports for libraries and utilities. Default exports are common for React components and main class files.

3. Re-exports and Barrel Files

Create an index.ts that re-exports from multiple files — the TypeScript equivalent of a Java package-info.

TypeScript

// utils/index.ts — barrel file
export { capitalize } from "./stringUtils";
export { formatDate } from "./dateUtils";
export type { FormatterOptions } from "./types";

// Now consumers import from the folder:
import { capitalize, formatDate } from "./utils";

4. Module Resolution

TypeScript resolves modules based on paths, not package declarations. The tsconfig paths option maps aliases.

TypeScript

// tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@utils/*": ["src/utils/*"],
      "@models/*": ["src/models/*"]
    }
  }
}

// Now instead of:
import { User } from "../../models/user";
// You can write:
import { User } from "@models/user";

Common Mistakes

When coming from Java, developers often make these mistakes:

Java packages are tied to directory structure and declared at the top of every file; TypeScript/ES modules are simply files — no declaration needed
Java import uses the fully qualified name; TypeScript uses destructured imports: import { x } from './module'
TypeScript has default exports (export default); Java has no equivalent

Common Pitfall

Don't assume TypeScript works exactly like Java. While the concepts may be similar, the syntax and behavior can differ significantly.

Key Takeaways

TypeScript modules are files — no package declaration needed
Named exports use the export keyword; import with destructuring
Default exports are imported without braces and can be renamed
Barrel files (index.ts) group related exports like Java packages

Rule of Thumb

The best way to learn is by doing. Try rewriting some of your Java code in TypeScript to practice these concepts.