TypeScript中React导入方式优化：解决多行导入不兼容Lint问题

你完全可以用 import React, {Component} from 'react'; 这种写法，这不仅符合TypeScript的语法规范，还完美解决了你提到的两个痛点：既不会触发Lint对重复导入的禁止，又不用写一堆冗余的const声明，代码简洁又优雅。

为什么这种写法可行？ #

• ES6模块语法支持：React的npm包同时提供了默认导出（整个React对象）和命名导出（如Component、Fragment、useState等），ES6模块本身就允许同时导入默认导出和命名导出，这种写法是完全合法的。
• TypeScript兼容性：只要你的tsconfig.json配置合理（比如module设置为ESNext/ES6+，新版本TypeScript配合@types/react时，甚至不需要额外开启allowSyntheticDefaultImports，因为React的类型定义已经配置了合成默认导出），类型检查会完全正常工作，不会出现类型报错。

对比三种写法的优劣 #

1. ❌ 被Lint禁止的重复导入：

import * as React from 'react';
import {Component} from 'react';

（触发import/no-duplicates这类Lint规则，因为重复导入了同一个模块）

2. ❌ 冗余的const声明写法：

import * as React from 'react';
const Component = React.Component;
const Fragment = React.Fragment;
const useState = React.useState;
// 越来越多的声明，代码臃肿

（本质是手动提取属性，不是标准的模块导入语法，不够优雅）

3. ✅ 推荐的合并导入写法：

import React, {Component, Fragment, useState} from 'react';

（既符合Lint规则，又保持代码简洁，是TypeScript+React项目中的常规写法）

额外小提示 #

如果你使用的是React 17及以上版本，官方的JSX转换已经不需要在文件顶部导入React了，但如果你的代码中依然需要用到React对象上的方法（比如React.cloneElement）或者类组件的Component基类，这种合并导入依然是最佳选择。

内容的提问来源于stack exchange，提问作者Dan Kuida