Back to all comparisonsTechPref
TypeScript Styleguide

Type Imports: 'type' Keyword vs Mixed Imports

Two approaches to importing types in TypeScript. Explore whether to use the 'type' keyword for type-only imports or mix them with value imports.

51%

Use Type Imports

49%

Use Mixed Imports

Type Imports

Explicitly mark type-only imports with the 'type' keyword for clarity and better tree-shaking.

Code Example

example.ts (with type keyword)
import type { User, Config } from '@/types';
import type React from 'react';
import { useState } from 'react';

import type { Database } from '@/db';
import { getUser } from '@/db';

const user: User = { id: 1 };

Key Benefits

  • Explicitly marks type-only imports
  • Improves tree-shaking and bundle size
  • Clearer intent for developers
  • Prevents circular dependencies
  • Works well with isolatedModules
  • Modern TypeScript best practice

Statistics

Mixed Imports

Mix types and values in regular imports without explicit 'type' keyword.

Code Example

example.ts (mixed imports)
import { User, Config, getUser } from '@/types';
import React, { useState } from 'react';

import { Database, getUser as fetchUser } from '@/db';

const user: User = { id: 1 };

Key Benefits

  • Simpler import statements
  • No distinction between types and values
  • TypeScript compiler handles separation
  • Less verbose for small modules
  • Traditional approach before TypeScript 4.5
  • Works fine with most projects

Statistics

Additional Insights

More data points to help you make an informed decision for your team.

995

repositories analyzed