Build Tooling - Java to TypeScript | codemirr

Introduction

In this lesson, you'll learn about build tooling 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 tsconfig.json, tsc compiler, vite/webpack vs maven/gradle.

In TypeScript:

TypeScript has its own approach to tsconfig.json, tsc compiler, vite/webpack vs maven/gradle, 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

// tsconfig.json — TypeScript compiler configuration
{
  "compilerOptions": {
    "target": "ES2022",          // output JS version (= Java --release 21)
    "module": "ESNext",          // module format: ESNext/CommonJS
    "lib": ["ES2022", "DOM"],    // type definitions to include
    "strict": true,              // enable all strict checks
    "noImplicitAny": true,       // no implicit any type
    "outDir": "./dist",          // output directory (= target/ in Maven)
    "rootDir": "./src",          // source directory (= src/main/java)
    "moduleResolution": "Bundler",
    "declaration": true,         // emit .d.ts type declarations
    "sourceMap": true            // emit .map for debugging
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "dist"]
}

// package.json scripts
// "scripts": {
//   "build": "tsc",                 // compile only
//   "dev":   "vite",                // dev server (Vite)
//   "build:vite": "vite build",     // production bundle
//   "test":  "vitest",
//   "typecheck": "tsc --noEmit"     // type-check without emitting
// }

Comparing to Java

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

Java (What you know)

<!-- pom.xml — declares dependencies and build config -->
<project>
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.example</groupId>
  <artifactId>my-app</artifactId>
  <version>1.0.0</version>

  <properties>
    <java.version>21</java.version>
    <maven.compiler.source>21</maven.compiler.source>
    <maven.compiler.target>21</maven.compiler.target>
  </properties>

  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
      <version>3.2.0</version>
    </dependency>
  </dependencies>

  <!-- Build: mvn compile  -->
  <!-- Test:  mvn test     -->
  <!-- Pack:  mvn package  -->
  <!-- Run:   mvn spring-boot:run -->
</project>

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

tsconfig.json configures the TypeScript compiler; pom.xml configures Maven

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

tsc compiles TypeScript → JavaScript; javac compiles .java → .class

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

Bundlers (Vite, webpack) bundle JS for browsers — no Java equivalent

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

noEmit + type-check: tsc --noEmit for type checking without output

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

target/outDir: Java outputs to target/; TypeScript to dist/ by convention

Step-by-Step Breakdown

1. tsconfig.json Basics

tsconfig.json is the TypeScript project configuration — equivalent to Maven's compiler plugin config. 'strict: true' enables all type checks.

Java

<!-- Maven compiler config -->
<properties>
  <java.version>21</java.version>
</properties>

TypeScript

{
  "compilerOptions": {
    "target": "ES2022",    // output JS version
    "strict": true,        // strict type checking
    "outDir": "./dist",    // like Maven's target/
    "rootDir": "./src"
  }
}

2. tsc Commands

tsc compiles TypeScript. Use --noEmit for type checking in CI without generating files. Use --watch for incremental compilation.

Java

mvn compile   # compile
mvn verify    # compile + test
mvn package   # create JAR

TypeScript

npx tsc           # compile
npx tsc --noEmit  # type-check only (CI)
npx tsc --watch   # watch mode (like IDE build)

3. Bundlers (Vite/webpack)

For browser code, bundlers combine many JS files into one optimized bundle. This has no Maven equivalent — JAR files serve a similar purpose for distribution but not browser delivery.

Java

mvn package  # creates runnable JAR

TypeScript

// vite.config.ts
import { defineConfig } from "vite"
export default defineConfig({
    build: { outDir: "dist", sourcemap: true }
})
// npm run build → optimized bundle in dist/

4. Declaration Files (.d.ts)

Declaration files describe the types of a JavaScript package — like Java's interface without implementation. They're generated by tsc or hand-written for plain JS libraries.

Java

// Java: interface in .java file, impl in another
public interface Calculator { int add(int a, int b); }

TypeScript

// math.d.ts — type declarations
export function add(a: number, b: number): number;
export const PI: number;
// Generated by tsc --declaration
// Or find on DefinitelyTyped: npm install @types/lodash

Common Mistakes

When coming from Java, developers often make these mistakes:

tsconfig.json configures the TypeScript compiler; pom.xml configures Maven
tsc compiles TypeScript → JavaScript; javac compiles .java → .class
Bundlers (Vite, webpack) bundle JS for browsers — no Java 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

tsconfig.json configures compiler: target JS version, strict mode, outDir, module format
tsc --noEmit for type-checking in CI; tsc --watch for development
Bundlers (Vite, webpack, esbuild) optimize code for browser delivery — no Maven equivalent
.d.ts declaration files are TypeScript's equivalent to Java interfaces for external consumers

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 tsconfig.json, tsc compiler, vite/webpack vs maven/gradle.

In TypeScript:

