如何在Blazor应用中使用TypeScript浏览器类型？

1. Web原生对象是否有官方类型定义 #

有，且是TypeScript官方内置维护，无需第三方依赖。

• 所有DOM、BOM相关标准API的类型定义都存放在TypeScript核心包内置的lib.dom.d.ts系列声明文件中，覆盖document、window、各类DOM节点、正式发布的浏览器标准接口，和W3C规范完全对齐
• 这些类型属于全局注入类型，配置正确的情况下不需要手动import，直接调用就能获得完整强类型提示，开发体验和C#调用基础类库内置类型一致

2. Blazor项目中启用浏览器类型的方法 #

你输入document没有智能提示，本质是TypeScript编译配置没有加载DOM类型库，按以下步骤操作即可修复：

• 找到TS脚本存放目录（通常为wwwroot下的脚本目录）下的tsconfig.json文件，如果没有该文件，在对应目录执行命令生成基础配置：

  tsc --init
  

• 打开tsconfig.json，在compilerOptions.lib配置数组中加入"DOM"和"DOM.Iterable"项，参考最小可用配置：

  {
    "compilerOptions": {
      "target": "ES2020",
      "lib": ["ES2020", "DOM", "DOM.Iterable"],
      "strict": true,
      "module": "ES2020",
      "outDir": "../dist/js"
    },
    "include": ["./**/*.ts"]
  }
  

• 保存配置后重启编辑器，再次输入document时就能看到完整的属性、方法提示，类型校验也会同步生效。

注意：Blazor项目默认不会自动生成TypeScript配置文件，如果你直接创建TS文件但没有配套tsconfig.json，或是配置lib项时遗漏了DOM相关条目，TypeScript就不会加载浏览器内置类型，自然不会出现智能提示。

3. 是否需要引入第三方依赖 #

访问标准浏览器原生API不需要引入任何第三方库或类型包。官方内置的DOM类型定义已经覆盖所有正式发布的Web标准接口，只有当你使用未进入正式标准的实验性API、或者引入第三方JavaScript库时，才需要额外安装对应类型声明包。

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