如何使用npm包内置的TypeScript类型定义（以Firebase为例）

解决方案 #

1. 确认依赖安装完整

firebaseui仅为UI层封装，依赖firebase核心包，需同时安装两个依赖：

npm install firebase firebaseui

2. 修正导入语法

当前主流的Firebase v9+版本采用模块化API，原命名空间导入写法已废弃，根据使用场景选择对应导入方式：

• 场景1：使用最新模块化API（推荐）

// 导入Firebase核心
import { initializeApp } from 'firebase/app'
// 导入Auth模块
import { getAuth } from 'firebase/auth'
// 导入FirebaseUI
import * as firebaseui from 'firebaseui'
// 导入FirebaseUI默认样式（可选）
import 'firebaseui/dist/firebaseui.css'

• 场景2：兼容旧版v8命名空间写法

// 导入兼容包
import firebase from 'firebase/compat/app'
import 'firebase/compat/auth'
import * as firebaseui from 'firebaseui'

// 可直接使用原有写法调用API
const auth = firebase.auth()

3. 补全tsconfig.json配置

你的配置缺失模块解析规则，需在compilerOptions中新增以下配置：

{
  "compilerOptions": {
    "target": "es2015",
    "strict": true,
    "strictNullChecks": false,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    // 新增以下两项
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true
  }
}

4. 排查其他常见问题

• 核实TS版本：不存在TSC 7.15.1版本，你可能混淆了npm与TS版本，执行tsc -v查看实际TS版本，建议升级到4.7及以上版本获得更完善的模块支持。
• 清除缓存：删除node_modules文件夹与package-lock.json文件后重新执行npm install，在VS Code中按下Ctrl+Shift+P选择「TypeScript: Restart TS Server」重启类型服务，排除缓存导致的识别异常。

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