TypeScript has its own approach to tsconfig.json, tsc compiler, vite/webpack vs maven/gradle, 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

// tsconfig.json — TypeScript compiler configuration
{
  "compilerOptions": {
    "target": "ES2022",          // output JS version (= Java --release 21)
    "module": "ESNext",          // module format: ESNext/CommonJS
    "lib": ["ES2022", "DOM"],    // type definitions to include
    "strict": true,              // enable all strict checks
    "noImplicitAny": true,       // no implicit any type
    "outDir": "./dist",          // output directory (= target/ in Maven)
    "rootDir": "./src",          // source directory (= src/main/java)
    "moduleResolution": "Bundler",
    "declaration": true,         // emit .d.ts type declarations
    "sourceMap": true            // emit .map for debugging
  },
  "include": ["src/**/*.ts"],
  "exclude": ["node_modules", "dist"]
}

// package.json scripts
// "scripts": {
//   "build": "tsc",                 // compile only
//   "dev":   "vite",                // dev server (Vite)
//   "build:vite": "vite build",     // production bundle
//   "test":  "vitest",
//   "typecheck": "tsc --noEmit"     // type-check without emitting
// }

Comparing to Java

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

Java (What you know)

<!-- pom.xml — declares dependencies and build config -->
<project>
  <modelVersion>4.0.0</modelVersion>
  <groupId>com.example</groupId>
  <artifactId>my-app</artifactId>
  <version>1.0.0</version>

  <properties>
    <java.version>21</java.version>
    <maven.compiler.source>21</maven.compiler.source>
    <maven.compiler.target>21</maven.compiler.target>
  </properties>

  <dependencies>
    <dependency>
      <groupId>org.springframework.boot</groupId>
      <artifactId>spring-boot-starter-web</artifactId>
      <version>3.2.0</version>
    </dependency>
  </dependencies>

  <!-- Build: mvn compile  -->
  <!-- Test:  mvn test     -->
  <!-- Pack:  mvn package  -->
  <!-- Run:   mvn spring-boot:run -->
</project>

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

tsconfig.json configures the TypeScript compiler; pom.xml configures Maven

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

tsc compiles TypeScript → JavaScript; javac compiles .java → .class

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

Bundlers (Vite, webpack) bundle JS for browsers — no Java equivalent

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

noEmit + type-check: tsc --noEmit for type checking without output

Mirror Card

From Java:

You may be used to different syntax or behavior.

In TypeScript:

target/outDir: Java outputs to target/; TypeScript to dist/ by convention

Step-by-Step Breakdown

1. tsconfig.json Basics

tsconfig.json is the TypeScript project configuration — equivalent to Maven's compiler plugin config. 'strict: true' enables all type checks.

Java

<!-- Maven compiler config -->
<properties>
  <java.version>21</java.version>
</properties>

TypeScript

{
  "compilerOptions": {
    "target": "ES2022",    // output JS version
    "strict": true,        // strict type checking
    "outDir": "./dist",    // like Maven's target/
    "rootDir": "./src"
  }
}

2. tsc Commands

tsc compiles TypeScript. Use --noEmit for type checking in CI without generating files. Use --watch for incremental compilation.

Java

mvn compile   # compile
mvn verify    # compile + test
mvn package   # create JAR

TypeScript

npx tsc           # compile
npx tsc --noEmit  # type-check only (CI)
npx tsc --watch   # watch mode (like IDE build)

3. Bundlers (Vite/webpack)

For browser code, bundlers combine many JS files into one optimized bundle. This has no Maven equivalent — JAR files serve a similar purpose for distribution but not browser delivery.

Java

mvn package  # creates runnable JAR

TypeScript

// vite.config.ts
import { defineConfig } from "vite"
export default defineConfig({
    build: { outDir: "dist", sourcemap: true }
})
// npm run build → optimized bundle in dist/

4. Declaration Files (.d.ts)

Declaration files describe the types of a JavaScript package — like Java's interface without implementation. They're generated by tsc or hand-written for plain JS libraries.

Java

// Java: interface in .java file, impl in another
public interface Calculator { int add(int a, int b); }

TypeScript

// math.d.ts — type declarations
export function add(a: number, b: number): number;
export const PI: number;
// Generated by tsc --declaration
// Or find on DefinitelyTyped: npm install @types/lodash

Common Mistakes

When coming from Java, developers often make these mistakes:

tsconfig.json configures the TypeScript compiler; pom.xml configures Maven
tsc compiles TypeScript → JavaScript; javac compiles .java → .class
Bundlers (Vite, webpack) bundle JS for browsers — no Java 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

tsconfig.json configures compiler: target JS version, strict mode, outDir, module format
tsc --noEmit for type-checking in CI; tsc --watch for development
Bundlers (Vite, webpack, esbuild) optimize code for browser delivery — no Maven equivalent
.d.ts declaration files are TypeScript's equivalent to Java interfaces for external consumers

Rule of Thumb

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