Babel preset-typescript and tsc type-checking responsibility at transpilation boundary

Direct Answer

@babel/preset-typescript does not perform type checking. It only erases TypeScript syntax and transpiles to JavaScript. A separate tsc --noEmit step is required to catch type errors before release. Babel and tsc resolve module paths independently, so aliases must be configured in both tsconfig.json and your Babel configuration.

What @babel/preset-typescript Actually Does

• Strips type annotations, interfaces, type aliases, and import type declarations.
• Transpiles modern ECMAScript and TS-specific syntax (enums, namespaces, parameter properties, etc.) to the target JS version.
• Does not run the TypeScript type checker. It will happily emit JavaScript for const x: number = 'hello', foo.bar() where bar doesn't exist, or mismatched generics.

Required Type-Check Step

Add tsc --noEmit (or tsc --noEmit --skipLibCheck for faster CI) as a gate before your Babel build. In a typical CI pipeline:

# 1. Type check (fails on any type error)
npx tsc --noEmit

# 2. Transpile with Babel (only runs if step 1 passes)
npx babel src --out-dir dist

During development, run tsc --noEmit --watch in a separate terminal for fast feedback without duplicating emit work.

Aligning Module Path Aliases

Babel does not read tsconfig.json paths. You must mirror the same aliases in your Babel config using babel-plugin-module-resolver (or the plugins array in babel-preset-typescript options).

tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
      "@components/*": ["src/components/*"]
    },
    "isolatedModules": true
  }
}

babel.config.js

module.exports = {
  presets: [
    ["@babel/preset-typescript", { allowNamespaces: true }]
  ],
  plugins: [
    ["module-resolver", {
      root: ["."],
      alias: {
        "@": "./src",
        "@components": "./src/components"
      }
    }]
  ]
};

With both configured identically, import Button from '@/components/Button' resolves to the same file for tsc and Babel.

Critical tsconfig Settings for Babel Compatibility

• "isolatedModules": true — Required. Ensures each file can be transpiled independently (no cross-file emit dependencies like const enum or namespace merging).
• "verbatimModuleSyntax": true (TS 5.0+) — Keeps import type imports explicit so Babel can strip them correctly when onlyRemoveTypeImports: true is set in the preset.
• "skipLibCheck": true — Optional in CI for speed, but disable for release builds to catch declaration-file mismatches.

Verification Checklist

1. Create a file with a deliberate type error (e.g., const n: number = 'oops').
2. Run your Babel build — it should succeed.
3. Run npx tsc --noEmit — it should fail with TS2322.
4. Add an alias import, run both tsc --noEmit and Babel; confirm they produce identical resolved paths (check dist output or use --traceResolution with tsc).
5. Add tsc --noEmit as a required CI step before the Babel build.

What Remains Uncertain

If you use a bundler (webpack, Vite, esbuild, Rollup), its own alias/resolution config must also match. The research above covers only the Babel↔tsc boundary. Verify your bundler's resolve.alias / resolve.extensions mirrors the same mappings.