【从一个 TypeScript 报错理解 ES6 模块的三种导入方式】

从一个 TypeScript 报错理解 ES6 模块的三种导入方式

在日常开发中，我们经常遇到模块导入导出的场景。最近在处理一个项目时，遇到了一个有趣的问题：对于只有默认导出的模块，我们该使用哪种导入方式？这个问题引发了对 JavaScript 模块系统的深入思考。

问题起源

在项目中，我们遇到这样一段代码：

// 原始代码
import * as OverviewApi from '@/views/home/overview/api'// api.ts 的内容
export default {allStationInfo(data = {}) {// ... }
}

这段代码虽然能运行，但出现了 TypeScript 错误：Property 'allStationInfo' does not exist on type...。这促使我们重新思考模块导入的最佳实践。

模块化的历史演进

在深入讨论导入方式之前，我们先了解一下 JavaScript 模块化的发展历程：

早期阶段（2009年之前）
- 没有官方模块系统
- 主要通过全局变量和命名空间模式组织代码
- 容易造成命名冲突和依赖混乱

CommonJS时代（2009年）

// 导出
module.exports = { method: function() {} }
// 导入
const module = require('./module')

Node.js采用的模块规范
同步加载，不适合浏览器环境

AMD时代（2011年）

define(['dependency'], function(dependency) {return { method: function() {} }
})

专为浏览器设计
支持异步加载
使用相对复杂

ES6模块系统（2015年）
- 官方标准化的模块系统
- 同时支持浏览器和Node.js
- 支持静态分析，有利于tree-shaking

三种主要的导入方式

1. 默认导入

import Api from './api'

直接获取模块的默认导出
最简洁的使用方式
适用于模块只有一个主要导出对象的情况

2. 命名空间导入

import * as Api from './api'

将所有导出（包括默认导出）收集到一个命名空间对象中
默认导出会在 .default 属性下
适用于模块有多个导出的情况

3. 命名导入默认导出

import { default as Api } from './api'

显式地将默认导出重命名
效果与默认导入相同
较少使用，除非需要特别明确导入的是默认导出

使用场景分析

不同的导入方式适合不同的场景：

默认导入适用场景

单一功能模块

// React组件
import Button from './Button'
// 工具类
import axios from 'axios'

主要功能模块

// 配置文件
import config from './config'
// API服务
import apiService from './api'

命名空间导入适用场景

工具库

// 数据可视化库
import * as d3 from 'd3'
// 工具函数集合
import * as Utils from './utils'

类型定义

// TypeScript类型定义
import * as Types from './types'

混合使用场景

// 同时使用默认导出和具名导出
import React, { useState, useEffect } from 'react'

实际应用对比

让我们看一个具体的例子：

// api.ts
export default {method1() {},method2() {}
}// 使用方式对比
// 1. 默认导入
import Api from './api'
Api.method1()  // ✓ 推荐：简洁直观// 2. 命名空间导入
import * as ApiNamespace from './api'
ApiNamespace.default.method1()  // △ 可用但繁琐// 3. 命名导入默认导出
import { default as Api } from './api'
Api.method1()  // ✓ 作用同默认导入

TypeScript 中的考虑

在 TypeScript 项目中，选择正确的导入方式还需要考虑类型系统：

// 默认导出的类型推断通常更直接
import Api from './api'
// TypeScript 能更好地推断 Api 的类型// 命名空间导入可能需要额外的类型处理
import * as ApiNamespace from './api'
// 需要通过 .default 访问，类型推断可能不如默认导入直接