JS `import type` (TypeScript)：仅导入类型定义，不生成运行时代码

各位靓仔靓女们，晚上好！今天咱们来聊聊TypeScript里一个相当给力的特性——import type。这玩意儿就像个优雅的间谍，只负责传递情报（类型信息），绝不参与实战（运行时代码）。听起来是不是有点意思？

开场白：为啥我们需要import type？

想象一下，你写了一个TypeScript项目，代码量蹭蹭往上涨，模块之间依赖关系错综复杂，就像一团乱麻。为了保证类型安全，你到处import各种东西，结果发现最终生成的JavaScript代码变得臃肿不堪，性能也受到了影响。

问题出在哪里呢？很多时候，你import的仅仅是类型定义，比如接口（interface）、类型别名（type）、枚举（enum）。这些东西在运行时根本不需要存在，它们只是TypeScript为了类型检查而存在的“幽灵”。

import type就是用来解决这个问题的。它可以让你只导入类型定义，而不会在运行时生成任何代码。这样，你既可以享受到TypeScript带来的类型安全，又可以避免JavaScript代码的臃肿。

import type的基础用法

import type的语法很简单，就是在普通的import语句前面加上type关键字。

// 导入一个接口
import type { User } from './user';

// 导入多个类型
import type { Product, Category } from './product';

// 导入整个模块的类型
import type * as utils from './utils';

// 使用导入的类型
function greetUser(user: User) {
  console.log(`Hello, ${user.name}!`);
}

对比：import vs import type

为了更清楚地理解import type的作用，咱们来对比一下import和import type的区别。

特性	import	import type
作用	导入值（变量、函数、类等）和类型	只导入类型
运行时代码	生成运行时代码	不生成运行时代码
用途	使用导入的值和类型	仅用于类型检查
可能造成的副作用	如果导入的值很大，可能增加bundle体积	对bundle体积没有影响

示例：一个简单的React组件

咱们来写一个简单的React组件，看看import和import type在实际项目中的应用。

// src/components/UserCard.tsx

// 导入User接口
import type { User } from '../types/user';

// 导入useState hook (需要运行时代码)
import React, { useState } from 'react';

interface Props {
  user: User;
}

const UserCard: React.FC<Props> = ({ user }) => {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <div>
      <h3>{user.name}</h3>
      <p>{user.email}</p>
      {isExpanded && <p>{user.address}</p>}
      <button onClick={() => setIsExpanded(!isExpanded)}>
        {isExpanded ? 'Hide Address' : 'Show Address'}
      </button>
    </div>
  );
};

export default UserCard;

在这个例子中，我们使用import type导入了User接口，因为它只在类型检查时使用。而useState hook则需要使用import导入，因为它是运行时代码。

import type的进阶用法

除了基础用法之外，import type还有一些进阶用法，可以让你更灵活地控制类型导入。

• inline type imports (内联类型导入)

  从 TypeScript 4.5 开始，你可以直接在类型声明中使用 import type，而不需要单独的导入语句。

  type User = import('./user').User; // 导入user.ts中的User类型
  
  function greetUser(user: User) {
    console.log(`Hello, ${user.name}!`);
  }

  这在某些场景下可以提高代码的可读性。

• type-only imports (仅类型导入)

  你可以使用import { type ... }语法来导入类型，即使在同一个import语句中同时导入值和类型。

  import React, { useState, type FC } from 'react';
  
  interface Props {
    name: string;
  }
  
  const MyComponent: FC<Props> = ({ name }) => {
    const [count, setCount] = useState(0);
    return (
      <div>
        <p>Hello, {name}! Count: {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
      </div>
    );
  };
  
  export default MyComponent;

  在这个例子中，FC 是一个类型，而 React 和 useState 是值。

解决常见问题

在使用import type的过程中，你可能会遇到一些问题。下面是一些常见问题及其解决方案：

• 问题：在运行时使用import type导入的类型

  如果你尝试在运行时使用import type导入的类型，TypeScript会报错。

  // 错误示例
  import type { User } from './user';
  
  const user = new User(); // 编译错误：'User' only refers to a type, but is being used as a value here.

  解决方案：确保你只在类型声明中使用import type导入的类型。如果你需要在运行时使用某个类型，则需要使用普通的import语句。

• 问题：与第三方库的兼容性

  某些第三方库可能没有正确地声明它们的类型。这可能导致在使用import type时出现问题。

  解决方案：

  1. 检查该库是否有更新的类型声明文件（.d.ts）。
  2. 如果该库没有类型声明文件，你可以尝试自己编写一个。
  3. 如果以上方法都不可行，你可以考虑使用// @ts-ignore或// @ts-nocheck来忽略类型检查错误。但请谨慎使用这些注释，因为它们会降低代码的类型安全。

• 问题：与ESLint规则的冲突

  某些ESLint规则可能与import type的使用方式冲突。

  解决方案：

  1. 更新你的ESLint配置，使其支持import type。
  2. 禁用与import type冲突的ESLint规则。

import type的最佳实践

为了更好地使用import type，这里有一些最佳实践：

• 尽可能使用import type

  如果你的import仅仅是为了类型检查，那么就应该使用import type。这可以减少JavaScript代码的体积，提高性能。

• 将类型定义放在单独的文件中

  将类型定义放在单独的文件中，可以使代码更清晰、更易于维护。例如，你可以创建一个types目录，并将所有的类型定义文件放在其中。

• 使用inline type imports提高可读性

  在适当的情况下，可以使用inline type imports来提高代码的可读性。

• 保持代码的类型安全

  即使使用了import type，也要注意保持代码的类型安全。避免使用any类型，并尽可能地使用类型注解。

总结

import type是TypeScript中一个非常有用的特性，它可以让你只导入类型定义，而不会在运行时生成任何代码。这可以减少JavaScript代码的体积，提高性能。

总的来说，import type就像一个精明的财务顾问，它帮你削减不必要的开支（运行时代码），让你的项目更苗条、更高效。

彩蛋：--isolatedModules标志

如果你开启了 TypeScript 的 --isolatedModules 标志，那么 import type 就变得更加重要了。 --isolatedModules 标志要求每个文件都可以被独立编译，这意味着 TypeScript 编译器不能依赖于全局类型推断。在这种情况下，如果你想在一个文件中使用另一个文件中的类型，就必须使用 import type。

再总结一下：

优势	劣势	适用场景
减少bundle体积	需要开发者注意区分import和import type	大型项目，需要优化bundle体积；只在类型声明中使用的类型导入；开启了--isolatedModules的项目。
提高性能
增强类型安全（配合其他TypeScript特性）

最后的温馨提示：

记住，代码的世界里没有银弹。import type虽然好用，但也需要你根据实际情况灵活运用。不要盲目追求“最佳实践”，而是要理解其背后的原理，才能真正发挥它的威力。

好了，今天的讲座就到这里。希望大家有所收获，下次再见！如果有什么问题，欢迎在评论区留言，我会尽力解答。 祝大家编码愉快！