无模块导出的@types/websql定义文件在Angular项目中如何导入？

数据老陈

2026-5-28

解决@types/websql在Angular/TypeScript中的使用问题

嘿，我正好处理过类似的情况！@types/websql属于全局类型定义，它不会像普通模块那样导出内容，所以咱们不用常规的import语句来引入它。下面是具体的解决步骤：

1. 先确保依赖已安装

首先确认你已经安装了这个类型包，要是还没装，执行下面的命令：

npm install @types/websql --save-dev

2. 让TypeScript识别全局类型

有两种方式可以让TS感知到这些全局类型：

方式一：全局配置（推荐）

在你的项目根目录的tsconfig.json文件里，找到compilerOptions下的types数组，把"websql"加进去：

{
  "compilerOptions": {
    // 其他配置...
    "types": [
      "websql",
      // 你项目里的其他类型包，比如jasmine、node等
    ]
  }
}

这样配置后，整个项目的TypeScript文件都会自动识别WebSQL的全局类型，不用每个文件单独处理。

方式二：单文件引入

如果只想在某个特定文件里使用这个类型，就在该文件的最顶部（任何代码和注释之前）添加三斜线指令：

/// <reference types="websql" />

// 接下来就可以正常使用WebSQL的API了
const db = window.openDatabase('MyDB', '1.0', 'Test Database', 2 * 1024 * 1024);

3. 实际使用示例

配置好之后，你就可以直接通过全局的window对象调用WebSQL的API了，比如：

// 打开数据库
const db = window.openDatabase('MyAppDB', '1.0', 'Angular WebSQL Demo', 5 * 1024 * 1024);

// 执行SQL语句
db.transaction((tx) => {
  tx.executeSql('CREATE TABLE IF NOT EXISTS Users (id unique, name)');
  tx.executeSql('INSERT INTO Users (id, name) VALUES (?, ?)', [1, 'Alice']);
  
  tx.executeSql('SELECT * FROM Users', [], (tx, results) => {
    const len = results.rows.length;
    for (let i = 0; i < len; i++) {
      console.log(`User: ${results.rows.item(i).name}`);
    }
  });
});