Typescript引入webdriverio后如何引入其d.ts且不丢失@types其他类型

问题根因 #

TypeScript 的 compilerOptions.types 配置存在默认限制：一旦你显式指定了该数组的值，TypeScript 就只会自动加载列表内声明的类型包，会自动忽略 node_modules/@types 下所有不在列表内的其他类型定义，这就是你丢失其他必要类型的原因。

解决方案 #

方案1：使用三斜线引用指令引入webdriverio类型（最推荐）

该方案不需要修改types配置，可以保留TypeScript自动加载所有@types包的默认行为：

1. 在项目中新增/修改全局类型声明文件，通常可命名为global.d.ts或typings.d.ts，放在项目根目录或者src目录下均可
2. 在该文件顶部添加如下引用指令：

/// <reference types="webdriverio/async" />

3. 确认该声明文件在tsconfig.json的include配置覆盖范围内，如果你用的是默认配置"include": ["src/**/*"]，只要把声明文件放在src目录下就会自动识别。

方案2：补全types配置列表

如果你确实需要保留显式配置types的写法，只需要把你项目中用到的所有@types包都添加到数组中即可，例如：

{
    "compilerOptions": {
        "types": ["node", "webdriverio/async", "jest", "lodash", "react"]
    }
}

该方案的缺点是后续新增任何第三方类型包时，都需要手动把包名添加到types数组中，否则还是会出现类型找不到的报错。

验证 #

修改完成后可以删除node_modules/.cache目录，再执行npx tsc --noEmit检查是否还有类型报错，确认所有类型加载正常。

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