// Before import type — ambiguous
import { User, UserService } from './user';
// Is User used as a value (class) or just a type?
// A reader can't tell without scanning the whole file.

function greet(user: User): string {   // only used as a type
  return `Hello ${user.name}`;
}

const svc = new UserService(); // used as a value
      

// After import type — explicit and clear
import type { User } from './user';           // type-only: erased at compile time
import { UserService } from './user';          // value: kept in JS output

function greet(user: User): string {
  return `Hello ${user.name}`;
}

const svc = new UserService();
      

// Import a single type
import type { User } from './user';

// Import multiple types
import type { User, UserRole, UserPreferences } from './user';

// Import a type with a rename
import type { User as UserModel } from './user';

// Import all types as a namespace
import type * as UserTypes from './user';
// UserTypes.User, UserTypes.UserRole, etc.

// Import a default type export
import type Logger from './logger';
      

// Export a type at the declaration site
export type { User };
export type { UserRole, UserPreferences };

// Export with rename
export type { User as UserModel };

// Inline export type
export type UserId = string;
export type UserRecord = {
  id: UserId;
  name: string;
  createdAt: Date;
};

// Re-export a type from another module
export type { User } from './user';
export type * from './user-types';
      

// Mix value and type imports in one statement (TypeScript 4.5+)
import { UserService, type User, type UserRole } from './user';

// Equivalent to:
import { UserService } from './user';
import type { User, UserRole } from './user';

// Inline type specifiers in re-exports too
export { UserService, type User, type UserRole } from './user';
      

// tsconfig.json
{
  "compilerOptions": {
    "verbatimModuleSyntax": true
  }
}
      

// With verbatimModuleSyntax: true

// ✗ Error: 'User' is a type and must use 'import type'
import { User } from './user';
function greet(user: User) {}

// ✓ Correct
import type { User } from './user';
function greet(user: User) {}
      

// order.ts
import type { User } from './user';  // type-only — no runtime circular dep

export interface Order {
  id: string;
  user: User;  // only used in types
  total: number;
}

// user.ts
import type { Order } from './order';  // type-only

export interface User {
  id: string;
  name: string;
  orders: Order[];  // only used in types
}

// No circular runtime dependency — both imports are erased at compile time ✓
      

// types.ts — pure type definitions
export interface UserDTO {
  id: string;
  name: string;
  email: string;
}

export type CreateUserInput = Omit<UserDTO, 'id'>;
export type UpdateUserInput = Partial<CreateUserInput>;

// user.service.ts — runtime values
import type { UserDTO, CreateUserInput, UpdateUserInput } from './types';

export class UserService {
  private users: UserDTO[] = [];

  create(input: CreateUserInput): UserDTO {
    const user: UserDTO = { id: crypto.randomUUID(), ...input };
    this.users.push(user);
    return user;
  }

  update(id: string, input: UpdateUserInput): UserDTO | undefined {
    const user = this.users.find(u => u.id === id);
    if (user) Object.assign(user, input);
    return user;
  }
}
      

import type { IncomingMessage, ServerResponse } from 'http';
import type { ReactNode, FC, MouseEvent } from 'react';
import type { NextApiRequest, NextApiResponse } from 'next';

// These are all types — no runtime value is imported
function handler(req: IncomingMessage, res: ServerResponse) {
  res.end('OK');
}

const Button: FC<{ onClick: (e: MouseEvent) => void; children: ReactNode }> = ({
  onClick,
  children,
}) => {
  // JSX here
  return null as any;
};
      

// index.ts — library public API barrel
// Value exports (kept in JS output)
export { UserService } from './services/user.service';
export { ApiClient } from './services/api.client';
export { createApp } from './app';

// Type exports (erased from JS output)
export type { User, UserDTO, CreateUserInput } from './types/user';
export type { ApiConfig, ApiResponse } from './types/api';
export type { AppOptions } from './types/app';
      

// .eslintrc.json — enforce import type for type-only imports
{
  "rules": {
    "@typescript-eslint/consistent-type-imports": [
      "error",
      {
        "prefer": "type-imports",
        "disallowTypeAnnotations": true,
        "fixStyle": "inline-type-imports"
      }
    ],
    "@typescript-eslint/consistent-type-exports": [
      "error",
      { "fixMixedExportsWithInlineTypeSpecifier": true }
    ]
  }
}